Modulul Divi Code
Cum să adăugați, să configurați și să personalizați Modulul Divi Code.
Modulul Divi Code este o Blank Canvas care vă permite să adăugați cod la pagina dvs., cum ar fi coduri scurte de plugin sau HTML static. Dacă doriți să utilizați un plugin terță parte, de exemplu un plugin slider terță parte, puteți pur și simplu să plasați codul scurt al pluginului într-un modul de cod standard sau cu lățime completă pentru a afișa elementul fără obstacole.
Cum să Adăugați Modulul Divi Code pe Pagina dvs.
Înainte de a putea adăuga un modul de cod pe pagina dvs., va trebui mai întâi să accesați Divi Builder. Odată ce Tema Divi a fost instalată pe site-ul dvs., veți observa un buton Utilizați Divi Builder deasupra editorului de postări de fiecare dată când construiți o pagină nouă. Făcând clic pe acest buton, se va activa Divi Builder, oferindu-vă acces la toate modulele Divi Builder. Apoi, faceți clic pe butonul Utilizați generatorul vizual pentru a lansa generatorul în modul vizual. Puteți, de asemenea, să faceți clic pe butonul Utilizați Visual Builder atunci când vă navigați pe site-ul dvs. în front-end dacă sunteți conectat la tabloul de bord WordPress.
Odată ce ați intrat în Visual Builder, puteți face clic pe butonul gri plus pentru a adăuga un nou modul la pagina dvs. Noile module pot fi adăugate numai în interiorul Rândurilor. Dacă începeți o pagină nouă, nu uitați să adăugați mai întâi un rând pe pagina dvs. Avem câteva tutoriale grozave despre cum să utilizați elementele rând și secțiune ale Divi.
Localizați Modulul Divi Code în lista de module și faceți clic pe el pentru a-l adăuga pe pagina dvs. Lista de module poate fi căutată, ceea ce înseamnă că puteți introduce și cuvântul „cod” și apoi faceți clic pe Enter pentru a găsi și adăuga automat modulul de cod! Odată ce modulul a fost adăugat, veți fi întâmpinat cu lista de opțiuni a modulului. Aceste opțiuni sunt separate în trei grupuri principale: Conținut, Design și Avansat.
Exemplu de Caz de Utilizare: Adăugarea Unei Foi de Stil Extern cu Conținut Animat 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 elementelor de pe pagină. Deoarece fișierul Animate.css are o mulțime de cod, este logic să-l încărcați numai pe pagina de care am nevoie.
Pur și simplu adăugați o secțiune obișnuită și un rând cu lățime completă (1 coloană) și adăugați Modulul Divi Code.
În caseta de text pentru conținut, adăugați fragmentul de cod.
Acum, tot ce trebuie să faci este să adaugi câteva clase CSS pentru a anima orice element al paginii tale de clase CSS pe pagina ta. În acest exemplu, voi face butonul să sară când încarc pagina.
În Button Module Settings, sub fila Avansat, introduceți cele două clase „animate” și „bounce” în caseta de text CSS Class.
Acum butonul va sări la încărcarea paginii.
Iată încă câteva exemple despre cum puteți utiliza Modulul Divi Code:
- Adăugați blocuri de cod javascript sau biblioteci pe care le aplicați numai paginii dvs.
- Integrați pluginuri terțe, cum ar fi Slider Revolution.
- Puteți folosi Modulul Cod Fullwidth pentru a încorpora un Typeform pentru mai multe chestionare interactive, formulare de contact etc…
- Adăugați un meniu de acțiuni plutitor
- Creați un anunț slide-in din bara de sus.
- Adăugați un buton de acțiune plutitor.
Uneori, adăugarea de cod cu întreruperi de linie va face ca codul să nu funcționeze. Cel mai bine este să vă creați codul într-un editor de text și să îl conectați (faceți totul pe o singură linie) înainte de a-l lipi în Modulul Divi Code.
Opțiuni de Conținut Pentru Modulul Divi Code
În fila de Conținut veți găsi toate elementele de conținut ale modulului, cum ar fi text, imagini și pictograme. Orice lucru care controlează ceea ce apare în modulul tău va fi întotdeauna găsit î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ă un anumit cod poate fi eliminat din modul dacă este folosit de un autor sau de un colaborator. De asemenea, puteți plasa coduri scurte în modul. Aceste coduri scurte vor fi redate în interiorul coloanei părinte fără niciun pachet suplimentar de module Divi.
Eticheta de Administrator
Acest lucru va schimba eticheta modulului din constructor pentru o identificare ușoară. Când utilizați vizualizarea WireFrame în Visual Builder, aceste etichete vor apărea în blocul modulului din interfața Divi Builder.
Opțiuni de Design Pentru Modulul Divi Code
În fila de Design veți găsi toate opțiunile de stil ale modulului, cum ar fi fonturi, culori, dimensiune și spațiere. Aceasta este fila pe care o veți folosi pentru a schimba modul în care arată modulul. Fiecare modul Divi are o listă lungă de setări de design pe care le puteți folosi pentru a schimba aproape orice.
Lățimea Maximă
Orice valoare introdusă aici va restricționa lățimea oricărui conținut redat în modulul de cod la valoarea definită. De exemplu, introducerea a 50% în câmpul de introducere va reduce conținutul modulului de cod la 50% din coloana care îl conține.
Opțiuni Avansate Pentru Modulul Divi Code
În fila Avansată, veți găsi opțiuni pe care designerii web mai experimentați le-ar putea găsi utile, cum ar fi atributele CSS și HTML personalizate. Aici puteți aplica CSS personalizat la oricare dintre multele elemente ale modulului. Puteți aplica, de asemenea, clase și ID-uri CSS personalizate la modul, care pot fi folosite pentru a personaliza modulul în fișierul style.css al Temei Copil.
ID CSS
Introduceți un ID CSS opțional pentru a fi utilizat pentru acest modul. Un ID poate fi folosit pentru a crea un stil CSS personalizat sau pentru a crea link-uri către anumite secțiuni ale paginii dvs.
Clasa CSS
Introduceți clase CSS opționale care vor fi utilizate 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 tema Divi Child sau în CSS-ul personalizat pe care îl adăugați la pagina sau site-ul dvs. folosind Opțiunile Temei Divi sau setările paginii Divi Builder.
CSS Personalizat
CSS personalizat poate fi aplicat și la modul și la oricare dintre elementele interne ale modulului. În secțiunea CSS personalizat, veți găsi un câmp de text în care puteți adăuga CSS personalizat direct la fiecare element. Intrările CSS în aceste setări sunt deja incluse în etichete de stil, așa că trebuie să introduceți doar reguli CSS separate prin punct și virgulă.
Vizibilitate
Această opțiune vă permite să controlați pe ce dispozitive apare modulul dvs. Puteți alege să vă dezactivați modulul individual pe tablete, telefoane inteligente sau computere desktop. Acest lucru este util dacă doriți să utilizați diferite module pe diferite dispozitive, sau dacă doriți să simplificați designul mobil prin eliminarea anumitor elemente din pagină.
