Catégories

Ajoutez de belles boîtes d’avantages et d’inconvénients dans WordPress avec ces plugins

Lorsque vous écrivez des critiques de produits ou des articles de comparaison, où vous devez mettre en évidence le bon et le mauvais du produit ou du service en vedette, c’est une bonne idée d’ajouter un plugin Avantages et Inconvénients, pour afficher des boîtes standardisées au bas de vos messages.

Quand j’ai vu l’éditeur de Gutenberg pour la première fois, je l’ai détesté.

J’ai immédiatement cherché une solution pour ramener l’ancien look de mon backend WordPress post. Un look avec le quoi j’étais si à l’aise, un confort construit depuis plus de 15 ans.

Heureusement, je n’étais pas seul et j’étais plus qu’heureux quand j’ai vu que les gars réfléchis de WordPress ont fait un plugin appelé Éditeur classique.

J’étais sceptique quant au nouvel éditeur de blocs, avec tous les constructeurs de pages populaires, à quoi pensait WordPress? Comment rivaliseraient-ils avec les puissantes fonctions d’Elementor ou de WPBakery ?

avantages et inconvénients exemples Gutenberg

Le temps a passé et j’ai continué à ignorer l’éditeur de Gutenberg. Un jour, j’ai installé une nouvelle copie de WordPress sur un nouveau site que je commençais alors, et j’ai pensé que j’allais l’essayer.

Au début, je détestais ça, mais ensuite j’ai progressivement commencé à essayer de nouveaux addons, de nouveaux blocs, différents styles, pour réaliser un jour que c’est l’avenir de WordPress et de la création de pages.

Je passe toujours à l’éditeur de blocs ici sur wpctrl.com, car il y a beaucoup de messages utilisant d’anciens shortcodes et je dois examiner manuellement chacun d’entre eux, mais je suis dans le processus.

Cet article est fait avec l’éditeur Blocks!

Commençons par les exemples d’avantages et d’inconvénients (édition Gutenberg)

Lorsque vous oubliez les vieilles habitudes dans l’écran 'Edit Post', le TinyMCE, meta boxes, etc., et que vous vous habituez à l’éditeur block, vous allez adorer.

Tout d’abord, allez chercher des plugins complémentaires gratuits dont vous aurez besoin pour ces exemples.

Plugins utilisés dans le tutoriel

 

 

Méthode n ° 1 – Utilisation des blocs Genesis

Ceci est ma première suggestion de créer une section Avantages et Inconvénients pour vos avis avec des blocs Gutenberg.

Exemple en direct :

Avantages

– Gratuit

– Bon prix

– Optimisé

Contre

– Mauvaise qualité

– Support médiocre

– Cher

La section ci-dessus est faite avec le plugin gratuit Genesis Blocks.

Voici le processus exact:

Choisissez l’endroit souhaité pour placer les cases dans votre message et cliquez sur le signe '+' pour ajouter un nouveau bloc.

Vous pouvez ajouter une colonne et la diviser en deux moitiés.

Ensuite, faites défiler vers le bas et appuyez sur le bloc Genesis Blocks Notice.

De là, il vous suffit de changer les couleurs et d’ajouter la liste des avantages et des inconvénients.

C’est la méthode la plus simple, mais elle a ses limites.

  • Vous ne pouvez pas utiliser d’icônes personnalisées
  • Vous ne pouvez pas ajouter une liste à puces réelle (uniquement du texte brut)

Méthode n ° 2 – Utilisation des blocs Getwid

Exemple en direct :

Avantages

Bon prix

Bon support

Bonne qualité

Contre

Prix élevé

Mauvais support

Mauvaise qualité

Celui-ci est assez facile à obtenir aussi.

Cliquez sur le signe plus dans votre message ou votre page pour ajouter un nouveau bloc. Recherchez les blocs Getwid et sélectionnez la boîte d’icône dans le menu Getwid.

Dans les options de bloc sur le côté droit de votre écran, appliquez les paramètres suivants :

  • Dans l’onglet Général, choisissez l’icône de la première colonne et l’alignement du contenu.
  • Dans l’onglet Style, vous pouvez définir la taille de l’icône, les couleurs de l’icône et de l’arrière-plan de l’icône, le rayon et l’espace autour de l’icône (rembourrages)
  • Dans l’onglet avancé, vous avez la possibilité de définir ajouter un lien à votre icône. Laissez ce champ vide, car cela n’aura aucun sens

Lisez ceci d’abord!

Au moment d’écrire cet article, je n’ai trouvé aucun plugin pour faire ce que je décris ci-dessous. Mais plus tard, de nouveaux plugins ont commencé à apparaître, pour faire des listes d’avantages et d’inconvénients encore meilleures, et ce qui est plus important, c’est de les rendre plus faciles!

Je les ai donc rassemblés et ajoutés au post ci-dessous.

Vérifiez JoomDev WP Avantages & Inconvénients!

Consultez la liste des avantages et des inconvénients des plugins et décidez par vous-même. Si vous aimez mieux le mien, n’hésitez pas à l’utiliser. Profiter!

Meilleurs plugins GRATUITS pour et inconvénients

Avantages et inconvénients est un élément puissant dans vos critiques de produits d’affiliation, et sont connus pour augmenter le taux de conversion, en plus d’être un excellent élément convivial. Les utilisateurs ont tendance à sauter les longs articles et à rechercher directement des conclusions ou des résumés.

1. Avantages et inconvénients de Mighty Classic

C’était l’un des premiers plugins qui sont censés faire exactement cela – montrant des listes d’avantages et d’inconvénients avec un simple bouton CTA.

Le plugin gratuit fournit un shortcode et il est conçu pour fonctionner avec l’éditeur WordPress classique.

Si vous souhaitez utiliser la fonctionnalité dans l’éditeur Gutenberg, vous devrez obtenir les avantages et inconvénients puissants

View Demo

2. i2 Avantages et inconvénients

i2 Avantages et inconvénients

Vous pouvez utiliser l’ancien shortcode ou modifier la liste visuellement dans les blocs Gutenberg.

Les avantages et les inconvénients ont plusieurs styles à choisir. Vous pouvez modifier les couleurs, les icônes, le style des boutons, etc.

View Demo

Avantages et inconvénients du bricolage (Old Classic Edditor)

Je vais vous montrer un moyen facile de le faire, sans écrire ou éditer aucun type de code.

Voici ce que vous obtiendrez à la fin…

Avantages et inconvénients Boîtes WordPress

Voici un exemple en direct dans la Basel Theme Review.

Une fois que vous obtenez une paire de boîtes ressemblant à ce que vous voulez, vous pouvez l’enregistrer dans un brouillon de publication et plus tard simplement la copier et la coller dans vos nouveaux avis en remplaçant uniquement les attributs qu’elle génère.

Les plugins que je suis sur le point de montrer ne sont pas spécialement conçus à cet effet. Quand je suis tombé sur cela pour la première fois, je cherchais un moyen de montrer deux boîtes simples avec une liste de phrases courtes de 2-3 mots.

Mes recherches ne donnent aucun résultat satisfaisant, car il semblait qu’il n’y avait pas de plugin gratuit dédié pour ce que je voulais.

Alors, comment ai-je réussi à créer mes boîtes pour et contre?

Mise à jour: Ce plugin n’est plus mis à jour, il n’est plus recommandé de l’utiliser.

J’ai utilisé un plugin gratuit appelé: Olevmedia Shortcodes.

Ce plugin propose également de nombreux autres shortcodes, mais celui que nous allons utiliser pour cette tâche est la « Box »!

Vous pouvez également utiliser les Shortcodes Olevmedia pour créer un bouton CTA pour vos avis !

Mais avant tout.

Avant de passer au shortcode Box, nous allons ajouter deux 1/2 colonnes à notre page.Vous pouvez également utiliser le plugin Olevmedia Shortcodes pour cela, ou le shortcode de colonne de votre thème. Ce faisant, nous garantissons un affichage réactif approprié sur les appareils mobiles ainsi que des tailles uniformes des boîtes.

Sélectionnez l’icône « plus » dans l’éditeur.Dans le menu déroulant, sélectionnez « Colonnes », puis choisissez « Une moitié » et insérez-le dans votre page de travail. Après cela, faites de même, mais cette fois cochez la case « dernière colonne » pour afficher cette colonne à côté de votre première.

Vous devriez obtenir deux lignes de shortcodes comme ceci:
Collez votre boîte Pros ici
Collez votre boîte Cons ici
Plus tard, nous collerons nos shortcodes de boîte dans ces colonnes.

Passons aux choses au travail maintenant et créons les boîtes réelles…

Dirigez-vous à nouveau vers l’icône « Plus » dans votre éditeur visuel et choisissez le shortcode « Box ». Vous devriez obtenir cet écran après avoir cliqué dessus:

Comme vous pouvez le voir, nous avons des options de personnalisation, que nous examinerons ensuite.

Les champs que vous devez remplir pour obtenir quelque chose de similaire à mes boîtes de démonstration sont les suivants:

  • Titre: Avantages
  • Contenu: laissez ce champ vide pour l’instant
  • Frontière: Ajoutez une bordure si vous le souhaitez (dans mon exemple, il n’y en a pas)
  • Couleur d’arrière-plan: Choisissez une couleur verte/rouge ou autre pour l’arrière-plan
  • Icône de boîte : Pour mon exemple, j’utilise les icônes pouce vers le haut et pouce vers le bas
  • Certaines hauteurs de boîte: Pour l’exemple ci-dessus, j’ai réglé la hauteur sur 250px. Notez que si vous laissez cela vide, vos boîtes seront inégales!

Remplacez le « Voici le contenu » par vos textes d’avantages ou d’inconvénients souhaités et mettez-les dans une liste à puces, directement à partir de l’éditeur WordPress en mode visuel. Vous devriez obtenir quelque chose comme ceci:

"Pros
  • Avantages 1
  • Avantages 2
  • Avantages 3…

[/encadré]

Vous pouvez maintenant dupliquer le shortcode ci-dessus et simplement changer la couleur, l’icône et le nom en « Inconvénients ». Maintenant, vous avez les deux boîtes – Avantages et inconvénients. Enfin, nous devons les mettre dans chacune des colonnes que nous avons créées au début.

Copiez et collez votre boîte « Pros » dans la première colonne:

Avantages ici

Copiez ensuite la zone Inconvénients et collez-la dans la dernière colonne entre :

Inconvénients ici 

Félicitations ! Vous êtes prêt à créer des critiques impressionnantes.

Enregistrez votre préréglage dans une page de brouillon ou un article pour qu’il soit prêt à l’emploi. Assurez-vous simplement de le coller en mode « Texte », chaque fois que vous l’utilisez dans un message réel, pour éviter toute rupture de code.

Disclosure: Some of the links on the page may contain a ref code (affiliate links), that tells the other side that we have sent you. If you liked what we suggest and you make a purchase, we may receive a commission.