skip to Main Content

Comment ajouter des boites de fonctionnalités avec icône sur WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Souhaitez-vous ajouter une boite de fonctionnalité avec une icône sur votre page d’accueil ? Cette fonctionnalité affiche des informations importantes sur vos produits et services. Il a été prouvé qu’il s’agit d’une technique engageante dans la présentation des produits aux potentiels clients.

Dans ce tutoriel, je vous montrerai comment ajouter cette fonctionnalité sur votre blog WordPress.

featureboxes

C’est quoi la boite de fonctionnalité avec les icônes ?

La plupart des personnes lorsqu’elles visitent un site web ne le lisent pas entièrement. En tant qu’humain, nous devenons des scanners professionnels.

Ceci signifie qu’en tant que titulaire d’une affaire en ligne, vous avez besoin de présenter des informations importantes d’une manière assez simple à analyser et de façon engageante.

C’est pourquoi la plupart des sites d’affaire proposent généralement une image sur le slider avec un bouton d’appel à l’action.

Juste en dessous de cela, vous pouvez utiliser une boite de fonctionnalités qui vous permet d’afficher des informations importantes de vos produits et services. Chaque boîte de fonctionnalité peut avoir chacun son bouton d’appel à l’action pour permettre aux utilisateurs d’en savoir plus.

Voici un exemple concret :

feature-boxes-wp

Comment ajouter une boite de fonctionnalité sur la page d’accueil de votre blog WordPress

La première chose que vous avez besoin de faire est d’installer et d’activer le plugin Advanced WP Columns. Après l’activation du plugin, vous devez accéder à l’emplacement « Réglages > Advanced WP Columns » pour configurer le plugin.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Il vous suffira de défiler vers le bas vers l’option « Column Class » et entrez un texte comme « mycolumns » (Nous y reviendrons). N’oubliez pas de cliquer sur le bouton de sauvegarde pour enregistrer vos réglages.

colclass

Ensuite, ce dont vous avez besoin de faire est d’ajouter des icônes SVG dans vos boites de fonctionnalités. Pour ce faire, je vous invite à installer et à activer le plugin WP SVG Icons.

Vous êtes désormais prêt à créer vos boites de fonctionnalités. Vous pouvez commencer par modifier la page où vous souhaitez faire apparaître la boite de fonctionnalité.

Vous remarquerez deux nouvelles options sur l’éditeur d’article. La première vous permet d’ajouter une icône et elle est située au-dessus de la barre d’outils de l’éditeur. La seconde est situé sur la barre d’outils de l’éditeur visuel.

Si vous ne parvenez pas à voir cette option, vous devez étendre les boutons de la barre d’outils.

newbuttons

La première chose que vous devez faire est de cliquer sur le bouton « Advanced WP Columns« . Ceci affichera une popup où vous pourrez cliquer sur « Empty » et sélectionner le nombre de colonne que vous souhaitez ajouter.

creating-columnsVous pouvez cliquer sur chaque zone et ajouter le texte de votre choix. Si vous n’ajoutez pas un texte maintenant, vous ne serez pas en mesure de voir la différence entre les colonnes plus tard. Une fois que vous aurez terminé, cliquez sur le bouton « Add Columns » tout en bas.

Vous remarquerez que les colonnes ont été ajoutées sur l’éditeur visuel. La prochaine étape est d’ajouter des icônes au dessus du texte.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

Prenez votre curseur et ajoutez-le au début de la zone de texte, puis ajoutez un nouveau retour à la ligne. Ceci ajoutera un nouvel espace dans lequel vous pourrez ajouter l’icône. Maintenant cliquez sur le bouton « Add new Icon« , et vous verrez une nouvelle fenêtre dans laquelle vous pouvez choisir une icône.

addingicons

Depuis cette fenêtre, vous pourrez sélectionner l’icône que vous souhaitez ajouter. Ensuite, cliquez sur le bouton « span » de telle sorte que votre contenu soit ajouté dans l’élément « <span> ».

Enfin, cliquez sur le bouton « Insert icon« , vous remarquerez que l’icône SVG a été ajoutée dans l’éditeur. En fonction du nom de l’icône, le shortcode se présentera de cette façon :

[wp-svg-icons icon= »rocket » wrap= »span »]

Répétez le processus chaque fois sur les autres boites. Une fois que vous aurez fini, n’oubliez pas de sauvegarder vos réglages.

Vous êtes prêt d’avoir fini le travail, cependant si vous remarquerez que les icônes sont toutes petites.

featureboxes-smallicons

Tout ce que vous avez à faire c’est d’ajouter un code CSS pour corriger le problème. Voici un exemple de code CSS que vous pouvez ajouter sur le fichier de style de votre thème enfant.

span.wp-svg-rocket.rocket { 
font-size:100px; 
} 

span.wp-svg-cloud.cloud { 
font-size:100px; 
} 
span.wp-svg-headphones.headphones { 
font-size:100px; 
} 
.mycolumns { 
border:1px solid #eee;
min-height:250px; 
padding-top:20px !important;
}

N’oubliez pas que la classe de l’icône doit correspondre à celle que vous avez ajoutée. Dans le cas présent, j’ai utilisé les icônes suivante : rocket, cloud, headphones.

featureboxesfinal

Créez Facilement votre blog avec SiteGround

SiteGround vous permet de créer votre blog WordPress en quelques clics seulements. Nom de domaine gratuit, hébergement sécurisé, SSL, transfert et bien plus encore... [ Recommandé ]

N’oubliez pas que nous avons rédigé un tutoriel qui vous permettra d’améliorer vos aptitudes en CSS. Vous pouvez également utiliser un page builder plus abouti comme Visual Composer pour lequel nous avons rédigé un tutoriel assez détaillé.

C’est tout pour ce tutoriel. j’espère qu’il vous aidera à créer de bonne boites de fonctionnalité sur votre blog WordPress. N’hésitez pas à proposer ce tutoriel à vos amis. Je profite de l’occasion pour vous passer les meilleurs vœux de toute l’équipe de BlogPasCher.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Thèmes WordPress cool que j'ai trouvé sur
Et il y a plus de 50 000 thèmes et modèles parmi lesquels choisir!

Back To Top
2 Partages
Partagez
Tweetez
Enregistrer2
WhatsApp