Divi facilitează adăugarea de imagini oriunde blogul tău. 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 acestora va fi ajustată pentru a se potrivi.
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 Builder. Odata ce Divi tema instalat pe site-ul dvs., 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 îți răsfoiești site-ul în prim plan dacă ești conectat la tabloul de bord WordPress.
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.
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.
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.
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
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
Opțiuni avansate
Animație: De la dreapta la stânga
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).
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!
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ă.
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.
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.
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=”yes”][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”]DESCĂRCĂ TEMA DIVI [/vcex_button][/vc_column][vc_column] width=” 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=”fa fa-download”]DESCARCĂ ȘABLOANELOR DIVI[/vcex_button][/vc_column][/vc_row]
Alte tutoriale Divi
- site-uri web 5 pentru utilizare restaurant tematic Divi
- Cum să adăugați text pe un produs Divi WooCommerce
- Modificarea culorii meniului între paginile Divi
- Cum să personalizați grilele unui blog cu Divi
- Cum de a utiliza rolul editor Divi pe WordPress
- Cum se creează un glisor Divi pe ecran complet
- Modificarea culorii meniurilor între paginile Divi
- Caracteristici pe care probabil nu le cunoașteți despre Divi
- Cum se utilizează Divi Builder pe WordPress
- Cum se utilizează modulul de defilare video Divi
- Cum se utilizează modulul Divi Builder Flip
- Cum să adăugați un modul de mărturie pe Divi Builder
- Cum se utilizează modulul de text Divi
- Cum se creează un slider pe Divi
- Cum se editează un rol de utilizator Divi
- Cum se utilizează modulul Divi Social Media
- Cum se utilizează modulul magazin pe tema WordPress Divi
- Cum se utilizează modulul bara laterală Divi
- Cum se utilizează modulul de prețuri pentru divi
- Cum se utilizează modulul de titlu al publicațiilor Divi
- Cum se adaugă un modul video de Divi
- Cum să utilizați modulul de navigare pentru articole
- Cum se utilizează modulul de căutare Divi
- Cum se utilizează modulul portofel Divi
- Cum se utilizează modulul persoană pe Divi Builder
- Cum se utilizează modulul portofel cu filtrul Divi
- Modul de utilizare a modulului glisant cu lățime întreagă
- Cum se utilizează modulul de imagine Divi Builder
- Modul de utilizare a modulelor de navigație full-width din Divi Builder
- Cum se utilizează modulul galerie de imagini
- Modul de utilizare a modulului de carduri cu dimensiuni multiple de la Divi Builder
- Cum să utilizați modulul de portofoliu Full Width Divi
- Cum se utilizează modulul antet de Divi pentru lățimea completă
- Cum se utilizează modulul Counter Modul Divi
- Cum se utilizează glisorul de articole pe Divi Builder
- Cum se utilizează modulul Divi Email Optin
