utilisez Divi depuis un certain temps, voudrez peut être insérer un module Divi (ou une ligne) dans un autre module. Dans la plupart des cas, ce nrsquoest pas vraiment nécessaire si savez comment utiliser Divi avec compétence. Le module Divi est déjà puissant, avec des éléments fonctionnels riches et des paramètres de conception intégrés. Cependant, il est parfois possible drsquoaméliorer ces caractéristiques en concevant deux modules à lrsquoaide de Divi et en les insérant les uns dans les autres. Un bon exemple est lrsquoinsertion drsquoun formulaire, tel qursquoun formulaire de contact, dans un formulaire ouvert fermé pour lrsquoafficher lorsque cliquez sur un interrupteur.
Dans ce tutoriel, nous allons partager comment insérer un module Divi ou une ligne dans un autre module Divi. Pour ce faire, devez ajouter quelques petits fragments de jquery. Une fois le Code en place, nous pouvons utiliser Divi Builder pour ajouter les classes CSS appropriées pour les éléments que nous voulons insérer déplacer et les modules que nous voulons insérer. Allons y! Voici un aperçu rapide des exemples que nous allons créer dans ce tutoriel. Module de contact dans le module de commutation Module de commutation et module bouton poussoir dans le module Blurb (colonne de droite)
Basculer les lignes de séparation dans le module Téléchargement gratuit de la mise en page pour en savoir plus sur la mise en page de ce tutoriel, devez drsquoabord en utilisant les boutons ci dessous. Pour accéder au téléchargement, devez abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci dessous. En tant que nouvel utilisateur, recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! êtes déjà sur la liste, il suffit de saisir votre adresse e mail ci dessous et cliquez sur . Vous ne serez pas « ré abonné » ou recevrez un courriel supplémentaire. Télécharger le fichier
Abonnez au communiqué de presse Divi et nous en enverrons une copie par courriel.
Les derniers paquets de mise en page de la page drsquoatterrissage Divi, ainsi que drsquoautres ressources Divi gratuites étonnantes, conseils et conseils tonnes. Suivez nous et serez bientôt maître Divi. êtes déjà abonné, entrez votre adresse e mail ci dessous et cliquez sur pour accéder au paquet Layout.
Vous êtes inscrit avec succès. Vérifiez votre adresse e mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Abonnez à notre canal YouTube, importez la mise en page dans la Bibliothèque Divi et allez à la Bibliothèque Divi. Cliquez sur le bouton importer. Dans la fenêtre contextuelle de portabilité, sélectionnez lrsquoonglet importer, puis sélectionnez les fichiers téléchargés à partir de votre ordinateur. Puis cliquez sur le bouton importer. Une fois terminé, la disposition de la section est disponible dans Divi Builder. Commençons le tutoriel. Que devez commencer?
Pour commencer, devez faire ce qui suit: si ce nrsquoest pas déjà fait, installez et activez le thème Divi. Créez une nouvelle page dans WordPress et utilisez Divi Builder pour éditer la page à l’avant (Visual Builder). Sélectionnez lrsquooption créer à partir de zéro. Ensuite, aurez une toile vierge à concevoir dans Divi. La chose à garder à lrsquoesprit dans ce tutoriel est que le processus de stylisation de tous les modules à utiliser dans ce processus peut encore être fait intuitivement en utilisant les paramètres intégrés de Divi Builder, donc nous laisserons cette section. Nous nous concentrerons davantage sur la façon drsquoappliquer les classes CSS et HTML correctes à chaque élément Divi pour insérer un module dans un autre module.
Nrsquooubliez pas que nous ne pouvons voir le résultat final que sur la page active et non dans Visual Divi Builder. En drsquoautres termes, nous pouvons utiliser Divi pour concevoir des modules, mais ils resteront indépendants dans le générateur jusqursquoà ce que nous voyions la version en direct de la page. Seuls les modules ou lignes peuvent être insérés
Dans un module qui peut ajouter du texte html. De plus, comme nous lrsquoexpliquerons plus loin, il y a certaines limites au nombre drsquoinstances que pouvez avoir dans une colonne ou une section (modules ou lignes insérés dans un autre module). Lorsque insérez un module dans un autre module, il ne peut y avoir qursquoun seul module cible par colonne (qui contiendra le module que insérez). De plus, lorsque insérez des lignes dans un autre module, chaque section ne peut avoir qursquoun seul module cible. Bien qursquoil srsquoagisse drsquoune limitation dans un sens, elle permet drsquoavoir plusieurs instances sur la page au besoin.
Partie 1: comment insérer un module Divi dans un autre module dans la première partie de ce tutoriel, nous montrerons comment insérer un module Divi dans un autre module. Tout drsquoabord, nous montrerons comment ajouter un formulaire de contact au module drsquoéchange. Nous montrerons ensuite comment ajouter un module de commutation et un module bouton poussoir au module Blurb. Exemple 1: insérer un formulaire de contact dans le module Switch ajouter une nouvelle ligne pour commencer, ajouter une nouvelle ligne dans la colonne de la section. Ajouter un module de commutation (module cible) dans la colonne et un module marche arrêt.
Par exemple, nous voulons insérer un module dans ce module de commutation que nous pourrions appeler le module cible. Techniquement, la destination réelle sera dans le contenu principal du module switch (où pouvez ajouter du texte html). Pour spécifier lemplacement cible, nous devons insérer une nouvelle DIV contenant une classe CSS nécessaire qui servira demplacement cible pour notre module portable (le module que nous voulons insérer). Dans lrsquoonglet Contenu des paramètres de commutation, ajoutez le code HTML suivant au corps. Assurez de cliquer sur lrsquoonglet texte
Avant drsquoinsérer le HTML.
Ajouter un formulaire de contact (formulaire portable) Ensuite, nous devons ajouter le formulaire à insérer dans le formulaire de commutation. Dans cet exemple, nous insérons un formulaire de contrat dans le corps du module swap. Il est important drsquoajouter un nouveau module
Classe CSS: module portable Divi Ajoutez une classe de colonne, puis ajoutez 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 mère Le Code nécessaire pour le faire fonctionner est très court. Fondamentalement, nous voulons utiliser jquery pour trouver chaque module de la classe
Le Code comprend également lrsquoinsertion drsquoun module bouton poussoir dans un fragment drsquoun autre module et lrsquoinsertion drsquoune ligne Divi dans un fragment drsquoun module. Pour ajouter un code, ajoutez un nouveau formulaire de code sous le formulaire de contact. Avant de coller le Code désiré, ajoutez les balises de script nécessaires pour intégrer JS dans le HTML à la zone de code: Puis collez le code suivant entre les balises de script: (fonction ($) {0}
USD (file). Ready (Function () {
Option 1: déplacer le module Divi dans le module
Limite: une instance par colonne
voulez déplacer, utilisez le code suivant
Module dans un autre module. Chaque colonne contient
Catégorie»
Entity in DIV with class
Switch (portable) comme nous voulons ajouter un module on off à la description, créez un nouveau module drsquoactivation dans la même colonne de la description. Ensuite, ajoutez la classe CSS suivante au module Switch et spécifiez la comme le module que nous voulons déplacer insérer dans Blurb: CSS Class: Divi portable module Résultats vérifiez maintenant la page en direct pour voir les résultats. Le commutateur sera maintenant situé dans le module Blurb. Exemple 3: insérer un module bouton dans le module Blurb pour lrsquoexemple suivant, nous insérons un module bouton dans le même module Blurb que lrsquoexemple précédent. En général, pour tout autre module, nous répétons le même processus en ajoutant un nouveau module portable à Blurb. Cependant, comme le module bouton est construit légèrement différemment à lrsquoarrière plan, devez ajouter différentes classes au module bouton. Ajouter un module bouton poussoir (portable no 2) pour ce faire, ajoutez un nouveau module bouton poussoir sous le module activation désactivation qui a été inséré dans Blurb. Ensuite, ajoutez la classe CSS suivante au module bouton: classe CSS: Divi portable button Résultats vérifiez maintenant les résultats sur la page en direct. Le module Blurb contient maintenant un module de commutation et un module bouton poussoir. Voici le fragment de code approprié pour insérer le module bouton poussoir dans le module avec DIV
