Insérer un module Divi ou une ligne à 39; Intérieur d’autres modules Divi (sans plug – in)

Si vous utilisez Divi depuis un certain temps, vous voudrez peut – être insérer un module Divi (ou une ligne) dans un autre module. Dans la plupart des cas, ce n’est pas vraiment nécessaire si vous 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 d’améliorer ces caractéristiques en concevant deux modules à l’aide de Divi et en les insérant les uns dans les autres. Un bon exemple est l’insertion d’un formulaire, tel qu’un formulaire de contact, dans un formulaire ouvert \/ fermé pour l’afficher lorsque vous 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, vous 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, vous devez d’abord télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire. Télécharger le fichier Abonnez – vous au communiqué de presse Divi et nous vous en enverrons une copie par courriel.
Les derniers paquets de mise en page de la page d’atterrissage Divi, ainsi que d’autres ressources Divi gratuites étonnantes, conseils et conseils tonnes. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout.
Vous 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 – vous à 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 l’onglet 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 – vous commencer? Pour commencer, vous devez faire ce qui suit: si ce n’est 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 l’option créer à partir de zéro. Ensuite, vous aurez une toile vierge à concevoir dans Divi. La chose à garder à l’esprit 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 vous laisserons cette section. Nous nous concentrerons davantage sur la façon d’appliquer les classes CSS et HTML correctes à chaque élément Divi pour insérer un module dans un autre module.
N’oubliez pas que nous ne pouvons voir le résultat final que sur la page active et non dans Visual Divi Builder. En d’autres termes, nous pouvons utiliser Divi pour concevoir des modules, mais ils resteront indépendants dans le générateur jusqu’à 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 l’expliquerons plus loin, il y a certaines limites au nombre d’instances que vous pouvez avoir dans une colonne ou une section (modules ou lignes insérés dans un autre module). Lorsque vous insérez un module dans un autre module, il ne peut y avoir qu’un seul module cible par colonne (qui contiendra le module que vous insérez). De plus, lorsque vous insérez des lignes dans un autre module, chaque section ne peut avoir qu’un seul module cible. Bien qu’il s’agisse d’une limitation dans un sens, elle vous permet d’avoir 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 vous montrerons comment insérer un module Divi dans un autre module. Tout d’abord, nous vous montrerons comment ajouter un formulaire de contact au module d’échange. Nous vous 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ù vous pouvez ajouter du texte \/ html). Pour spécifier l’emplacement cible, nous devons insérer une nouvelle DIV contenant une classe CSS nécessaire qui servira d’emplacement cible pour notre module portable (le module que nous voulons insérer). Dans l’onglet Contenu des paramètres de commutation, ajoutez le code HTML suivant au corps. Assurez – vous de cliquer sur l’onglet texte
Avant d’insérer le HTML.