L’écosystème des plugins dédiés à Divi et ajoutant des options plutôt génériques (Divi Switch, Divi Booster, Divi Toolbox, etc) devenant de plus en plus important, nous allons nous attarder cette fois sur Divi Supreme.
Que propose-t-il par rapport aux autres ?
Est-il intéressant au final ?
Est-ce encore un plugin supplémentaire à acheter ?
Contrairement à tous les plugins précédemment cités, Divi Supreme propose une version gratuite disponible sur le dépôt WordPress en plus d’une version premium.
Nous allons donc comparer ces deux versions et voir s’il est vraiment nécessaire de passer de l’une à l’autre.
Divi Supremes Modules
Oui, c’est le nom exact de la version gratuite du plugin que vous trouverez sur le dépôt.
Vous pouvez donc l’installer directement depuis une recherche dans l’administration de WordPress.
Cette version ajoute 14 nouveaux modules au Divi Builder, tous compatibles avec le Visual Builder, ce qui s’avère très pratique à l’utilisation.
Nous allons les voir un par un.
Supreme Button
Le module Supreme Button permet d’afficher deux boutons côte à côte, mais également de définir un séparateur sous forme de texte entre ceux-ci.
Il peut donc s’avérer très utile par exemple pour une boutique en ligne pour permettre un paiement en une ou plusieurs fois.
Supreme Contact Form 7
Très pratique si le module formulaire natif de Divi ne vous convient pas ou est trop limité, il est possible de modifier un formulaire créé via Contact Form 7 dans le Visual Builder pour le personnaliser complètement sans entrer dans le code.
De nombreuses options sont proposées:
Si vous avez besoin de formulaires complexes, ce module sera idéal.
Supreme Embed Google Map
Un module très simple permettant d’afficher une Google Map en définissant une adresse et un niveau de zoom pour la carte.
Supreme Embed Twitter Timeline
Si vous souhaitez afficher les publications de votre compte Twitter sur votre site Divi, alors ce module vous facilitera grandement la vie.
Il permet d’afficher tous vos tweets (vous pouvez cependant définir une limite dans les options) sur vos pages en quelques clics en précisant juste le nom du compte utilisateur à afficher.
Supreme Facebook Comments
Ce module permet d’ajouter un espace de commentaires Facebook sur une page via un module.
Cela permet à vos visiteurs de laisser un avis ou un message sans se connecter à votre site – ou sans avoir de compte – mais également de les synchroniser avec votre page Facebook.
Supreme Facebook Feed
De la même manière que le module Twitter, celui-ci vous permet cette fois d’afficher vos publications Facebook sur votre site Divi.
Le seul prérequis à son bon fonctionnement est de créer un identifiant d’application au préalable.
Pour en savoir plus à ce sujet, vous pouvez consulter cet article.
Supreme Flipbox
Il est possible de créer différents types de flipbox avec de nombreux effets de zooms, transitions ou couleurs:
Supreme Gradient Text
Ce module vous permet d’appliquer un gradient de couleurs à un texte en définissant deux couleurs principales.
Il se comporte de la même manière que les gradients de couleurs pour les fonds de vos sections, mais appliquer aux textes ou paragraphes que vous voulez.
Supreme Image
Il permettait à l’origine d’appliquer des effets de transformation et rotation aux images, mais il n’est plus utile depuis qu’Elegant Themes a implémenté cette fonctionnalité à Divi.
Supreme Menu
Supreme Menu permet d’afficher le menu de votre choix sous forme d’une liste à puces sur votre page.
Je n’ai pas trop saisi l’utilité, si jamais il y en a une, puisque la personnalisation proposé par ce module reste très sommaire…
Supreme Price List
L’un des modules les plus pratiques de mon point de vue.
Si vous créez régulièrement des sites de restaurants, bars ou même listant différentes prestations, alors il va sans doute vous faire gagner beaucoup de temps.
Il permet de mettre en forme une liste de produits/prestations avec une image et un prix affiché à la manière d’une carte de restaurant.
Supreme Text Badge
Comme son nom l’indique, ce module permet d’ajouter un badge – un petit texte d’annotation – à coté d’une phrase.
Celui-ci est entièrement personnalisable via les options et peut être très utile pour mettre un article ou produit WooCommerce en avant.
Supreme Text Divider
Encore un module très utile pour améliorer le design de vos pages et notamment des titres facilement.
Il permet d’ajouter des séparateurs avant ou après un titre, ou bien les deux.
Vous avez le choix parmi des lignes pleines, pointillées, des tirets, des doubles lignes…
Le positionnement, l’épaisseur et la largeur sont entièrement paramétrables.
Supreme Typing
Supreme Typing reprend l’effet de type machine à écrire pour afficher un texte.
Ce module remplace par exemple le tutoriel de Pierre pour implémenter le script permettant cet effet.
Il est entièrement personnalisable.
Supreme Module Pro
Maintenant que nous avons fait le tour de la version gratuite, nous allons voir ce que propose la version premium.
9 modules supplémentaires sont disponibles dans le Visual Builder, ainsi que 3 fonctionnalités dont je vous reparle un peu plus loin.
C’est parti, et on commence avec…
Supreme Floating Multi Image
Vous pouvez ici ajouter plusieurs images, les positionner ou vous voulez sur l’écran en largeur et hauteur et le module va leur assigner un effet de flottaison infini sur la page.
Cela peut-être un effet sympa suivant le site que vous développez.
Supreme Glitch Text
Alors ici, je n’ai pas trop perçu l’intérêt.
Ce module permet de rendre un texte en quelque sorte clignotant, ou en tout cas comme si on le voyait avec un écran de mauvaise qualité.
À moins d’un design très particulier, je ne vous conseille pas de l’utiliser sur vos sites sous peine de favoriser les crises d’épilepsie chez vos visiteurs.
Je serais curieux cependant de savoir ce que vous pensez d’un tel effet ou dans quel cas vous seriez amené à l’utiliser.
Dites-moi tout en commentaires 😉
Supreme Icon Divider
Celui-là en revanche, je l’ai trouvé vraiment pratique.
Il reprend exactement le même principe que le module Supreme Text Divider mais permet d’insérer des icônes à la place du texte :
Les icônes disponibles sont ceux que Divi inclus nativement et que vous pouvez par exemple retrouver dans le module Résumé.
Comme précédemment, les tailles, polices, positions, couleurs et types de bordures sont entièrement personnalisables.
C’est un module idéal à utiliser sur des sites d’entreprises ou de start-up pour présenter des activités ou services .
Supreme Image Carousel
Ce module est idéal pour afficher un carrousel des logos de vos partenaires.
Il permet d’afficher entre 1 et 9 images à la fois, de choisir leur format, de définir la vitesse de défilement, le nombre d’images à faire défiler, et de personnaliser les flèches de défilement.
Seul bémol, les images ne sont pas cliquables et on ne peut donc pas renvoyer sur une URL.
Supreme Image Hover Reveal
Ici vous pouvez ajouter un effet d’affichage un peu original au passage de la souris sur vos images, cependant on ne peut pas vraiment le paramétrer et comme l’image est visible de la même manière dans tous les cas je n’ai pas été hyper convaincu :
Supreme Image Text Reveal
En revanche ce module est nettement plus pratique.
Il permet d’afficher un overlay avec une ligne de texte sur une image au passage de la souris :
L’effet n’est pas paramétrable, en revanche le positionnement du texte, les couleurs, polices et tailles le sont.
Il est possible d’ajouter une URL pour renvoyer vers un produit ou article, ce qui peut améliorer les conversions de votre site.
Dans les prochaines mises à jour, l’ajout d’un sous-titre ou la possibilité d’ajouter un bouton rendrait ce module encore plus efficace.
Supreme Shuffle Letters
Encore un module un peu bizarre.
Il permet d’afficher n’importe quels caractères au hasard à la place d’un mot.
Ici j’ai par exemple voulu rendre aléatoire le mot “Community” :
Tout comme le module Glitch, il peut probablement vous servir dans des cas très particulier mais il ne faut pas en abuser.
Supreme Star Rating
J’aime bien ce module, car si vous êtes blogueur ou donnez votre avis sur différents produits ou services, alors vous allez pouvoir ajouter un système de notation via un module très bien pensé :
Il permet d’ajouter des étoiles (soit 5 soit 10) ainsi qu’une notation (donc entre 1-5 ou 1-10).
La taille, couleur et l’espacement entre les étoiles sont personnalisables via les options et grâce au module vous pouvez les placer n’importe où.
C’est un module idéal pour les boutiques en ligne pour renforcer la qualité de vos produits.
Les notations ne sont en revanche pas modifiables par les visiteurs, seuls les admins via le module peuvent changer la note.
Supreme Tilt Image
Dernier module de la version premium, Supreme Tilt Image permet de donner un effet de relief suivant le mouvement de la souris sur une image.
Il permet également d’y ajouter un titre et un sous-titre ou paragraphe, une icône ou encore une couleur d’overlay.
Voyez sur l’exemple suivant :
L’effet est plutôt sympa et permet de mettre en avant différentes catégories ou produits sur votre site et attirera à coup sûr l’oeil de vos visiteurs.
Quelques extensions intégrées à la version premium
Divi Supreme intègre trois fonctionnalités supplémentaires en dehors des modules.
Schedule Content Visibility
Une option qui peut s’avérer intéressante pour afficher un contenu uniquement pendant un laps de temps, comme des ventes privées.
Divi Supreme ajoute un champs de personnalisation permettant de choisir la date et l’heure pour afficher et masquer un bloc automatiquement très simplement:
Vous pouvez l’utiliser sur toutes les sections, lignes ou modules.
Divi Library Shortcodes
Cette fonctionnalité génère un shortcode pour chaque élément enregistré dans la bibliothèque Divi et vous permet ainsi de l’injecter ou vous souhaitez dans un module Texte (ou n’importe quel champs de ce type).
Divi Library Widget
Alors ici, je vous avoue que j’ai cherché longtemps et que je n’ai rien trouvé de particulier.
Il est possible d’ajouter des widgets contenant les modèles enregistrés dans la bibliothèque Divi, mais mis à part via un shortcode je n’ai rien vu pour le faire…
Si vous voulez en savoir plus sur cette version premium, je vous invite à visiter le site officiel:
Conclusion
Après avoir testé les deux versions longuement, je pense que Divi Supreme est un plugin qui peut-être utile pour quelques-unes de ses fonctionnalités mais qui ne nécessite pas forcément un achat de la version premium.
Certains modules ou fonctionnalités sont vraiment sympas, et si vous créez beaucoup de sites le plugin peut devenir intéressant, mais globalement la plupart des options ou effets de design sont plutôt simples à ajouter en utilisant un peu de code.
Il est même possible de trouver des tutoriels un peu partout sur le net pour y arriver si vous n’avez aucune connaissance.
Même si le prix reste abordable, 18$, je pense que Divi Supreme reste globalement un plugin un peu trop gadget pour le moment pour être un très bon investissement.
Il reste cependant un plugin à suivre car de nombreuses mises à jour sont prévues et il pourrait nous réserver de bonnes surprises.
Je n’utilise pas assez Divi pour avoir besoin d’encore plus de possibilités. Mais peut-être un jour 🤔
Super article ! Grâce à vous j’ai installé et utilise le module supreme typing text ! Mais je n’ai pas trouvé comment renvoyer un texte à la ligne. Est-ce possible ?
Hello, essaye d’insérer la balise HTML
là ou tu veux un retour à la ligne.
Concernant la partie Supreme Image, il y a un grand intérêt.
Elle permet d ajouter une image et une lightbox avec une autre image.
Du coup si vous sélectionnez une image de taille réduite, vous pouvez ajouter la version en taille originale.
Très bon pour le référencement.
Bonjour, l’option effet 3D n’apparaît pas dans l’animation de mon module Flipbox, et “Flipbox Type” non plus d’ailleurs. Mon plugin est pourtant bien mis à jour, y a t’il une manip à effectuer pour accéder à l’option effet 3D ? Si qqn pouvait m’aider…
Bonjour, il se peut qu’elle ait été déplacé depuis ce tuto. Tu as la version gratuite ou payante ?