Point culminant du plugin Divi : Module Ruban Divi

Divi Ribbon Module est un plugin tiers pour Divi qui ajoute un ruban stylable au contenu du module. Ajoutez une image, un bouton, un titre, un contenu et un style pour chaque élément aussi détaillé que vous le souhaitez. Utilisez-le pour mettre en évidence une vente de produit, créer un appel à l'action ou attirer l'attention sur n'importe quel élément. Dans ce point culminant du plugin Divi, nous examinerons le module Divi Ribbon et verrons ce qu'il peut faire.

Installation du module ruban Divi

1. Allez sur et téléchargez le plugin
2. Dans le tableau de bord WordPress, allez dans Plugins > Ajouter un nouveau
3. Cliquez sur Télécharger le plugin
4. Sélectionnez le fichier compressé sur votre ordinateur
5. Cliquez sur Installer maintenant
6. Lorsque vous voyez « Plugin installé avec succès », cliquez sur Activer le plug-in
7. Allez dans Outils > Licence du plugin Divi Ribbon et entrez votre clé de licence

Module Ruban Divi

Un nouveau module est ajouté au Divi Builder appelé Divi Ribbon. Le module crée un texte de présentation (avec un titre, un contenu, une icône, une image et des boutons) et place un ruban sur ce texte de présentation. Vous contrôlez le placement et le style du ruban ainsi que les autres éléments du module. Le texte de présentation comprend une ombre de boîte par défaut.

Onglet Contenu du ruban Divi

L'onglet Contenu comprend les paramètres principaux, la rotation du texte de présentation, l'image et l'icône, le lien, l'arrière-plan et l'étiquette d'administration. Les paramètres principaux fournissent des sélections pour le type de ruban, l'emplacement, le texte, le titre et le contenu.

Réglages principaux

Vous avez le choix entre 7 types de rubans. Ils fonctionnent de la même manière et incluent le même contenu, mais ils affichent des formes différentes. Les formes incluent des rubans avec des extrémités fourchues, des rubans qui s'étendent sur les textes de présentation, des rubans sur le côté ou sur le dessus, et ont différents types d'extrémités telles que des fourchettes ou des cercles. Cela vous donne beaucoup de choix d'affichage.

Chacun des types de ruban a des options d'emplacement différentes en fonction de leurs capacités d'affichage. Cet exemple montre le ruban d'angle. Il peut être placé en haut à gauche ou à droite, ou en bas à gauche ou à droite.

Forked peut être affiché en haut à gauche ou à droite.

La pleine largeur peut être affichée au-dessus ou au-dessous.

Certains types de ruban ont d'autres options qui s'ouvrent lorsque vous les sélectionnez. Cet exemple montre le ruban pleine largeur. Vous pouvez ajuster son emplacement et sa hauteur.

Le ruban latéral comprend des ajustements pour l'emplacement, la largeur et la hauteur. Toutes les commandes sont les curseurs Divi standard, elles sont donc faciles à utiliser.

Le titre et le contenu sont ajoutés à la carte elle-même. La zone de contenu comporte des onglets pour le visuel et le texte, et ils peuvent inclure des médias, des liens, du code et des codes courts.

Rotation de la présentation

La rotation Blurb ajoute une option de retournement 3D qui affiche le contenu après que la carte se soit retournée sur le côté, ainsi qu'une image et une icône à afficher sur la police.

Ajoutez des images de votre médiathèque et des icônes de la liste. L'image/l'icône s'affichera en premier, puis la carte se retournera pour afficher le contenu en survol. Vous pouvez également ajouter des images en arrière-plan.

Bouton

Le bouton comprend du texte, un lien, des options de fenêtre, un remplissage et une marge. J'ai ajouté une marge de gauche pour faire sortir le bouton de sous le ruban.

Onglet de conception du ruban Divi

L'onglet Divi Ribbon Design comprend des paramètres pour l'image et l'icône, la rotation, le texte, la taille, le ruban, le texte du titre, le corps du texte, le bouton, l'espacement, la bordure, les filtres, la transformation et l'animation.

Image et icône

Les paramètres d'image et d'icône vous permettent d'ajuster la largeur de l'image, la bordure, l'ombre de la boîte, les couleurs, le mode de fusion, etc.

Rotation

Les paramètres de rotation vous permettent d'ajuster la couleur du visage. C'est l'arrière-plan derrière l'image. Désactivez la bordure de la carte d'origine pour pouvoir créer la vôtre. Ajustez l'icône de rotation. Il a beaucoup d'options pour l'icône. Ajoutez une couleur d'icône, un arrière-plan, une bordure et utilisez une taille de police de pré-rotation.

Au début, c'était un peu déroutant que le réglage de l'icône soit ici au lieu des paramètres de l'image et de l'icône, mais il est logique d'être dans cette section. Il serait logique de placer les paramètres de l'image ici aussi, mais il y en a tellement qu'il faut un onglet séparé.

Espacement du texte

L'espacement du texte vous donne les paramètres de marge et de remplissage pour le titre et le corps du texte. Normalement, le ruban s'affichera sur le contenu. Cela vous permet d'ajuster le positionnement du texte en fonction de l'emplacement du ruban si vous le souhaitez visible. J'ai ajouté un remplissage pour le titre et le corps du texte dans cet exemple.

Paramètres du ruban

Les paramètres du ruban vous permettent de changer la couleur, d'ajouter une image qui remplira le ruban, de désactiver l'extrémité du ruban (pour empêcher le style de chevaucher la carte), d'ajuster les polices, d'ajouter une ombre de texte, d'ajuster les coins du ruban et la bordure. J'ai changé la couleur du ruban dans cet exemple.

L'image remplira le ruban. Je n'ai pu que faire fonctionner les JPG, mais cela fonctionne bien. Je vous recommande de choisir une image qui a déjà la taille que vous souhaitez afin que vous puissiez contrôler son affichage.

La désactivation de l'extrémité du ruban supprime la partie qui se replie derrière la carte, comme vous pouvez le voir à gauche du ruban dans cet exemple.

Texte

Le titre et le corps du texte incluent toutes les options attendues. Dans cet exemple, j'ai augmenté la taille des deux, changé la couleur du texte du titre et centré les deux.

Bouton

Le style du bouton comprend toutes les options attendues et ajoute une fonctionnalité pour afficher le dégradé au-dessus de l'image d'arrière-plan. Dans cet exemple, j'ai augmenté la taille de la police, modifié la couleur de la police et de la bordure, arrondi la bordure, donné un dégradé à l'arrière-plan et ajouté une ombre.

Exemples de ruban Divi

Voici quelques exemples de l'apparence du ruban Divi dans les mises en page Divi.

Ruban en vente

Pour le premier exemple, je remplacerai le CTA à droite.

Il a été réalisé avec trois modules : image, texte et bouton. Je vais utiliser le même arrière-plan, le même texte et le même bouton et le recréer avec un seul module Divi Ribbon.

Voici le résultat en utilisant Divi Ribbon. J'ai ajouté l'image, le texte du titre et le corps du texte pour qu'ils correspondent à l'original. J'ai également ajouté le ruban dans le coin et déplacé le bouton au centre et utilisé la couleur de bordure de l'arrière-plan du ruban. L'original a utilisé l'image dans la colonne. Je l'ai supprimé et ajouté l'image au module, mais cela fonctionnerait de toute façon.

Je n'ai pas inclus l'image ondulée (une onde triangulaire), mais elle pourrait facilement être ajoutée dans la zone de contenu. Le titre devra également être déplacé vers la zone de contenu afin que le graphique apparaisse au-dessus du titre. Le ruban On Sale le fait ressortir un peu plus.

Ruban des derniers projets

Pour celui-ci, j'ai remplacé une image par le module Divi Ribbon et ajouté un ruban pleine largeur en tant que CTA pour voir les derniers projets. Le ruban a une image d'arrière-plan et des polices de la mise en page. L'ombre de la boîte est le paramètre par défaut. J'ai centré le texte.

Ruban CTA produit

Pour cet exemple, j'ai ajouté un module Divi Ribbon à la section héros de la page de la boutique de la mise en page Leather Company. En utilisant une image de la mise en page, j'ai remplacé le CTA de vente standard. Le ruban et le bouton utilisent les couleurs de la mise en page. J'ai déplacé le ruban dans le coin inférieur droit et retiré l'extrémité du ruban.

Ceci est une section spécialisée. Je suis content de voir que cela fonctionne bien dans les sections spécialisées. De nombreux modules tiers ne sont pas toujours compatibles avec ce type de section.

Tester et acheter

Vous pouvez acheter le module Divi Ribbon sur le site Web du développeur pour 11 $ pour un usage personnel ou commercial sur un seul site Web.

Vous pouvez également tester le plugin avant de l'acheter pour voir s'il répondra à vos besoins. Le lien pour tester le plugin se trouve sur la page de vente du développeur. Il vous donne un accès complet au Divi Builder et au plugin, vous pouvez donc le styler à votre guise. Je recommande d'essayer.

Mettre fin aux pensées

Divi Ribbon Module est un module intéressant pour le Divi Builder. Il comprend plusieurs emplacements pour ajouter des images et vous pouvez inclure un titre, un contenu, une icône et un bouton. Avec toutes ces fonctionnalités, il fonctionne très bien comme texte de présentation, appel à l'action, lien de produit, lien de blog, etc. Ajoutez à cela un ruban stylisé pour attirer l'attention sur les ventes ou d'autres CTA, et ce plugin fournit des options de style difficiles à obtenir avec un seul module.

Le module Divi Ribbon fonctionne parfaitement avec Visual Builder et Theme Builder. C'est un excellent plugin qui est facile à recommander.

Nous voulons de vos nouvelles. Avez-vous essayé le module Ruban Divi ? Faites-nous part de votre expérience dans les commentaires.

Image en vedette via Foxys Graphic / shutterstock.com