Construisez vos propres modules avec des groupes de modules Divi 5

Voulez-vous créer des modules de divi personnalisés sans toucher une ligne de code? Avec les nouveaux groupes de modules de Divi 5, vous pouvez désormais combiner plusieurs éléments en une seule disposition réutilisable - le tout de l'intérieur du constructeur visuel. Pas de javascript. Pas de php. Il suffit de glisser, de tomber et de concevoir.

Dans ce guide rapide, nous vous montrerons comment créer vos propres modules à l'aide de nouveaux groupes de Divi. Vous verrez spécifiquement comment construire à partir de zéro un texte de présentation, une table de prix, un témoignage ou tout autre type de module que vous pouvez imaginer.

Remarque: Divi 5 est prêt à être utilisé sur de nouveaux sites Web, mais nous ne recommandons pas encore de convertir les sites existants en Divi 5. Vous verrez quelque chose de notre part lorsque nous serons confiants dans le processus de mise à jour.

Quels sont les nouveaux groupes de modules de Divi?

Les groupes, ou groupes de modules, sont un nouvel élément de conteneur qui associe plusieurs modules et / ou lignes en une seule unité dans une colonne. Cela a l'avantage de regrouper plusieurs éléments plus petits et de vous permettre de déplacer l'ensemble du groupe partout où vous en avez besoin sur la page.

Les groupes de modules peuvent être déplacés sur votre page sans problème et deviendront particulièrement utiles lorsque Flexbox et la fonctionnalité Loop Builder sont publiés. Une fois le constructeur de boucle publié, vous pourrez utiliser des groupes pour créer des dispositions de blog personnalisées, des menus de pied de page, des galeries d'images, etc. Donc, c'est utile maintenant, mais dans quelques mois, ce sera encore plus impressionnant à utiliser.

Les lignes imbriquées étaient une autre fonctionnalité Divi hautement demandée que nous avons ajoutée à Divi 5. Ils vous permettent de mettre des lignes à l'intérieur des lignes au contenu de votre cœur. Bien que le nom des «groupes de modules» puisse donner l'impression que vous ne pouvez que grouper les modules, l'inverse est vrai. En fait, vous pouvez utiliser des lignes imbriquées à l'intérieur de groupes, ce qui ouvre la possibilité de construire des structures de mise en page infiniment imbriquées et de les faire faire partie d'un groupe réutilisable.

Comment créer vos propres modules Divi

Les groupes de modules vous permettent de créer vos propres modules à l'intérieur de l'éditeur. Vous pouvez regrouper les modules et les lignes imbriquées pour créer des arrangements complexes qui ressemblent à certains de nos modules plus grands.

1. Créez votre propre module de texte

Notre module de texte de présentation intégré

Le module de texte de présentation est un aliment de base dans de nombreuses conceptions de divi. C'est un module incontournable, mais lorsque vous le décomposez, il n'a que quelques choses qui le font cliquer. Ce sont:

Une image / icône, un titre / titre et un contenu corporel. Nous pouvons créer un groupe de modules et placer ces modules à l'intérieur: une image ou une icône, un titre et un module de texte. Ensemble, ces trois modules peuvent reproduire le même contenu utilisable dans le module de texte de présentation.

Anatomie d'un module de texte

Création de votre propre groupe de modules de texte

Voici un exemple de module de texte de présentation avec une icône sur le côté gauche et une réplication visuellement identique du module de texte de présentation à l'aide de A:

Groupe, ligne intérieure, colonne (1) avec un module d'icône et colonne (2) avec un module de cap et de texte.

La radiographie est activée pour voir le squelette de chacun pour voir leurs similitudes, même si elles sont construites différemment.

La seule chose spéciale avec cet arrangement est que la première colonne est définie sur une largeur de 18%, et la seconde occupe une largeur de 82% (les options de dimensionnement des colonnes sont nouvelles avec la mise à jour des fonctionnalités des lignes imbriquées).

La construction de vos modules comme celle-ci a l'avantage supplémentaire de vous donner plus d'options de style de conception pour chaque élément individuel. Le module de texte de présentation facilite le placement de l'image / icône, mais a ses compromis. Utilisez l'approche qui vous rapproche le plus de la conception souhaitée.

2. Créez votre propre module de tables de prix

Notre module de table de tarification intégré

Certains modules Divi ont beaucoup plus de choses. C'est le cas avec le module de table de tarification. Il y a plusieurs champs par table de tarification comme vous pouvez le voir ci-dessous.

Anatomie d'un module de table de tarification

Création de votre propre groupe de modules de table de prix

Si nous recréons le module de table de tarification à l'aide de groupes de modules et de modules individuels, nous obtiendrons ce résultat.

Remarquez les sept champs de texte / option séparés par table. Visuellement, chaque table a trois pièces principales (cap, prix et détails). Il y a quelques façons de le faire à l'intérieur d'un groupe, mais ci-dessous, nous avons utilisé trois lignes imbriquées pour chacune. De là, nous avons utilisé des modules de cap et de texte à l'intérieur de chaque section pour recréer la table de tarification.

La bonne chose à propos de l'utilisation du module de table de tarification est qu'elle gère la majeure partie de la disposition et que vous obtenez une longueur d'avance. Mais parfois, cela signifie qu'il est plus difficile de travailler lorsque vous voulez que des choses spécifiques soient faites avec. Faire un travail supplémentaire pour créer cette disposition de table de prix avec des modules plus simples nous donne plus de contrôle et de liberté de conception.

3. Créez votre propre module de témoignage

Notre module de témoignage intégré

Les modules de témoignage de Divi en sont un autre qui a beaucoup de choses. Il comprend jusqu'à quatre éléments de texte différents et une paire d'options d'image / icône.

Création de votre propre groupe de modules de témoignage

L'aspect le plus long de la recréation du module de témoignage consiste à obtenir le bon espacement (en particulier à plusieurs points d'arrêt). Mais une fois que vous avez obtenu cela, les choses sont assez simples. Tout au long de la disposition du groupe, nous avons utilisé quelques lignes et l'icône, l'image, le titre et les modules de texte.

La bonne chose à propos de recréer certains de ces modules est que vous vous ouvrez à plus de possibilités. Certains modules plus compliqués ont une disposition d'opinion que seuls les CSS étendus peuvent manipuler. Mais lorsque vous le construisez vous-même, vous avez plus de liberté pour vous déplacer dans bon nombre de ces sous-éléments.

Lors de la conception comme celle-ci, plus de possibilités de mise en page s'ouvrent. Par exemple, vous pouvez faire ce qui n'est pas possible (du moins ce qui n'est pas facile) avec le module de témoignage en déplaçant les éléments vers des positions complètement différentes dans la disposition du groupe plus grande. Si votre conception exige une certaine flexibilité, la construction de certaines de ces fragmentaires peut vous aider à atteindre la précision que vous recherchez.

J'aime aussi l'idée que vous puissiez créer un module de témoignage personnalisé, comme celui ci-dessus, et utiliser le prochain constructeur de boucle pour tirer des témoignages d'un CPT. Cela vous donnera la liberté + la possibilité de construire plus rapidement avec des données et du contenu structurés.

Enregistrez votre module personnalisé en tant qu'élément global

Lorsque votre nouveau module est correct, enregistrez-le comme un élément global pour une utilisation ailleurs sur votre site. Ouvrez le menu des paramètres du groupe. Cliquez sur l'option « Enregistrer dans la bibliothèque ».

Un modal apparaîtra où vous pourrez nommer votre module pour une utilisation facile plus tard. Basculez « Enregistrer en tant que global » pour le stocker dans la bibliothèque Divi. Toute modification que vous apportez ultérieurement met à jour chaque copie sur votre site.

Votre élément mondial aura désormais une couleur verte distincte pour vous aider à remarquer qu'elle est mondiale.

Vous pouvez accéder à tous vos éléments globaux enregistrés et autres éléments de la bibliothèque dans le tableau de bord> Divi> Divi Library . L'édition d'un élément global ici le mettra à jour sur le site. Vous pouvez également modifier des éléments mondiaux directement sur les pages sur lesquelles ils sont utilisés (et il mettra à jour à l'échelle du site).

Besoin du module sur chaque site que vous construisez? Bascule « Enregistrer dans Divi Cloud ». Le module est maintenant dans votre bibliothèque de cloud, prêt pour tout projet n'importe où. Les éléments de la bibliothèque gardent les choses sur un site, tandis que Divi Cloud voyage avec vous d'un site à l'autre. Utilisez les deux pour accélérer les constructions et inaugurer une plus grande cohérence.

Obtenez Divi Cloud

Construire quelque chose de nouveau aujourd'hui

Les groupes de modules mettent une nouvelle puissance entre vos mains. Vous pouvez façonner les dispositions d'origine et ce dont vous avez besoin. Commencez par recréer un module de texte de présentation et voyez comment le processus s'intègre. Au fur et à mesure que vous vous habituez à utiliser Divi de cette façon, vous vous remarquerez créer des conceptions encore plus complexes car vous pouvez utiliser les modules standard ou créer le vôtre.

Une grande partie de ce qui était couvert ci-dessus était possible avec Divi avant la chute des groupes, mais ils facilitent les choses. Surtout lorsque nous lançons Flex et le constructeur de boucle, les groupes deviendront un aliment de base de votre conception avec Divi.

Prêt à monter à niveau? Prenez un nouveau site et testez votre premier module personnalisé dès aujourd'hui.