Point culminant du plugin Divi : Générateur de modules Divi

Le Divi Builder comprend de nombreux modules pour vous aider à ajouter pratiquement tous les éléments de conception à vos mises en page, mais si vous vouliez créer vos propres modules ? Un plugin tiers appelé Divi Module Builder vous offre cette possibilité.

Dans cet article, je vais jeter un œil au plugin et voir ce qu'il peut faire et à quel point il est facile à utiliser. Il nécessite Divi 3.0.50 ou supérieur et fonctionne à la fois avec Divi et Extra. Il est disponible sur le site Web du développeur : DiviPlugins.com.

Installation de Divi Module Builder

Une fois que vous avez activé le plugin, cliquez sur Page d'activation DMB . Vous pouvez également voir cet écran en accédant à Modules personnalisés dans le tableau de bord et en cliquant sur Licence .

Saisissez votre clé de licence et cliquez sur Activer la licence . Un nouveau menu est ajouté au tableau de bord appelé Custom Modules . Dans ce menu, vous trouverez tout ce dont vous avez besoin pour construire vos modules.

Ajouter un module

Les modules sont créés dans le menu du tableau de bord sous Modules personnalisés , Ajouter un module . Il y a deux zones que vous utiliserez pour créer le module. La zone de gauche est l'endroit où vous allez créer les champs. La zone de droite est l'endroit où vous ajouterez le code que les champs utiliseront. Vous pouvez rendre le module standard ou pleine largeur. Vous pouvez enregistrer le brouillon ou publier lorsque vous êtes prêt. Une fois le module publié, il apparaîtra dans le Divi Builder.

Des champs

Votre module peut avoir autant de champs que vous le souhaitez. Chaque champ contient des propriétés de champ. Voici un examen plus approfondi de chacune des propriétés du champ :

Étiquette de champ – l'étiquette qui s'affichera comme titre du champ dans l'onglet de contenu du module.

Identificateur de champ – une valeur unique que vous utiliserez pour référencer le champ en HTML. Utilisez uniquement des lettres minuscules, des chiffres et des traits de soulignement pour les identificateurs de champ.

Description du champ – ajoutez votre propre description pour expliquer le but du champ. Cela s'affichera sous l'entrée dans l'onglet de contenu du module. Ce champ est facultatif mais je recommande d'ajouter des informations ou des exemples pour aider les utilisateurs.

Type de champ – détermine le type d'entrée que l'utilisateur voit. Choisissez plusieurs types de champs dans la liste déroulante, notamment un texte, une zone de texte, une couleur, une image, une bascule Oui/Non et une icône.

Onglet Conception – ajoute des contrôles de police pour ce champ dans la conception du module. Vous verrez cette option si vous sélectionnez du texte ou une zone de texte. Vous devrez identifier à quel élément appliquer les contrôles de police en ajoutant une classe dans le code HTML.

Masquer le champ – permet aux utilisateurs de contrôler la police d'un élément dans la sortie HTML sans leur permettre de contrôler le contenu de cet élément. Cette option ne sera disponible que si un type de champ de texte ou de zone de texte est sélectionné.

Ajoutez votre étiquette de champ, identifiant, description, choisissez le type de champ, activez l'onglet de conception ou sélectionnez pour masquer le champ. Réorganisez les champs en cliquant sur les flèches haut/bas de chaque champ. Chaque section et champ fournit une description et un exemple.

Code

Ajoutez du HTML, du PHP, du CSS et du JavaScript personnalisés pour contrôler la sortie. Les champs HTML peuvent accepter des requêtes personnalisées et PHP. Vous devrez activer PHP avant qu'il ne reconnaisse le code. Sinon, il imprimera le code à l'écran. Le HTML et le PHP utilisent tous deux des identifiants de champ pour référencer les champs.

Les raccourcis de code sont fournis sous forme de boutons sous les champs de code. Cela inclut les balises et les identifiants de champ. Ajoutez vos identifiants de champ, puis il est disponible en bas de la zone de code où vous pouvez cliquer pour les ajouter à votre code. Les identifiants HTML sont vus comme des boutons orange et PHP est vu comme vert. Vous pouvez utiliser plus que ce qui est disponible comme raccourcis, mais ceux-ci sont là pour aider à accélérer le temps de développement.

Création d'un module

Voici un exemple rapide de création d'un module. Le titre sera le nom qui apparaîtra sur le module dans le Divi Builder. J'ai ajouté l'étiquette du champ, la description, choisi Texte comme type de champ et créé un identifiant de champ.

J'ai enregistré en tant que brouillon afin que l'identifiant apparaisse dans les raccourcis HTML. Ensuite, j'ai sélectionné la balise H1 dans les raccourcis, placé mon curseur entre les balises et sélectionné l'étiquette dans les raccourcis HTML. Une fois que j'ai eu fini, j'ai appuyé sur publier. Le résultat devrait être un module avec un champ où les utilisateurs peuvent saisir du texte. La sortie affichera le texte comme en-tête 1.

Le module apparaît désormais dans le Divi Builder. Je peux ajouter à la page comme n'importe quel module Divi.

L'onglet Contenu comprend les champs que j'ai ajoutés avec mes étiquettes.

Le module affiche le texte que j'ai saisi dans le champ. Depuis que j'ai ajouté du HTML pour l'afficher en tant que H1, le texte a automatiquement une propriété H1. Je pourrais ajouter l'onglet Conception pour inclure plus de fonctionnalités de personnalisation. Cela nécessitera du code pour cibler correctement le champ.

Modules

Vous pouvez voir la liste des modules dans le menu du tableau de bord. Allez dans Modules personnalisés , Modules . Ici, vous pouvez modifier ou supprimer vos modules. Il montre si PHP est activé ou désactivé pour chaque module. Si vous souhaitez cloner un module, vous devrez les afficher dans Paramètres .

Paramètres de module personnalisés

Le menu Paramètres fournit un emplacement où vous pouvez gérer vos modules. Vous pouvez afficher à la fois les modules publiés et les brouillons.

Vous pouvez les cloner, ce qui vous donne un bon point de départ sur un module qui nécessite beaucoup de code que vous avez utilisé dans un autre module. Vous pouvez également modifier, désactiver ou activer PHP (ce qui est utile si vous êtes bloqué hors de l'éditeur en raison d'une erreur de code - je l'ai fait et j'ai utilisé cette fonctionnalité pour modifier le module), et importer et exporter vos modules.

Ajouter une dépendance

Ici, vous pouvez ajouter des dépendances CSS et Javascript tierces. Ajoutez-les en tant qu'URL externes ou internes. Choisissez CSS ou Javascript dans la liste déroulante, ajoutez le nom et ajoutez l'URL. Ils peuvent ensuite être utilisés sur n'importe quelle page. Il donne un exemple d'utilisation de Font Awesome. C'est un excellent moyen de créer une dépendance à un endroit, puis de l'utiliser n'importe où.

Exemple de générateur de module Divi – Grille de blog personnalisée

Plutôt que de créer un module 'ok' comme exemple, je montre l'exemple génial que le développeur a créé - Custom Blog Grid (disponible en téléchargement gratuit sur le site Web du développeur). Il comprend 3 champs, HTML, PHP et CSS. Voici un aperçu de chacun.

Module de grille de blog personnalisé

Le champ 1 est intitulé Catégories, utilise des catégories comme identificateur et le type de champ est défini sur Texte.

Le champ 2 est intitulé Effet d'image N&B. L'identifiant est filter et le type de champ est Yes/No Toggle. Le filtre est créé en CSS.

Le champ 3 est intitulé Post Title et utilise post_title comme identifiant. Le type de champ est défini sur Texte et l'onglet Conception est activé. Nous verrons les personnalisations de ce champ dans le module. Ce champ reçoit une classe H2 en HTML.

PHP est sélectionné afin qu'il puisse être utilisé dans la zone de code de sortie HTML.

CSS personnalisé est ajouté à la zone de sortie CSS.

Voici le Javascript. Vous devrez avoir une bonne compréhension de HTML, PHP, CSS et Javascript pour tirer le meilleur parti de ce plugin. En d'autres termes, il s'agit d'un plugin pour les développeurs.

Le module de grille de blog personnalisé dans le Divi Builder

Une fois le module publié vous le retrouverez dans le Divi Builder.

Les paramètres qui apparaissent dans le module et leurs étiquettes diffèrent selon les sélections que vous effectuez. Ce module vous permet d'ajouter des catégories, d'activer l'effet noir et blanc et d'ajouter un titre de publication dans l'onglet Contenu. Il inclut également les paramètres d'arrière-plan (qui sont par défaut pour les modules).

L'onglet Conception est activé pour ce module. Il comprend des paramètres pour le texte, le texte du titre de l'article, la bordure, l'espacement et l'animation.

Résultats de la grille de blog personnalisée

Le résultat est une grille de blog avec une animation de survol. J'ai activé le mode noir et blanc pour que les images s'affichent en noir et blanc à moins que je les survole. Je préfère cette forme de survol - pour révéler l'image en survol plutôt que de l'obscurcir.

Dans celui-ci, j'ai désactivé le mode noir et blanc, modifié la police du titre et ajouté un dégradé d'arrière-plan. Plus d'ajustements peuvent être ajoutés dans le code pour changer le bouton, ajouter des superpositions, etc. Si vous pouvez le coder, vous pouvez le faire faire pratiquement tout ce que vous pouvez imaginer.

Licence et documentation

Vous avez le choix entre trois licences : unique, illimitée et à vie. La licence illimitée couvre un nombre illimité de sites Web et comprend 1 an de mises à jour et de support. La licence Sites illimités à vie inclut les mises à jour et l'assistance à vie.

La documentation est fournie sur le site Web du développeur. Un exemple de code est inclus avec des instructions étape par étape.

Dernières pensées

Divi Module Builder est un plugin puissant avec beaucoup de potentiel entre de bonnes mains. Comme cela nécessite une bonne connaissance du code, ce n'est pas pour tout le monde. Cela donne aux développeurs un excellent outil pour créer et partager des modules. J'aime que vous puissiez importer et exporter d'un site à un autre. Chaque site qui utilise le module aura besoin du plugin installé. Si vous avez une bonne connaissance du code et que vous souhaitez créer vos propres modules Divi, Divi Module Builder vaut le détour.

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

Image en vedette via aliaksei kruhlenia / shutterstock.com