Comment insérer des modules ou des lignes Divi dans d'autres modules Divi (sans plugin)
Publié: 2020-12-31Si vous êtes un utilisateur Divi depuis un certain temps, l'idée d'insérer un Module Divi (ou Row) à l'intérieur d'un autre Module peut vous avoir traversé l'esprit. Dans la plupart des cas, si vous savez bien utiliser Divi, ce genre de chose n'est pas vraiment nécessaire. Les modules Divi sont déjà des éléments puissants dotés de fonctionnalités et de paramètres de conception intégrés. Mais, parfois, il serait bien d'améliorer ces fonctionnalités en concevant deux modules à l'aide de Divi, puis en les insérant l'un dans l'autre. Un bon exemple de ceci serait l'insertion d'un module (comme un formulaire de contact) dans un module à bascule afin que le formulaire s'affiche lorsque vous cliquez sur la bascule.
Dans ce tutoriel, nous allons partager comment insérer des modules ou des lignes Divi dans un autre module Divi. Pour ce faire, il faut ajouter quelques petits extraits de JQuery. Une fois le code en place, nous pouvons utiliser le Divi Builder pour ajouter les classes CSS appropriées pour cibler les éléments que nous voulons insérer/déplacer et le module dans lequel nous voulons les mettre.
Commençons!
Aperçu
Voici un aperçu des exemples que nous allons construire dans ce tutoriel.
Un formulaire de contact dans un module à bascule
Un module à bascule et un module de boutons à l'intérieur d'un module Blurb (colonne de droite)
Une ligne Divi à l'intérieur d'un module à bascule
Téléchargez la mise en page GRATUITEMENT
Pour mettre la main sur la mise en page de ce tutoriel, vous devrez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.
Télécharger gratuitement
Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.
Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !
Abonnez-vous à notre chaîne Youtube
Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.
Cliquez sur le bouton Importer.
Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.
Cliquez ensuite sur le bouton importer.
Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous devrez effectuer les opérations suivantes :
- Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
- Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
- Choisissez l'option « Construire à partir de zéro ».
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Choses à garder à l'esprit
Pour ce tutoriel, le processus de stylisation de tous les modules que vous souhaitez utiliser dans ce processus peut toujours être effectué visuellement à l'aide des paramètres intégrés de Divi Builder, nous vous laisserons donc cette partie. Nous allons nous concentrer davantage sur la façon d'appliquer les bonnes classes CSS et HTML à chaque élément Divi afin d'insérer le(s) module(s)/ligne(s) à l'intérieur d'un autre module.
Gardez à l'esprit que nous ne pourrons voir le résultat final que sur une page en direct, et non lors de l'édition à partir du Divi Builder visuel. En d'autres termes, nous pouvons concevoir les modules avec Divi mais ils resteront séparés dans le constructeur jusqu'à ce que vous visualisiez la version en direct de la page.
Vous ne pouvez insérer des modules ou des lignes à l'intérieur d'un module qui a la possibilité d'ajouter du texte/html.
De plus, comme nous l'expliquerons plus tard, il existe certaines limites au nombre d'instances (modules ou lignes insérés dans un autre module) que vous pouvez avoir dans une colonne ou une section. Lorsque vous insérez des modules dans un autre module, vous êtes limité à un module « destination » (le module qui contiendra le(s) module(s) que vous souhaitez insérer) par colonne. Et, lors de l'insertion de lignes dans un autre module, vous êtes limité à un module « destination » par section. Bien qu'il s'agisse d'une limitation dans un sens, cela vous donne la possibilité d'avoir plusieurs instances sur votre page en cas de besoin.
Partie 1 : Comment insérer des modules Divi dans un autre module
Pour la première partie de ce tutoriel, nous allons vous montrer comment insérer des modules Divi dans un autre module. Tout d'abord, nous allons vous montrer comment ajouter un module de contact à l'intérieur d'un module de basculement. Ensuite, nous vous montrerons comment ajouter un module Toggle et un module Button à l'intérieur d'un module Blurb.
Exemple 1 : Insertion d'un module de formulaire de contact à l'intérieur d'un module de basculement
Ajouter une nouvelle ligne
Pour commencer, ajoutez une nouvelle ligne à une colonne à la section.
Ajouter un module de bascule (le module de destination)
À l'intérieur de la colonne, ajoutez un module à bascule.
Pour cet exemple, nous voulons insérer un module à l'intérieur de ce module de basculement que nous pouvons appeler notre module de destination. Techniquement, la destination réelle sera à l'intérieur du contenu du corps du module Toggle (où vous pouvez ajouter du texte/HTML). Pour désigner l'emplacement de destination, nous devons insérer un nouveau div avec une classe CSS nécessaire qui servira d'emplacement cible pour notre module portable (le module que nous voulons insérer).
Sous l'onglet contenu des paramètres de bascule, ajoutez le code HTML suivant au corps. Assurez-vous de cliquer sur l'onglet Texte avant d'insérer du code HTML.
<div class="divi-module-destination"></div>
Ajouter le module de formulaire de contact (le module portable)
Ensuite, nous devons ajouter le module que nous voulons insérer dans le module Toggle. Dans cet exemple, nous allons insérer un module de formulaire de contrat dans le corps du module de basculement. Il est important d'ajouter le nouveau module « portable » dans la même colonne que le module de destination.
Pour ce faire, ajoutez un nouveau module de formulaire de contact directement sous le module bascule.
Cliquez sur l'onglet Avancé sous les paramètres du formulaire de contact (de tout module que vous souhaitez insérer) et ajoutez la classe CSS suivante :
- Classe CSS : module-divi-portable
Ajouter une classe de colonne
Ensuite, nous devons ajouter une classe personnalisée à la colonne qui contient les deux modules. Ouvrez les paramètres de colonne et ajoutez la classe CSS suivante :
- Classe CSS : colonne-parent
Ajouter le code
Le code nécessaire pour que cela fonctionne est assez court et simple. Fondamentalement, nous voulons utiliser JQuery pour trouver chaque module avec la classe "divi-portable-module" avec la colonne parent (celle avec la classe "parent-column") et ajouter chacun de ces modules à l'intérieur du div avec la classe " divi-module-destination ».
Le code comprend également un extrait pour insérer un module de boutons dans un autre module et un extrait pour insérer des lignes Divi dans un module.
Pour ajouter le code, ajoutez un nouveau module de code sous le module de formulaire de contact.
Avant de coller le code nécessaire, ajoutez les balises de script nécessaires à l'intégration de JS dans HTML dans la zone Code :
Collez ensuite le code suivant entre les balises de script :
(function ($) {
$(document).ready(function () {
// Option #1: Move Divi Module(s) into a Module
// Limit: One Instance per Column
// Use following code if you want to move
// a module inside another module. Each column with the
// class 'parent-column' will append any module(s)
// with the class 'divi-portable-module' to the div
// with the class 'divi-module-destination'.
// Only one instance of 'divi-module-destination' should
// be added per column.
$('.divi-portable-module').each(function () {
$(this).closest('.parent-column').find('.divi-module-destination').append($(this));
});
// Buttons: Insert Button Module(s) into a Module
// Adding a custom CSS class to a button module
// is applied to the 'a' tag which is a child element
// of the module wrapper. This code makes sure to append
// the entire button module wrapper (the parent element)
// as well. This functionality is the same as option #3 above.
// Siimply use the class 'divi-portable-button' on a button module
// instead of 'divi-portable-module'.
$('.divi-portable-button').parent().each(function () {
$(this).closest('.parent-column').find('.divi-module-destination').append($(this));
});
// Option #2: Move Divi Row(s) into a Module
// Limit: One Instance per Section
// Use the following code if you want to move
// a row inside a module on more than one section
// of a page. Each section with the
// class 'parent-section' will append any row(s)
// with the class 'divi-portable-row' to the div
// with the class 'divi-row-destination'.
// Only one instance of 'divi-row-destination' should
// be added per section.
$('.divi-portable-row').each(function () {
$(this).closest('.parent-section').find('.divi-row-destination').append($(this));
});
});
})(jQuery);
Comprendre la fonctionnalité
À l'intérieur du Divi Builder sur le backend, les modules resteront séparés. Cependant, si vous affichez les résultats sur la page en direct sur le frontend, vous verrez que le formulaire de contact a été inséré dans le module Toggle.
Si vous inspectez le code sur la page en direct, vous pouvez voir que le module de formulaire de contact a été inséré avec succès dans le div avec la classe "divi-module-destination".
Styliser les modules
Comme nous l'avons mentionné précédemment, les modules resteront séparés sur le backend Divi Builder. Cependant, les styles que vous ajoutez à chacun s'appliqueront toujours. N'hésitez donc pas à ajouter une mise à jour des styles à la fois du module de destination et du module portable à l'aide du Divi Builder.
REMARQUE : Dans certains cas, les styles du module de destination (maintenant un module parent) peuvent être appliqués au module inséré. Si tel est le cas, vous devriez pouvoir remplacer ce style en mettant à jour les paramètres du module inséré.
Le résultat
Voici le résultat final lors de la visualisation de la page en direct.
Exemple 2 : Insertion d'un module Toggle à l'intérieur d'un module Blurb
Pour notre prochain exemple, nous allons insérer un module Toggle à l'intérieur d'un module Blurb. Le processus est le même que précédemment. L'extrait de code limite l'utilisation d'un module de destination par colonne. En d'autres termes, vous pouvez avoir plusieurs modules portables avec la classe "divi-portable-module" qui peuvent être ajoutés au module de destination, mais vous ne pouvez avoir qu'une seule instance du div avec la classe "divi-module-destination" par colonne.
Pour le démontrer, répétons le même processus avec un autre groupe de modules dans une autre colonne de la même ligne.
Ajouter une nouvelle colonne à la ligne
Tout d'abord, ajoutez une nouvelle colonne à la ligne existante.
Ajouter une classe de colonne
Donnez à la nouvelle colonne la classe CSS suivante comme nous l'avons fait dans la première colonne :
- Classe CSS : colonne-parent
Ajouter un module Blurb (le module de destination)
À l'intérieur de la nouvelle colonne, ajoutez un module de présentation qui servira de module de destination.
Dans le corps du texte de présentation, collez le code HTML suivant qui inclut le même div avec la classe "divi-module-destination" où vous souhaitez insérer le(s) module(s) portable(s) (dans ce cas sous le corps de texte fictif) :
<div class="divi-module-destination"></div>
Ajouter un module à bascule (module portable)
Puisque nous voulons ajouter un module à bascule au texte de présentation, créez un nouveau module à bascule dans la même colonne que le texte de présentation.
Ajoutez ensuite la classe CSS suivante au module Toggle pour le désigner comme le module que nous voulons déplacer/insérer dans le texte de présentation :
- Classe CSS : module-divi-portable
Résultat
Vérifiez maintenant la page en direct pour voir le résultat. La bascule résidera désormais dans le module de présentation.
Exemple 3 : Insertion d'un module Button à l'intérieur d'un module Blurb
Pour cet exemple suivant, nous allons insérer un module de bouton dans le même module de présentation de notre exemple précédent. Normalement, pour tout autre module, nous répéterions le même processus pour ajouter un nouveau module portable au texte de présentation. Mais, parce que le module de bouton est construit un peu différemment sur le backend, nous devons ajouter une classe différente au module de bouton.
Ajouter un module de boutons (Module portable #2)
Pour ce faire, ajoutez un nouveau module de bouton sous le module à bascule déjà inséré dans le texte de présentation.
Ensuite, ajoutez la classe CSS suivante au module de bouton :
- Classe CSS : bouton-divi-portable
Le résultat
Vérifiez maintenant le résultat sur la page en direct. Le module Blurb contient maintenant le module bascule et le module bouton.
Et voici l'extrait de code correspondant utilisé pour insérer le module de bouton à l'intérieur du module avec la div "destination". La principale différence avec cet extrait de code est que nous ciblons l'élément parent (le bouton wrapper div dans les coulisses) de la classe de bouton "divi-portable-button".
Partie 2 : Comment insérer des lignes Divi dans un module
Si vous souhaitez insérer une ligne entière (ou des lignes) à l'intérieur d'un module, le processus est très similaire à l'insertion d'un module dans un autre module. Nous devons ajouter la classe "parent-section" à la section contenant le module de destination et les lignes portables que nous voulons insérer. Nous devons ajouter le div avec la classe "divi-row-destination" au module de destination. Et nous devons ajouter la classe "divi-portable-row" à la ou aux lignes que nous voulons insérer dans le module de destination.
Voici comment procéder.
Ajouter une section
Tout d'abord, ajoutez une nouvelle section régulière à la page.
Sous l'onglet avancé des paramètres de la section, ajoutez la classe CSS suivante :
- Classe CSS : section parent
Ajouter une ligne pour le module de destination
Ajoutez une nouvelle ligne à une colonne pour contenir le module de destination.
Ajouter un module de bascule (le module de destination de ligne)
Pour cet exemple, nous allons insérer une ligne à l'intérieur d'un module Toggle. Par conséquent, ajoutez un nouveau module de basculement à la ligne.
Étant donné que le module Toggle est notre module de destination, ouvrez les paramètres de la bascule et ajoutez le code HTML suivant au contenu du corps :
<div class="divi-row-destination"></div>
Créer une rangée portable
Maintenant que le module de destination est en place, ajoutez une nouvelle ligne sous la ligne précédente. Cela servira de ligne portable que nous insérerons dans le module de basculement.
Remplir la ligne avec du contenu
À ce stade, vous pouvez remplir la ligne avec tout contenu/module que vous souhaitez à l'aide de Divi Builder. Gardez à l'esprit que tout ce qui se trouve dans la ligne finira par être inséré dans le module à bascule puisqu'il réside à l'intérieur de la ligne.
Ajouter une classe à la ligne
Ensuite, ouvrez les paramètres de la ligne et désignez-la comme une ligne que vous souhaitez insérer dans le module Toggle en lui donnant la classe CSS suivante :
- Classe CSS : divi-portable-row
Comment ça fonctionne
Pour rappel, la ligne restera séparée du module lors de l'édition de la mise en page à l'aide du Divi Builder sur le backend. Mais la fonctionnalité est en place pour insérer la ligne à l'intérieur du module Toggle.
Le résultat
Pour voir le résultat, consultez la page en direct et ouvrez le module à bascule. Il contient maintenant la ligne entière.
Et voici l'extrait de code correspondant qui rend cela possible. Notez les classes correspondantes utilisées.
Insertion de plusieurs lignes à l'intérieur du module
Tant que vous gardez une instance du module de destination (c'est-à-dire le div avec la classe "divi-row-destination") par section, vous pouvez insérer plusieurs lignes vers cette destination simplement en lui donnant la même classe "divi-portable-row ”.
Par exemple, vous pouvez ajouter une autre ligne avec un module de galerie au-dessus de la ligne avec les éléments de menu précédemment créés. Ensuite, donnez à la ligne la même classe « divi-portable-row »
Les deux lignes avec la classe "divi-portable-row" seront insérées dans le module Toggle.
Utiliser un plugin/shortcode
Si vous recherchez un plugin qui fait quelque chose de similaire et offre plus de flexibilité ou d'options, vous pouvez consulter le plugin Shortcodes for Divi de notre place de marché qui vous permet d'intégrer n'importe quelle mise en page Divi à votre page à l'aide d'un shortcode. Une fois installé, le plugin générera un shortcode intégrable pour chaque mise en page que vous avez enregistrée dans votre bibliothèque Divi.
Dernières pensées
Dans la plupart des cas, il ne devrait pas être nécessaire d'insérer des modules ou des lignes dans d'autres modules, sauf en cas de besoin particulier. Habituellement, vous pouvez obtenir la mise en page/la conception dont vous avez besoin sans avoir à faire ce genre de chose. Cependant, pour ceux d'entre vous qui recherchent un moyen simple de le faire sans avoir à recourir à un plugin, espérons que cette solution sera utile.
De plus, pensez à toutes les applications possibles !
J'ai hâte de vous entendre dans les commentaires.
À votre santé!