Cum se inserează module Divi sau rânduri în alte module Divi (fără un plugin)

Dacă ați fost utilizator Divi pentru o vreme, v-a trecut prin minte gândul de a introduce un modul Divi (sau rând) în interiorul altui modul. În majoritatea cazurilor, dacă știi cum să folosești Divi cu competență, acest gen de lucruri nu este cu adevărat necesar. Modulele Divi sunt deja elemente puternice, pline de caracteristici și setări de design încorporate. Dar, uneori, ar fi bine să îmbunătățiți aceste caracteristici prin proiectarea a două module folosind Divi și apoi inserarea unuia în celălalt. Un exemplu bun în acest sens ar fi inserarea unui modul (cum ar fi un formular de contact) într-un modul de comutare, astfel încât formularul să se afișeze atunci când faceți clic pe comutare.

În acest tutorial, vom împărtăși cum să introduceți module Divi sau rânduri într-un alt modul Divi. Pentru a face acest lucru, trebuie să adăugați câteva fragmente mici de JQuery. Odată ce codul este la locul său, putem folosi Divi Builder pentru a adăuga clasele CSS adecvate pentru a viza elementele pe care dorim să le inserăm / mutăm și modulul în care dorim să le introducem.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra exemplelor pe care le vom construi în acest tutorial.

Un formular de contact în interiorul unui modul de comutare

Un modul de comutare și un modul buton în interiorul unui modul Blurb (coloana din dreapta)

Un rând Divi în interiorul unui modul Toggle

Descărcați aspectul GRATUIT

Pentru a pune mâna pe aspect din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Abonați-vă la canalul nostru Youtube

Pentru a importa aspectul secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Lucruri de reținut

Pentru acest tutorial, procesul de stilizare a tuturor modulelor pe care doriți să le utilizați în acest proces se poate face în continuare vizual folosind setările încorporate Divi Builder, așa că vă vom lăsa acea parte. Ne vom concentra mai mult pe cum să aplicăm clasele CSS și HTML potrivite fiecărui element Divi pentru a insera modulul (modulele) / rândul (rândurile) în alt modul.

Rețineți că vom putea vedea rezultatul final doar pe o pagină live, nu în timp ce editați din Divi Builder vizual. Cu alte cuvinte, putem proiecta modulele cu Divi, dar acestea vor rămâne separate în constructor până când veți vedea versiunea live a paginii.

Puteți insera numai module sau rânduri într-un modul care are capacitatea de a adăuga text / html.

De asemenea, după cum vom explica mai târziu, există anumite limite ale numărului de instanțe (module sau rânduri care sunt inserate într-un alt modul) pe care le puteți avea într-o coloană sau secțiune. Când introduceți module într-un alt modul, sunteți limitat la un modul „destinație” (modulul va conține modulul (modulele) pe care doriți să le inserați) pe coloană. Și, atunci când introduceți rânduri într-un alt modul, sunteți limitat la un modul „destinație” per secțiune. Deși aceasta este o limitare într-un sens, vă oferă opțiunea de a avea mai multe instanțe pe pagina dvs. atunci când este necesar.

Partea 1: Cum se inserează module Divi într-un alt modul

Pentru prima parte a acestui tutorial, vă vom arăta cum să inserați modulele Divi într-un alt modul. Mai întâi, vă vom arăta cum să adăugați un modul de contact în interiorul unui modul de comutare. Apoi, vă vom arăta cum să adăugați un modul de comutare și un modul buton în interiorul unui modul Blurb.

Exemplul 1: inserarea unui modul de formular de contact în interiorul unui modul de comutare

Adăugați un rând nou

Pentru a începe, adăugați un nou rând cu o coloană la secțiune.

Adăugați modulul de comutare (modulul de destinație)

În interiorul coloanei, adăugați un modul de comutare.

Pentru acest exemplu, dorim să inserăm un modul în acest modul Toggle, la care ne putem referi ca modul nostru de destinație. Din punct de vedere tehnic, destinația reală va fi în interiorul conținutului corpului modulului Toggle (unde puteți adăuga text / HTML). Pentru a desemna locația de destinație, trebuie să inserăm un nou div cu o clasă CSS necesară care va servi drept locație țintă pentru modulul nostru portabil (modulul pe care dorim să îl inserăm).

Sub fila conținut a setărilor de comutare, adăugați următorul HTML în corp. Asigurați-vă că dați clic pe fila Text înainte de a insera HTML.

<div class="divi-module-destination"></div>

Adăugați modulul formular de contact (modulul portabil)

Apoi, trebuie să adăugăm modulul pe care dorim să îl inserăm în modulul Toggle. În acest exemplu, vom introduce un modul de formular de contract în corpul modulului de comutare. Este important să adăugați noul modul „portabil” în aceeași coloană cu modulul de destinație.

Pentru a face acest lucru, adăugați un nou formular de contact direct sub modulul de comutare.

Faceți clic pe fila Avansat sub setările Formularului de contact (al oricărui modul pe care doriți să îl inserați) și adăugați următoarea clasă CSS:

• Clasa CSS: divi-portable-module

Adăugați o clasă de coloană

În continuare, trebuie să adăugăm o clasă personalizată la coloana care conține ambele module. Deschideți setările coloanei și adăugați următoarea clasă CSS:

• Clasa CSS: coloana părinte

Adăugați codul

Codul necesar pentru a face acest lucru este destul de scurt și simplu. Practic, dorim să folosim JQuery pentru a găsi fiecare modul cu clasa „divi-portable-module” cu coloana părinte (cea cu clasa „coloană părinte”) și să adăugăm fiecare dintre aceste module din div cu clasa „ divi-module-destination ”.

Codul include, de asemenea, un fragment pentru a insera un modul buton în alt modul și un fragment pentru a insera rânduri Divi într-un modul.

Pentru a adăuga codul, adăugați un nou modul de cod sub modulul formularului de contact.

Înainte de a lipi codul necesar, adăugați etichetele de script necesare pentru încorporarea JS în HTML în caseta Cod:

Apoi lipiți următorul cod între etichetele 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);

Înțelegerea funcționalității

În interiorul Divi Builder de pe backend, modulele vor rămâne separate. Cu toate acestea, dacă vizualizați rezultatele pe pagina live de pe frontend, veți vedea că formularul de contact a fost inserat în modulul Toggle.

Dacă inspectați codul pe pagina live, puteți vedea că modulul de formular de contact a fost introdus cu succes în div cu clasa „divi-module-destination”.

Stilizarea modulelor

Așa cum am menționat anterior, modulele vor rămâne separate pe backend-ul Divi Builder. Cu toate acestea, stilurile pe care le adăugați la fiecare se vor aplica în continuare. Așadar, nu ezitați să adăugați stiluri atât pentru modulul de destinație, cât și pentru modulul portabil folosind Divi Builder.

NOTĂ: În unele cazuri, stilurile modulului de destinație (acum un modul părinte) pot fi aplicate modulului introdus. Dacă acesta este cazul, ar trebui să puteți suprascrie acest stil actualizând setările modulului inserat.

Rezultatul

Iată rezultatul final la vizualizarea paginii live.

Exemplul 2: Introducerea unui modul de comutare în interiorul unui modul Blurb

Pentru următorul nostru exemplu, vom introduce un modul Toggle în interiorul unui modul Blurb. Procesul este la fel ca înainte. Fragmentul de cod limitează utilizarea unui modul de destinație pe coloană. Cu alte cuvinte, puteți avea mai multe module portabile cu clasa „divi-portable-module” care pot fi adăugate la modulul de destinație, dar puteți avea o singură instanță a divului cu clasa „divi-module-destination” pe coloană.

Pentru a demonstra acest lucru, să repetăm ​​același proces cu un alt grup de module din altă coloană din același rând.

Adăugați o coloană nouă la rând

Mai întâi, adăugați o nouă coloană la rândul existent.

Adăugați o clasă de coloană

Acordați noii coloane următoarea clasă CSS, așa cum am făcut în prima coloană:

• Clasa CSS: coloana părinte

Adăugați un modul Blurb (modulul de destinație)

În noua coloană, adăugați un modul blurb care va servi drept modul de destinație.

În corpul blurbului, lipiți următorul HTML care include același div cu clasa „divi-module-destination” unde doriți să fie inserate modulele portabile (în acest caz sub textul corpului fals):

<div class="divi-module-destination"></div>

Adăugați modul de comutare (modul portabil)

De vreme ce dorim să adăugăm un modul de comutare la blurb, creați un nou modul de comutare în aceeași coloană ca blurb.

Apoi adăugați următoarea clasă CSS în modulul Toggle pentru a-l desemna ca modul pe care dorim să-l mutăm / inserăm în blurb:

• Clasa CSS: divi-portable-module

Rezultat

Acum verificați pagina live pentru a vedea rezultatul. Comutarea va locui acum în modulul blurb.

Exemplul 3: Introducerea unui modul buton în interiorul unui modul Blurb

Pentru acest exemplu următor, vom introduce un modul buton în același modul blurb din exemplul nostru anterior. În mod normal, pentru orice alt modul, vom repeta același proces pentru a adăuga un nou modul portabil la blurb. Dar, deoarece modulul buton este construit puțin diferit pe backend, trebuie să adăugăm o clasă diferită modulului buton.

Adaugă buton modul (modul portabil # 2)

Pentru a face acest lucru, adăugați un nou modul buton sub modulul de comutare care este deja introdus în blurb.

Apoi, adăugați următoarea clasă CSS la modulul buton:

• Clasa CSS: buton divi-portable

Rezultatul

Acum verificați rezultatul pe pagina live. Modulul Blurb conține acum modulul de comutare și modulul buton.

Și iată fragmentul de cod corespunzător folosit pentru a insera modulul buton în interiorul modulului cu divul „destinație”. Principala diferență cu acest fragment de cod este că vizăm elementul părinte (butonul de împachetare div din culise) al clasei de butoane „divi-portable-button”.

Partea 2: Cum se inserează rândurile Divi într-un modul

Dacă doriți să inserați un rând întreg (sau rânduri) în interiorul unui modul, procesul este foarte similar cu inserarea unui modul într-un alt modul. Trebuie să adăugăm clasa „părinte-secțiune” la secțiunea care conține modulul de destinație și rândurile portabile pe care dorim să le inserăm. Trebuie să adăugăm divul cu clasa „divi-row-destination” la modulul de destinație. Și trebuie să adăugăm clasa „divi-portable-row” la rândul (rândurile) pe care dorim să îl inserăm în modulul de destinație.

Iată cum să o faci.

Adăugați secțiune

Mai întâi, adăugați o nouă secțiune obișnuită la pagină.

Sub fila avansată a setărilor secțiunii, adăugați următoarea clasă CSS:

• Clasa CSS: secțiunea părinte

Adăugați rând pentru modulul de destinație

Adăugați un nou rând cu o coloană pentru a menține modulul de destinație.

Adăugați modulul Toggle (modulul destinație rând)

Pentru acest exemplu, vom introduce un rând în interiorul unui modul Toggle. Prin urmare, adăugați un nou modul de comutare la rând.

Deoarece modulul Toggle este modulul nostru de destinație, deschideți setările pentru comutare și adăugați următorul HTML la conținutul corpului:

<div class="divi-row-destination"></div>

Creați rând portabil

Acum că modulul de destinație este la locul său, adăugați un rând nou sub rândul anterior. Acesta va servi drept rând portabil pe care îl vom insera în modulul Toggle.

Umpleți rândul cu conținut

În acest moment, puteți umple rândul cu orice conținut / module doriți folosind Divi Builder. Rețineți că totul din rând va deveni în cele din urmă inserat în modulul de comutare, deoarece acesta se află în interiorul rândului.

Adăugați o clasă la rând

Apoi deschideți setările rândului și desemnați-l ca un rând pe care doriți să îl inserați în modulul Toggle, oferindu-i următoarea clasă CSS:

• Clasa CSS: divi-portable-row

Cum functioneaza

Ca memento, rândul va rămâne separat de modul atunci când editați aspectul utilizând Divi Builder pe backend. Dar funcționalitatea este în poziție pentru a insera rândul în interiorul modulului Toggle.

Rezultatul

Pentru a vedea rezultatul, verificați pagina live și deschideți modulul de comutare. Acum conține întregul rând.

Și iată fragmentul de cod corespunzător care face acest lucru posibil. Observați că sunt utilizate clasele corespunzătoare.

Introducerea mai multor rânduri în interiorul modulului

Atâta timp cât păstrați o instanță a modulului de destinație (adică divul cu clasa „divi-row-destination”) pe secțiune, puteți insera mai multe rânduri în acea destinație pur și simplu acordându-i aceeași clasă „divi-portable-row ”.

De exemplu, puteți adăuga un alt rând cu un modul galerie deasupra rândului cu elementele de meniu create anterior. Apoi dați rândului aceeași clasă „divi-portable-row”

Ambele rânduri cu clasa „divi-portable-row” vor fi inserate în modulul Toggle.

Utilizarea unui plugin / cod scurt

Dacă sunteți în căutarea unui plugin care să facă ceva similar și să ofere mai multă flexibilitate sau opțiuni, puteți consulta scurtcodurile pentru pluginul Divi de pe piața noastră, care vă permite să încorporați orice aspect Divi în pagina dvs. utilizând un shortcode. Odată instalat pluginul va genera un shortcode încorporabil pentru fiecare aspect pe care l-ați salvat în biblioteca Divi.

Gânduri finale

În majoritatea cazurilor, nu ar trebui să fie nevoie să introduceți module sau rânduri în alte module decât dacă există o nevoie specială. De obicei, puteți obține aspectul / designul de care aveți nevoie fără a fi nevoie să faceți acest tip de lucruri. Cu toate acestea, pentru cei dintre voi care caută o modalitate simplă de a face acest lucru fără a fi nevoie să recurgeți la un plugin, sperăm că această soluție va fi utilă.

În plus, gândește-te la toate aplicațiile posibile!

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!