Point culminant du plugin Divi : Divi Toolbox

Divi Toolbox est un plugin tiers qui ajoute de nombreux nouveaux effets à Divi qui nécessiteraient normalement CSS, JavaScript, PHP ou de nombreux plugins individuels. Les effets sont faciles à utiliser et à personnaliser et donnent à votre site Web Divi un éclat supplémentaire pour se démarquer de la foule.

Les effets incluent des modifications à l'échelle du site, de nouveaux menus mobiles, des arrière-plans de particules, des pieds de page, des widgets, un style, des animations, des en-têtes, une navigation, de nouvelles mises en page de blog, des mises en page Divi dans de nouveaux emplacements, une personnalisation de l'écran de connexion, des fenêtres contextuelles et bien plus encore. De nombreuses fonctionnalités peuvent être stylisées avec de nouveaux ajouts au personnalisateur de thème. Divi Toolbox ne fonctionne pas avec Extra ou le plugin Divi Builder.

Paramètres généraux de la boîte à outils Divi

L'écran d'options Divi Toolbox est ajouté au menu du tableau de bord Divi. Les paramètres sont activés ici, mais les ajustements sont effectués dans le personnalisateur.

Les paramètres généraux incluent le style des en-têtes globaux, personnaliser la page de connexion, masquer les projets, autoriser les téléchargements de type de fichier SVG, la barre de défilement du navigateur personnalisé, les paramètres de la page 404 (choisir une mise en page et masquer l'en-tête et le pied de page) et les paramètres des icônes sociales (activer le style, ouvrir dans un nouvel onglet et ajouter plus d'icônes).

L'ajout de plus d'icônes sociales ouvre un champ dans lequel vous pouvez entrer l'URL de 9 autres réseaux sociaux.

Voici l'onglet Général dans le personnalisateur, où je peux ajuster les paramètres que j'ai activés. Les paramètres incluent les en-têtes et les polices, la barre de défilement du navigateur et l'écran de connexion. Dans cet exemple, j'ai apporté quelques ajustements à h1 et au corps du texte et ajouté un style à la barre de défilement. J'ai également ajouté plus d'icônes sociales.

Pour l'écran de connexion, vous devrez apporter vos modifications, puis vous déconnecter ou afficher l'écran dans un autre navigateur.

Voici mon écran de connexion après avoir ajouté une image d'arrière-plan, un logo et modifié la taille et les couleurs des champs et du texte. Cela prend un peu de réglage car vous ne pouvez pas voir l'écran lorsque vous effectuez vos modifications.

Paramètres d'en-tête de la boîte à outils Divi

Les paramètres d'en- tête ajoutent du style au menu, activent un menu déroulant personnalisé, ajoutent un bouton de menu CTA, modifient le logo sur le menu fixe, permettent le chevauchement de logo et ajoutent une mise en page Divi avant la navigation sur la page d'accueil, et une mise en page avant et après navigation sur d'autres pages.

Le bouton de menu CTA vous permet d'appliquer le CTA au premier ou au dernier élément de menu, ou d'appliquer une classe personnalisée. Il fournit le CSS et des instructions sur l'endroit où l'ajouter.

Voici le personnalisateur pour l'en-tête. J'ai ajouté une mise en page au-dessus du menu (dans cet exemple, il ne s'agit que d'un module de texte, mais vous pouvez ajouter une mise en page complète si vous le souhaitez). Le logo superposé a une boîte carrée avec des effets d'ombre. J'ai changé la taille du logo de 200 à 140 et déplacé les icônes sociales vers le menu principal. Je survole l'élément de menu Services pour que vous puissiez voir l'effet CSS.

Paramètres du pied de page de la boîte à outils Divi

Les paramètres de pied de page incluent un pied de page collant, une révélation du pied de page, la personnalisation des menus et des widgets, la personnalisation du bouton Retour en haut (qui ajoute une option de lien de bouton personnalisé) et l'ajout de dispositions avant et après le pied de page.

Dans cet exemple, j'ai changé les polices d'en-tête et de menu en majuscules et augmenté l'espacement. J'ai également ajusté les couleurs de survol et ajouté une icône à côté du texte en survol. J'ai ajouté une mise en page après la mise en page du pied de page. Celui-ci utilise un pied de page révélé (c'est pourquoi le texte est derrière le module de texte au-dessus).

J'ai stylisé le bouton de retour en haut pour qu'il affiche du texte. Il a un effet d'ombre et j'ai ajusté son emplacement. J'ai laissé les couleurs par défaut. J'ai centré le texte du bas et les icônes sociales. Pour l'effet de survol, j'ai choisi Grow (il comprend également le rétrécissement, le déplacement vers le haut, le déplacement vers le bas, l'oscillation, le rythme cardiaque, le jello et le pouls). Je survole l'icône Facebook pour que vous puissiez voir l'effet.

Paramètres mobiles de la boîte à outils Divi

Les paramètres mobiles incluent un champ pour saisir le point d'arrêt du menu mobile (la largeur exacte de l'écran lorsque le menu passe du bureau au mobile), des styles personnalisés, modifier le logo, choisir l'effet de clic sur l'icône hamburger, réduire le sous-menu imbriqué et activer plusieurs classes CSS. Les classes CSS vous permettent d'inverser les colonnes et de centrer le texte, les modules et les boutons.

Voici un aperçu de la page dans Google Chrome avec Responsive sélectionné. Dès que j'ai pris la taille de l'écran inférieure à 980 pixels, il est passé à l'icône mobile que j'ai sélectionnée et j'ai ajouté le menu hamburger avec l'animation que j'ai choisie.

Dans cet écran, je stylise la couleur d'arrière-plan du menu mobile, la couleur d'arrière-plan du survol et le menu hamburger. J'ai changé le texte des éléments du menu principal en majuscules et j'ai laissé la norme de texte CTA. J'ai également modifié l'arrière-plan de l'élément de menu CTA. Vous pouvez également ajuster le menu et la taille des icônes.

Paramètres du blog de la boîte à outils Divi

Les paramètres du blog vous permettent de personnaliser la barre latérale et les widgets, la méta de la publication, les pages d'archives et de catégories, de choisir une mise en page (parmi 6 options), de masquer la barre latérale des archives et de personnaliser le texte du bouton Lire la suite.

Pour les publications individuelles, vous pouvez choisir la disposition de la barre latérale, masquer le titre de la publication, ajouter une zone d'auteur, ajouter des liens précédents et suivants, ajouter des publications connexes et personnaliser le formulaire de commentaires. Vous pouvez également ajouter des mises en page personnalisées après la navigation vers des publications uniques, des archives, des catégories, des pages d'auteur et des pages de résultats de recherche.

Pour la page de blog, j'ai ajouté un effet d'ombre à la barre latérale, modifié les polices et leur style, stylisé le champ de recherche et augmenté la taille de la bordure. Il utilise une mise en page alternée et j'ai personnalisé le texte du bouton Lire la suite.

Cet exemple est la mise en page 6. J'ai à nouveau personnalisé les couleurs de la police méta et ajouté une couleur de survol. J'ai également personnalisé l'arrière-plan du bouton Lire la suite.

Les articles de blog individuels vous permettent de personnaliser chacun des éléments que vous avez ajoutés dans les paramètres du blog. Dans cet écran, je personnalise les publications associées, les liens suivants et précédents et la zone auteur. Vous avez le contrôle sur tout le texte, les couleurs, les ombres, etc.

Dans cet exemple, je personnalise le formulaire de commentaires. Vous contrôlez les couleurs du champ (focus et non focus), la bordure, le texte, les couleurs, le bouton, etc. J'ai modifié la couleur d'arrière-plan du bouton, la couleur de mise au point du champ, ajouté une bordure au champ et modifié le rayon.

Paramètres des modules de la boîte à outils Divi

L'onglet Modules fournit des paramètres pour ajouter un effet de survol de suivi de la souris, ajouter un opt-in de messagerie mince (il fournit CSS pour trois options différentes), des boutons secondaires (qui ajoute une nouvelle couche de personnalisation) et de nombreux réglages.

Les réglages incluent une icône triangulaire animée pour les modules accordéon et bascule, la suppression de la bordure inférieure horizontale et le remplissage des tableaux de prix, le déplacement de l'image portrait sous le contenu des témoignages, le masquage des barres de défilement horizontales et l'ajout de CSS pour aligner verticalement les colonnes et modifier la hauteur de tout élément à 100 % de la hauteur de sa fenêtre.

Voici un aperçu de l'option d'inscription par e-mail mince. Il place tous les champs sur une seule ligne. Cet exemple utilise également le bouton secondaire. Seuls les boutons auxquels j'ai ajouté la classe CSS recevront ces modifications. L'utilisation de la classe CSS signifie que j'ai maintenant deux styles de boutons globaux.

Paramètres des extras de la boîte à outils Divi

L'onglet Extras comprend des préchargeurs, des fenêtres contextuelles, un arrière-plan de particules, un effet d'inclinaison 3D et un défilement de parallaxe pour les modules.

Vous avez le choix entre 12 préchargeurs. Vous pouvez les faire apparaître uniquement sur la page d'accueil si vous le souhaitez, et sélectionner leur type et leur vitesse de transition. L'écran de sélection affiche les animations des préchargeurs. Vous pouvez les personnaliser davantage dans le personnalisateur de thème.

Déclenchez les fenêtres contextuelles avec n'importe quel lien à partir d'un élément de menu, d'un bouton, d'un lien dans le texte, etc. Créez-en autant que vous le souhaitez. Choisissez n'importe quelle mise en page prédéfinie pour la fenêtre contextuelle. Personnalisez l'arrière-plan et le bouton de fermeture dans le personnalisateur.

Ce sont des particules en mouvement. Vous avez un contrôle total sur la couleur, la forme, le nombre de particules, la vitesse, la taille, la taille des lignes, l'opacité et l'interactivité. Il existe deux identifiants CSS pour les particules, ce qui vous permet d'avoir deux conceptions différentes.

Voici un aperçu de la fonction d'inclinaison. Vous pouvez régler l'inclinaison, la perspective, l'échelle, la vitesse et l'éblouissement. Ajoutez-le à n'importe quelle section, ligne ou module.

Licence de la boîte à outils Divi

Vous avez le choix entre deux licences :

• Licence régulière (pour une utilisation sur un projet) – 49,00 €
• Licence étendue (pour une utilisation sur des projets illimités) – 169,00 €

Mettre fin aux pensées

Je suis impressionné par la quantité de fonctionnalités et de paramètres de ce plugin. J'aime particulièrement qu'il ajoute des articles connexes, des liens précédents et suivants et une zone d'auteur aux articles de blog qui ne sont pas créés avec le constructeur Divi. La barre de défilement est également une touche agréable.

Il existe quelques paramètres auxquels vous pouvez accéder dans les modules Divi, tels que le texte d'en-tête, mais cela fournit plus de détails pour ces paramètres. J'aimerais voir quelques ajustements supplémentaires ajoutés (par exemple, des effets d'ombre pour la zone de commentaires, plus d'options de logo, des emplacements d'icônes de médias sociaux, etc.).

Si vous souhaitez ajouter une tonne de nouveaux effets à Divi de la manière la plus simple possible, Divi Toolbox vaut le détour.

Nous voulons de vos nouvelles. Avez-vous essayé Divi Toolbox ? Faites-nous part de votre expérience dans les commentaires ci-dessous.

Image en vedette via vasabii / shutterstock.com