Partajarea unei colecții de imagini pe Divi este întotdeauna o modalitate excelentă de a atrage vizual utilizatorii cu conținutul dvs. Modulul Divi's Gallery vă permite să creați și să organizați galerii oriunde pe site-ul dvs. web. Modulul de galerie de pe Divi Builder este disponibil în format grilă și glisor și acceptă galerii mari cu paginare.

galeria exemplu divi.png

Cum să adăugați un modul de galerie la pagina dvs.

Înainte de a putea adăuga un modul de galerie pe pagina dvs., trebuie mai întâi să intrați în 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 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.

divi builder

Odată ce ați intrat în Visual Builder, puteți face clic pe butonul plus 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. Avem tutoriale minunate despre utilizarea elementelor LIGNES și secțiuni de Divi.

galeria de imagini divi.png

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

Exemplu de caz de utilizare: adăugarea unei galerii de imagini cu lățime completă pentru a prezenta fotografia.

Adăugarea unei galerii la pagina dvs. de fotografie este o modalitate excelentă de a vă promova munca și de a vă crește credibilitatea față de clienți. În acest exemplu, vă voi arăta cum puteți utiliza modulul galerie pentru a adăuga o galerie de imagini cu un aspect al grilei care acoperă întreaga lățime a paginii. Imaginile nu au spațiu între ele, ceea ce îi oferă o prezentare practică și estetică.

crearea unei galerii de imagini divi.jpg

Și să nu uităm că fiecare imagine deschide un popup pentru a parcurge versiunile mai mari ale imaginilor din galerie.

lightbox divi galerie.gif

Folosind Visual Builder, adăugați o nouă secțiune sub secțiunea antet cu un rând de lățime completă sau lățime completă (1 coloană). Apoi adăugați modulul Galerie la rând.

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

Opțiuni de conținut

Imagini Galerie: Faceți clic pe galeria actualizată și selectați imaginile pe care doriți să le includeți în galerie. Numărul de imagini: 12 Afișați titlul și legenda: NU Afișați paginarea: NU

Opțiuni de proiectare

Aspect: Grilă Orientare miniatură: Peisaj Pictogramă zoom Culoare: #ffffff Culoare hover hover: rgba (0,0,0,0.48) Hover Pictogramă Selector: implicit

divi wordpress tutorial content section.png

Salvați setările

Acum nu mai rămâne decât să scapi de tot spațiul din jurul imaginilor. Întoarceți-vă și selectați setările rândului. În fila Proiectare, actualizați următoarele:

Faceți acest rând pe toată lățimea: DA
Folosiți lățimea personalizată a jgheabului: DA
Lățimea jgheabului: 1

Este important să ne amintim că valoarea numerică „1” pentru lățimea jgheabului este cu adevărat zero (deloc lățime).

configurația golului goutière.png

Salvați setările

Asta este!

Opțiunile pentru conținutul Galeriei

Î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ă.

divi modul galerie conținut.png

Imagini ale galeriei

Faceți clic pe butonul Actualizare ziua galeriei pentru a lansa biblioteca multimedia WordPress unde puteți alege imaginile pe care doriți să le afișați în galeria dvs.

Numărul de imagini

Setați numărul de imagini de afișat pe pagină. Când în galeria dvs. sunt incluse mai multe imagini decât cele permise pe fiecare pagină, paginarea va apărea sub imagini.

Afișați titlul și legenda:

Dacă a fost adăugat un titlu de imagine sau o legendă, acestea vor apărea sub imagine în galerie. Dacă doriți să dezactivați aceste elemente de text, puteți face acest lucru folosind această opțiune.

Vizualizați paginarea

Când în galeria dvs. sunt incluse mai multe imagini decât cele permise pe fiecare pagină, paginarea va apărea sub imagini. Dacă doriți să eliminați paginarea, puteți dezactiva această setare.

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 galeriei

Î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.

galeria modulului zona design.png

Dispoziţie

În mod implicit, galeriile sunt afișate ca o grilă de imagini. De asemenea, puteți alege să afișați galeria ca un glisor de imagine.

Miniatură orientare

Puteți alege să aveți imaginile din galeria dvs. în format portret sau peisaj. Dacă schimbați modul, poate fi necesar regenerează-ți miniaturile .

Pictograma de culoare zoom

Când treceți cu mouse-ul peste un element din podul Galeriei, apare o pictogramă de suprapunere. Puteți regla culoarea utilizată din această pictogramă folosind selectorul de culori din această setare.

Plasați cursorul pe culoarea suprapunerii

Când treceți cu mouse-ul peste un element din podul Galeriei, apare o culoare suprapusă în partea de sus a imaginii și sub textul și pictograma titlului portofoliului. În mod implicit, se utilizează o culoare albă semitransparentă. Dacă doriți să utilizați o culoare diferită, puteți regla culoarea folosind selectorul de culori din această setare

Pictograma selectorului de suprasolicitare (Hover)

Aici puteți alege o pictogramă personalizată pentru a fi afișată atunci când un vizitator trece deasupra articolelor din galerie din modul.

Culoarea textului

Aici puteți alege dacă textul dvs. trebuie să fie deschis sau întunecat. Dacă lucrați pe un fundal întunecat, textul dvs. ar trebui să fie ușor. Dacă fundalul dvs. este deschis, textul dvs. ar trebui să fie întunecat.

Fonturi de titlu

Puteți modifica fontul textului titlului selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi grozave alimentate de Google Fonts. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiuni aldine, cursive, cu majuscule și cu subliniere.

Dimensiunea fontului titlului

Aici puteți regla dimensiunea textului din titlu. Puteți trage glisorul de raza de acțiune pentru a mări sau micșora dimensiunea textului sau introduceți direct valoarea dimensiunii textului dorit în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Culoarea textului titlului

În mod implicit, toate culorile textului din Divi apar în alb sau gri închis. Dacă doriți să modificați culoarea textului titlului dvs., alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Spațierea literelor de titlu

Spațierea literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul titlului, utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Înălțimea liniei de titlu

Înălțimea liniei afectează spațiul dintre fiecare linie a textului titlului dvs. Dacă doriți să măriți spațiul dintre fiecare linie, utilizați glisorul pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de introducere situat în dreapta cursorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Legenda font

Puteți modifica fontul textului subtitrării selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi grozave alimentate de Google Fonts. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiuni aldine, cursive, cu majuscule și cu subliniere.

Dimensiunea fontului legendă

Aici puteți regla dimensiunea textului subtitrării. Puteți trage glisorul de gamă pentru a mări sau micșora dimensiunea textului sau a introduce direct valoarea dimensiunii textului dorit în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Culoarea textului legendei

În mod implicit, toate culorile textului din Divi apar în alb sau gri închis. Dacă doriți să modificați culoarea textului subtitrării, alegeți culoarea dorită din selectorul de culori folosind această opțiune.

distanțarea literelor legende divi.png

Distanțarea scrisorilor legendei

Spațierea literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul subtitrării, utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Înălțimea liniei legendei

Înălțimea rândului afectează spațiul dintre fiecare rând al textului subtitrării Dacă doriți să măriți spațiul dintre fiecare rând, utilizați glisorul pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de intrare situat în dreapta cursorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

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 interval 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ă din „px” în 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.

Opțiuni avansate pentru modulul galeriei

Î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.

opțiunea avansată a modulului de galerie divi.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ă.

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ă.

[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

6 acțiuni
acțiune2
tweet
Registru4