[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0 ! important; border-bottom-width: 0px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: cea mai ușoară temă WordPress de utilizat

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62.

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 mai întâi să accesați Divi Builder. Odată ce tema Divi este instalată pe site-ul dvs. 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 navighezi pe site-ul tău din amonte dacă ești conectat la tabloul de bord WordPress.

butonul divi builder module blog divi

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.

Introduceți modulul codului divi

 

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.

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați Ușor și Gratuit orice site web sau design de blog cu aspect profesional. Nu mai plătiți mult pentru un site web pe care îl puteți face singur.

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.

Cod constructor Divi

În caseta text conținut, adăugați fragmentul de cod.

Adăugați fragmentul animate.css

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.

Vrei să-ți vinzi produsele pe internet?

Descărcați gratuit WooCommerce, cele mai bune pluginuri de comerț electronic pentru a vă vinde produsele fizice și digitale pe WordPress și pentru a vă crea cu ușurință magazinul online. Perfect pentru incepatori.

Adăugați o clasă de animație CSS

Acum, butonul revine când pagina se încarcă.

Animația butonului constructor divi

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 conținut veți găsi toate elementele de conținut ale modulului, cum ar fi text, imagini și pictograme. Toate acestea controlează ce apare în modulul dvs. va fi întotdeauna în această filă.

Parametrii codului constructor DiviConținut

Puteți plasa orice cod HTML, CSS sau JavaScript acolo pe care doriți să îl afișați pe pagina din locația curentă. Doar editorilor și administratorilor li se permite să posteze HTML nefiltrat, ceea ce înseamnă că codul poate fi eliminat din modul dacă este utilizat de un autor sau de un colaborator. De asemenea, puteți plasa coduri scurte în modul. Aceste coduri de curs (shortcodes) vor fi afișate în interiorul coloanei părinte, fără nicio învelitoare de modul Divi suplimentară.

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.

Codul modulului de proiectare a opțiunii divi builderLăț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.

Secțiunea avans modul cod constructor divi

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 un stil CSS personalizat. Puteți adăuga mai multe clase, separate printr-un spațiu. Aceste clase pot fi folosite în tema Divi Child sau în CSS personalizate pe care le adăugați la pagina sau site-ul dvs. web utilizând 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.

2 acțiuni
acțiune2
tweet
Registru