Modulul de cod este o pânză goală care vă permite să adăugați cod la pagina dvs., cum ar fi coduri scurte de plugin sau cod HTML static. Dacă doriți să utilizați un plugin terță parte, de exemplu un plugin glisant terță parte, puteți plasa pur și simplu codul scurt al pluginului într-un modul de cod standard sau cu lățime completă pentru a afișa elementul fără restricții.
Cum să adăugați un modul de cod la pagina dvs.
Înainte de a putea adăuga un modul de cod pe pagina dvs., trebuie să accesați mai întâi Divi Builder. Odata ce Divi tema instalat pe dvs site-ul web, veți observa un buton Utilizați Divi Builder deasupra editorului de fiecare dată când creați o pagină nouă.
Făcând clic pe acest buton, activați Divi Builder, care vă oferă acces la toate modulele Divi Builder. Apoi faceți clic pe buton Utilizați Visual Builder pentru a porni generatorul în modul vizual.
De asemenea, puteți da clic pe buton Utilizați Visual Builder când răsfoiți dvs site-ul web în amonte dacă sunteți conectat la tabloul de bord WordPress.
Odată introdus în Visual Builder, puteți face clic pe butonul gri plus pentru a adăuga un nou modul la pagina dvs. Modulele noi pot fi adăugate numai în rânduri. Dacă începeți o pagină nouă, nu uitați să adăugați mai întâi un rând la pagina dvs.
Găsiți modulul de cod în lista de module și faceți clic pe acesta pentru a-l adăuga la pagina dvs. Lista modulelor poate fi căutată, ceea ce înseamnă că puteți, de asemenea, să tastați cuvântul „cod” și apoi să apăsați Enter pentru a găsi și adăuga automat modulul de cod! Odată adăugat modulul, veți fi întâmpinat cu lista opțiunilor modulului. Aceste opțiuni sunt separate în trei grupuri principale: Conținut , Concepție et avansat .
Utilizați cazul adăugând o foaie de stil plictisitoare pentru a anima conținutul pe o pagină individuală
În acest exemplu, voi adăuga un script de link pentru a importa Animate.css pentru a adăuga efecte de animație la elementele de pe pagină. Deoarece fișierul Animate.css conține o mulțime de cod, este logic să îl încărc numai pe pagina de care am nevoie.
Trebuie doar să adăugați o secțiune obișnuită și o linie cu lățime completă (coloana 1) și să adăugați modulul de cod.
În caseta de text a cuprins, adăugați fragmentul de cod.
Tot ce trebuie să faceți este să adăugați câteva clase CSS pentru a anima orice element al paginii dvs. de clasă CSS de pe pagina dvs. În acest exemplu, voi sari butonul atunci când pagina se încarcă.
În setările modulului Buton, în fila Advanced, introduceți cele două clase „animate” și „bounce” în caseta de text a clasei CSS.
Acum, butonul revine când pagina se încarcă.
Sfat: uneori adăugarea unui cod cu întreruperi de linie va face ca acesta să nu mai funcționeze. Este mai bine să creați codul într-un editor de text și să-l lipiți în modulul de cod.
Opțiunile pentru conținutul codului
În fila de cuprins, veți găsi toate elementele de conținut ale modulului, cum ar fi text, imagini și pictograme. Tot ceea ce controlează ce apare în modulul dvs. va fi întotdeauna în această filă.
Conținut
Aici puteți plasa orice cod HTML, CSS sau JavaScript pe care doriți să îl afișați pe pagină în locația curentă. Numai editorii și administratorii au voie să posteze HTML nefiltrat, ceea ce înseamnă că codul poate fi eliminat din curs dacă este folosit de un autor sau de un colaborator. De asemenea, puteți plasa coduri scurte în modul. Aceste coduri de curs (coduri scurte) vor fi afișate în coloana părinte fără niciun pachet suplimentar de module Divi.
Eticheta de administrare
Aceasta va schimba eticheta modulului din generator pentru o identificare ușoară. Când utilizați vizualizarea WireFrame în Visual Builder, aceste etichete vor apărea în blocul de module al interfeței Divi Builder.
Opțiunile de proiectare a codului
În fila Proiectare, veți găsi toate opțiunile de stil pentru modul, cum ar fi fonturile, culorile, dimensiunea și spațiul. Această filă vă permite să modificați aspectul modulului dvs. Fiecare modul Divi are o listă lungă de setări de proiectare pe care le puteți utiliza pentru a modifica aproape orice.
Lățimea maximă
Orice valoare introdusă aici limitează lățimea oricărui conținut redat în modulul de cod la valoarea setată. De exemplu, introducerea a 50% în câmpul de intrare va reduce conținutul modulului de cod la 50% din coloana care îl conține.
Cod Opțiuni avansate Cod
În fila Avansat, veți găsi opțiuni pe care designerii web mai experimentați le pot găsi utile, cum ar fi atributele CSS și HTML personalizate. Aici puteți aplica CSS personalizat oricăruia dintre numeroasele elemente ale modulului. De asemenea, puteți aplica clase și ID-uri CSS personalizate modulului, care pot fi utilizate pentru a personaliza modulul în fișierul style.css al temei copilului dvs.
Cod CSS
Introduceți un ID CSS ușor de utilizat pentru acest modul. Un ID poate fi folosit pentru a crea un stil CSS personalizat sau pentru a crea legături către anumite secțiuni ale paginii dvs.
CSS
Introduceți clasele CSS opționale de utilizat pentru acest modul. O clasă CSS poate fi utilizată pentru a crea stiluri CSS personalizate. Puteți adăuga mai multe clase, separate printr-un spațiu. Aceste clase pot fi folosite în dvs Divi tema Child sau în CSS-ul personalizat pe care îl adăugați la pagina dvs. sau la dvs site-ul web folosind opțiunile temei Divi sau setările paginii Divi Builder.
CSS personalizate
CSS personalizat poate fi aplicat și modulului și oricăruia dintre elementele interne ale modulului. În secțiunea CSS personalizată, veți găsi un câmp text unde puteți adăuga CSS direct la fiecare element. Intrările CSS din aceste setări sunt deja încorporate cu etichete de stil. Deci trebuie doar să introduceți reguli CSS separate prin punct și virgulă.
vizibilitate
Această opțiune vă permite să controlați dispozitivele pe care apare modulul dvs. Puteți alege să vă dezactivați modulul individual pe tablete, smartphone-uri sau desktop-uri. Acest lucru este util dacă doriți să utilizați moduri diferite pe diferite dispozitive sau dacă doriți să simplificați designul mobil prin eliminarea anumitor elemente din pagină.
Gata pentru acest tutorial.
