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.

Divi facilitează adăugarea de imagini oriunde pe blogul dvs. Toate imaginile acceptă încărcare progresivă și vin cu 4 stiluri de animație diferite care fac navigarea pe site-ul dvs. distractiv și captivant. Modulele de imagine pot fi plasate în orice coloană pe care o creați, iar dimensiunea lor va fi ajustată pentru a se potrivi.

modul de imagine divi.png

Cum se adaugă un modul de imagine de la Divi

Înainte de a putea adăuga un modul de imagine la pagina dvs., trebuie mai întâi să accesați Divi Constructor. Odata ce Divi tema instalat pe dvs site-ul web, veți observa un buton Utilizați Divi Builder deasupra editorului de postare ori de câte ori creați o pagină nouă. Faceți clic pe acest buton pentru a activa Divi Builder și pentru a accesa 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 face clic pe buton Utilizați Visual Builder când răsfoiți dvs site-ul web în prim-plan dacă sunteți conectat la tabloul de bord WordPress.

divi builder

După ce ați activat Visual Builder, puteți face clic pe butonul gri (+) 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.

divi module image.png

Găsiți modulul de imagine î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 „imagine” și apoi să faceți clic pe Enter pentru a găsi și adăuga automat modulul imagine! Odată adăugat modulul, veți fi întâmpinat de lista de opțiuni a modulului. Aceste opțiuni sunt separate în trei grupe principale: Conținut , Concepție et avansat .

Exemplu de caz de utilizare: adăugarea de imagini suprapuse pentru a ilustra serviciile pe o pagină de servicii

Există nenumărate modalități de a utiliza modulul de imagine. Pentru acest exemplu, vă voi arăta cum să adăugați imagini la o pagină de servicii pentru un site de afaceri mici. Aici voi adăuga imaginile. Fiecare cerc roșu reprezintă o imagine.

adăugați un modul de imagine divi builder.jpg

Deoarece adăugarea unei imagini pe o pagină este un proces destul de simplu și direct, voi adăuga un stil personalizat pentru a-mi poziționa imaginile astfel încât să se suprapună, creând un efect de stivuire.

Să începem.

Utilizați constructorul vizual pentru a adăuga o secțiune standard cu un aspect 1/4 1/4 1/2. Apoi adăugați un modul text în coloana dreaptă 1/2 din rândul dvs. Introduceți un antet și o descriere pentru serviciu.

Apoi adăugați un modul de imagine în coloana 1/4 din stânga.

adaugă imagine divi builder.png

Actualizați setările modulului Image după cum urmează:

Opțiuni de conținut

Adresa URL a imaginii: [introduceți adresa URL sau descărcați imaginea cu dimensiunile 500 × 625]

Opțiuni de proiectare

Marja personalizată: stânga -60px

Opțiuni avansate

Animație: de la stânga la dreapta

animație divi image.png

Salvați setările

Adăugați un alt modul de imagine în a doua coloană 1/4 (sau coloana din mijloc) și actualizați setările imaginii după cum urmează:

Opțiuni de conținut

Adresa URL a imaginii: [introduceți adresa URL sau descărcați imaginea cu dimensiunile 500 × 625]

Opțiuni de proiectare

Marja personalizată: 100px de sus, -60px stânga

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.

Opțiuni avansate

Animație: De la dreapta la stânga

imagine suprapusă divi.png

Salvați setările

Aceasta se ocupă de prima secțiune. Acum, pentru următoarea secțiune de service, putem copia secțiunea pe care tocmai am creat-o pentru prima secțiune de servicii. Odată ce secțiunea este duplicată, schimbați structura coloanei într-un aspect de coloană 1/2 1/4 1/4 (opusul celei anterioare).

alegeți o secțiune divi.jpg

Apoi trageți modulul text cu antetul și descrierea serviciului în coloana 1/2 din partea stângă. Asigurați-vă că glisați cele două module de imagine pentru a umple fiecare 1/4 coloană (acum în dreapta).

Deoarece modulele de imagine sunt duplicate, trebuie să încărcăm noile imagini pentru acea secțiune specială de servicii. De asemenea, modulele au întotdeauna setări de marjă personalizate, cum ar fi primele două module de imagine create. Să schimbăm asta.

Începând cu modulul Imagine din coloana 1 / 4 din dreapta, actualizați următoarele setări ale imaginii:

Opțiuni de conținut

Adresa URL a imaginii: [introduceți adresa URL sau descărcați imaginea cu dimensiunile 500 × 625]

Opțiuni de proiectare

Marja personalizată: -60px stânga (numai)

Fila Advanced

Animație: De la dreapta la stânga

În cele din urmă, actualizați setările de imagine pentru modulul de imagine al coloanei centrale 1/4 cu următoarele:

Opțiuni de conținut

Adresa URL a imaginii: [introduceți adresa URL sau descărcați imaginea cu dimensiunile 500 × 625]

Opțiuni de proiectare

Marja personalizată: 100px sus, -60px dreapta

Fila Advanced

Animație: de la stânga la dreapta

Salvați setările

Acum, verificați pagina!

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.

exemplu de service page divi.jpg

Opțiunile privind conținutul modulelor de imagine

Î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 găsit în această filă.

secțiune imagine divi area contents.png

Imagine URL

Plasați aici o adresă URL validă sau alegeți / încărcați o imagine prin biblioteca media WordPress. Imaginile vor apărea întotdeauna justificate la stânga în coloanele lor și se întind pe întreaga lățime a coloanei. Cu toate acestea, imaginea dvs. nu va fi niciodată mai mare decât dimensiunea sa originală. Înălțimea imaginii este determinată de raportul de aspect al imaginii originale.

Deschideți în vizualizator

Aici puteți alege dacă imaginea dvs. se va deschide sau nu într-un vizualizator atunci când faceți clic pe ea. Dacă această opțiune este activată, imaginea dvs. va „mări” la dimensiunea maximă atunci când faceți clic într-o fereastră modală. Este o caracteristică excelentă pentru portofele.

Link URL

Plasați o adresă URL validă în acest câmp pentru a vă transforma imaginea într-un link. Dacă lăsați acest câmp necompletat, imaginea dvs. va fi lăsată ca element static.

Deschiderea adresei URL

Puteți alege aici dacă linkul dvs. se va deschide într-o fereastră nouă.

Eticheta Admin

Aceasta va schimba eticheta modulului din constructor pentru o identificare ușoară. Când utilizați vizualizarea WireFrame în Visual Builder, aceste etichete apar în blocul de module din interfața Divi Builder.

Opțiunile de proiectare a modulelor de imagine

În fila Proiectare, veți găsi toate opțiunile de stilare a modulului, cum ar fi fonturile, culorile, dimensionarea și spațiul. Aceasta este fila pe care o veți utiliza pentru a schimba aspectul modulului dvs. Fiecare modul Divi are o listă lungă de setări de proiectare pe care le puteți utiliza pentru a schimba orice.

opțiune design modul imagine divi.png

Suprapunere imagine

Dacă această opțiune este activată, o culoare și o pictogramă de suprapunere vor fi afișate atunci când un vizitator trece deasupra imaginii.

Suprapunere pictogramă color

Aici puteți seta o culoare personalizată pentru pictograma suprapunere

Acoperiți culoarea suprapusă

Aici puteți defini o culoare personalizată pentru suprapunere.

Pictogramă de supraviețuire

Aici puteți defini o pictogramă personalizată pentru suprapunere.

Eliminați spațiul de sub imagine

Această opțiune afectează imaginile numai atunci când acestea sunt ultimul modul dintr-o coloană. Când această opțiune este activată, distanța dintre partea de jos a imaginii și secțiunea următoare este eliminată, permițând imaginii să încadreze partea de sus a următoarei secțiuni a paginii.

Aliniere imagine

Aici alegeți direcția în care imaginea dvs. plutește în coloană. Puteți pluti imaginea la stânga, la dreapta sau să o păstrați centrată.

Centrează întotdeauna imaginea pe mobil

Adesea, imaginile mici sunt mai plăcute pentru ochi pe dispozitivele mobile atunci când sunt centrate. Pe măsură ce coloanele eșuează, imaginile aliniate la stânga sau la dreapta în coloane mai mici devin orfane atunci când coloanele eșuează și ating o lățime de 100%. Activarea acestei coloane cu imagini forțate să se alinieze la centrul coloanei de pe mobil, fără a afecta alinierea imaginii de pe desktopuri.

Utilizați marginea

Activarea acestei opțiuni va plasa o margine în jurul modulului. Această margine poate fi personalizată utilizând următorii parametri condiționali.

Culoarea frontierei

Această opțiune afectează culoarea chenarului. Selectați o culoare personalizată din selectorul de culori pentru ao aplica la bordura dvs.

Lățimea frontierei

În mod implicit, marginile au o lățime de 1 pixel. Puteți crește această valoare trăgând glisorul de gamă sau introducând o valoare personalizată în câmpul de introducere din dreapta glisorului. Unități de măsură personalizate acceptate, ceea ce înseamnă că puteți schimba unitatea implicită de la „px” la altceva precum em, vh, vw etc.

Stilul de frontieră

Bordurile acceptă opt stiluri diferite: solid, punctat, punctat, dublu, șanț, creastă, suprapunere și start. Selectați stilul dorit din meniul derulant pentru a-l aplica la chenar.

Lățimea maximă a imaginii

În mod implicit, lățimea maximă a imaginii este setată la 100%. Aceasta înseamnă că imaginea va fi afișată la lățimea sa naturală, cu excepția cazului în care lățimea imaginii depășește lățimea coloanei părinte, caz în care imaginea va fi limitată la 100% din lățimea coloanei. Dacă doriți să limitați în continuare lățimea maximă a imaginii, puteți face acest lucru introducând valoarea lățimii maxime dorite aici. De exemplu, o valoare de 50% ar limita lățimea imaginii la 50% din lățimea coloanei părinte.

Forțați toată lățimea

Implicit, imaginile sunt afișate la lățimea lor nativă. Cu toate acestea, puteți alege să forțați imaginea să se extindă pe întreaga lățime a coloanei părinte activând această opțiune.

Marja personalizata

Marja este spațiul adăugat în exteriorul modulului dvs., între modul și următorul element de deasupra, dedesubt sau la stânga și la dreapta acestuia. Puteți adăuga valori de marjă personalizate la oricare dintre cele patru laturi ale modulului. Pentru a elimina marja personalizată, eliminați valoarea adăugată din câmpul de introducere. În mod implicit, aceste valori sunt măsurate în pixeli, dar puteți introduce unități de măsură personalizate în câmpurile de intrare.

Opțiuni avansate ale modulului de imagine

Î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 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 avansată modul imagine.png

Cod CSS

Introduceți un ID CSS opțional 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 utilizate în tema copilului Divi sau în foaia de stil CSS personalizată pe care o adăugați la pagina dvs. sau la site-ul dvs. web utilizând opțiunile temei Divi sau setările paginii Divi Builder.

CSS personalizate

CSS personalizat poate fi, de asemenea, aplicat modulului și oricărui intern al modulului. În secțiunea CSS personalizată, veți găsi un câmp de text în care puteți adăuga foi de stil CSS personalizate direct la fiecare element. Intrările CSS din aceste setări sunt deja înfășurate în etichetele de stil. Deci, introduceți regulile CSS separate prin punct și virgulă.

Animaţie

Utilizați acest meniu derulant pentru a specifica animația de încărcare leneșă pentru imaginea dvs. Puteți alege ca imaginea să apară din dreapta, stânga, jos sau sus.

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 de pe pagină.

Text alternativ de imagine

Textul alternativ oferă toate informațiile necesare dacă imaginea nu se încarcă, nu se afișează corect sau în orice altă situație în care un utilizator nu poate vedea imaginea. De asemenea, permite ca imaginea să fie citită și recunoscută de motoarele de căutare.

[vc_row center_row = "da"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expanded "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DESCARCĂ TEMA DIVI [/ vcex_button] [/ width»_column_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right" =" TEMP D FA-DOWNLOAD DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Alte tutoriale Divi

%d bloggerilor le place această pagină: