Point culminant du plugin Divi : Divi Supreme

Divi Supreme est un plugin tiers pour Divi qui ajoute de nombreux paramètres pour ajouter de nouvelles fonctionnalités au Divi Builder ainsi que de nombreux nouveaux modules. Dans cet article, nous examinerons Divi Supreme pour voir ce qu'il peut faire et vous aider à décider s'il s'agit du plugin dont vous avez besoin dans votre boîte à outils Divi.

Installation

L'installation est simple et directe.

1. Achetez et téléchargez le plugin depuis le Divi Marketplace
2. Accédez à Plugins > Ajouter un nouveau > Télécharger un plugin
3. Cliquez sur Choisir un fichier
4. Localisez le fichier zip du plugin sur votre ordinateur et sélectionnez-le
5. Cliquez sur Installer maintenant
6. Cliquez sur Activer
7. Allez dans Divi Supreme Pro > Licence dans le tableau de bord WordPress et entrez votre clé de licence

réglages généraux

Divi Supreme ajoute un écran de menu avec plusieurs onglets pour personnaliser les paramètres comme vous le souhaitez. L'onglet Paramètres généraux comprend des bascules pour activer les éléments planifiés, une fenêtre contextuelle, un widget de bibliothèque, un lien Lire plus de contenu, des codes abrégés de bibliothèque et une visionneuse réactive. Regardons quelques-uns d'entre eux.

Élément planifié

Les éléments planifiés fournissent un calendrier avec l'heure exacte afin que vous puissiez planifier pour l'afficher ou le masquer pour ces heures. Vous pouvez également choisir à quel utilisateur il s'applique. Ceci est ajouté à toutes les sections, lignes, colonnes et modules.

Surgir

La fonctionnalité contextuelle est ajoutée aux modules. Vous pouvez choisir le type de popup, choisir une disposition dans la bibliothèque, sélectionner les déclencheurs d'ouverture et de fermeture, la fermeture automatique, les animations d'entrée et de sortie, les positions, les largeurs, les superpositions, les boutons de fermeture, les icônes, les couleurs, etc.

Lire la suite

Lire la suite ajoute un lien vers certains modules pour révéler leur contenu au clic. Choisissez d'afficher le lien sur mobile, la hauteur réduite, le texte, la police, les couleurs, l'ombre, le CSS personnalisé, etc.

Widget de bibliothèque

Le widget de bibliothèque vous permet de placer n'importe quelle mise en page de la bibliothèque Divi dans vos barres latérales, votre pied de page ou partout où vous utilisez des widgets.

Cet exemple montre la mise en page de démonstration dans la barre latérale. La mise en page que j'utilise n'a pas été conçue pour cet espace, mais il est intéressant de noter qu'elle peut utiliser les mises en page Divi pour créer des barres latérales.

Visionneuse réactive

La visionneuse réactive ajoute de nouveaux outils à la barre d'outils Builder qui offre plus d'options d'affichage. Lorsque vous choisissez d'afficher les modes tablette ou téléphone, de nouvelles tailles d'écran sont ajoutées à la barre d'outils. Il ajoute également un champ où vous pouvez entrer une taille personnalisée.

Générateur de thème facile

Easy Theme Builder vous permet de configurer votre en-tête, de modifier les couleurs des éléments d'en-tête lors du défilement et de personnaliser les éléments de rétrécissement.

En-tête fixe

Par défaut, un en-tête créé avec le Theme Builder défile avec le site. Dans l'exemple ci-dessus, j'ai fait défiler la page vers le bas et l'en-tête a défilé.

L'en-tête est maintenant fixe, donc quand je fais défiler l'en-tête reste en place.

Défilement

Pour le défilement, j'ai changé les couleurs de fond dans les deux sections. J'ai également ajouté l'ombre de la boîte pour qu'elle apparaisse lors du défilement.

Voici mon en-tête Theme Builder avant de faire défiler. Je l'ai réglé sur Fixe et pour pousser le contenu vers le bas. Cet en-tête comporte deux sections.

Voici l'en-tête après le défilement. Les deux sections ont changé leurs couleurs de fond en fonction de mes paramètres.

Rétrécir

Shrink vous permet de spécifier la taille du menu lors du défilement et de changer le logo en une nouvelle image. Ajoutez un remplissage à la section, aux lignes, au module et spécifiez un pourcentage de réduction de l'image.

Voici mon en-tête Theme Builder avec ses paramètres par défaut et un nouveau logo.

J'ai augmenté la taille pour qu'il soit facile de voir la différence. J'ai ajouté 8px de remplissage et défini l'image à 80%. Il a maintenant changé le logo en ma nouvelle image.

Paramètres des médias sociaux

Les paramètres des médias sociaux vous permettent d'entrer votre identifiant d'application Facebook et de changer la langue afin que vos modules utilisent la même langue que votre site Web.

Divers

Les divers paramètres vous permettent de supprimer les données du plugin lors de la désinstallation, d'autoriser les téléchargements de fichiers JSON, les téléchargements SVG et de modifier le nom et l'icône du menu Divi Supreme.

Modules Divi

Divi Supreme ajoute 42 nouveaux modules au Divi Builder. Ils ajoutent de nombreuses nouvelles fonctionnalités pour les images, le texte, les boutons, les formulaires de contact, les réseaux sociaux, etc. Examinons-en quelques-unes.

Heures d'ouverture suprême

Supreme Business Hours comprend des sous-modules pour chaque jour de la semaine, vous permettant de les nommer individuellement, d'afficher différentes heures et de les styliser. Vous pouvez également les coiffer ensemble comme je l'ai fait ici. Il vous donne un contrôle indépendant sur les polices du jour et de l'heure. Vous pouvez également saisir le texte de votre choix dans les champs.

Bouton Suprême

Supreme Button vous offre deux boutons que vous pouvez styliser ensemble ou indépendamment. Il ajoute également du texte de séparation, une lightbox pour chaque bouton et des info-bulles. Chacun des éléments a ses propres options de style. Vous pouvez utiliser les fonctionnalités exactes que vous souhaitez, vous n'avez donc pas besoin d'utiliser les deux boutons, le texte de séparation, etc.

Carte Suprême

Supreme Card crée des cartes qui ressemblent à des articles de blog. Ajoutez une image, un titre, une description, un bouton et un badge. Chacun des éléments peut être stylisé indépendamment. J'ai ajouté une image, augmenté le poids de la police pour le titre, modifié la couleur du badge et la taille de la police, modifié la couleur des boutons, arrondi le bouton et ajouté une ombre au bouton. C'est la vue empilée.

Vous pouvez également créer en ligne et choisir la largeur, l'alignement de l'ordre et l'alignement horizontal du contenu (qui ajuste la position verticale de l'image). Cela montre la gauche pour l'alignement de l'ordre et le centre pour l'alignement horizontal. L'option d'alignement est excellente pour créer des CTA dans une disposition alternée.

C'est le bon alignement. J'ai également apporté quelques ajustements à l'image, tels que l'ajout de coins arrondis, d'une bordure rouge et d'une ombre de boîte. Vous pouvez également ajouter une superposition à l'image.

Carrousel de Cartes Suprême

Le carrousel de cartes suprême offre les mêmes fonctionnalités que la carte suprême, mais ajoute plusieurs cartes à un curseur. Il vous offre des options de style afin que vous puissiez styler les cartes indépendamment. Il ajoute également des options de style pour le carrousel, notamment des flèches et une navigation par points, ainsi que les fonctionnalités de curseur standard. Cela montre les paramètres par défaut avec les images que j'ai ajoutées. C'est l'alignement empilé.

C'est l'alignement en ligne. J'ai ajouté une couleur de fond à chacun des sous-modules pour qu'ils se démarquent. J'ai également modifié la taille et la couleur des flèches et les couleurs de la navigation par points. Les réglages de la flèche vous permettent également de contrôler la position, l'icône précédente et l'icône suivante.

Double titre suprême

Supreme Dual Heading Fournit trois sections pour le texte : avant, milieu et après. Le texte du milieu est d'une couleur différente par défaut. Les trois utilisent les mêmes paramètres, mais vous pouvez les styliser indépendamment. Vous pouvez également les afficher en ligne ou empilés dans la combinaison de votre choix. Inline est le paramètre par défaut. J'ai augmenté la taille de la police du texte avant et du milieu, diminué le texte après et mis le texte du milieu en gras.

Carte Google intégrée suprême

La carte Google intégrée vous permet d'ajouter l'adresse que vous souhaitez épingler et de choisir le niveau de zoom. Aucune autre configuration n'est nécessaire. Il utilise ctrl + pour zoomer, afin que les utilisateurs puissent le faire défiler sans que la page ne s'arrête pour zoomer sur la carte.

Il n'a pas de paramètres personnalisés pour aucun des éléments de la carte, mais il a toutes les options de conception standard. J'ai ajouté une ombre de boîte et ajusté les filtres dans cet exemple.

Chronologie Twitter intégrée suprême

La chronologie Twitter intégrée vous permet de spécifier un nom d'utilisateur Twitter pour intégrer les publications Twitter de cet utilisateur dans votre mise en page. Limitez le nombre de tweets, affichez l'en-tête, le pied de page, la bordure, la barre de défilement et supprimez la couleur d'arrière-plan. Il comprend des paramètres de conception standard. Il comprend également un thème clair et sombre.

Commentaires suprêmes sur Facebook

Commentaires Facebook intègre les commentaires d'une page Facebook et permet aux utilisateurs de commenter à l'aide de leurs comptes Facebook. Sélectionnez le nombre de commentaires à afficher, choisissez un schéma clair ou sombre et sélectionnez l'ordre des commentaires. Les utilisateurs peuvent aimer, répondre et suivre la personne sur Facebook. Il comprend des paramètres de conception standard.

Liste d'icônes suprême

La liste d'icônes suprême comprend des sous-modules où vous pouvez ajouter le contenu et sélectionner une icône pour chaque élément. Vous pouvez styliser le texte et les icônes indépendamment. Vous pouvez également ajouter des arrière-plans, notamment des couleurs, des dégradés, des images et des vidéos, derrière chaque élément.

Formes suprêmes

Supreme Shapes vous permet de choisir une forme dans la liste déroulante et de définir sa taille. Il a 17 formes différentes au choix.

Les options de conception vous permettent de modifier la couleur, d'utiliser une bordure et d'ajouter une ombre. Il comprend également des paramètres de conception standard. J'ai changé la couleur et ajouté une ombre dans l'exemple ci-dessus.

Acheter

Divi Supreme est disponible sur le Divi Marketplace pour 79 $. Le prix comprend l'utilisation illimitée du site Web et un an d'assistance et de mises à jour.

Mettre fin aux pensées

Divi Supreme Pro est un plugin intéressant pour Divi. Il ajoute une tonne de nouvelles fonctionnalités et modules mais reste facile à utiliser. Toutes les fonctionnalités sont utiles. Certains ajoutent des effets, tandis que d'autres ajoutent des fonctionnalités qui élargissent considérablement Divi. Si vous cherchez à étendre votre site ou votre boîte à outils Divi sans avoir besoin d'une tonne de plugins, Divi Supreme Pro vaut le détour.

Nous voulons de vos nouvelles. Avez-vous essayé Divi Supreme Pro ? Dites-nous ce que vous en pensez dans les commentaires.

Image en vedette via VectorKnight / shutterstock.com