Înainte de a putea adăuga un modul Rezumat la pagina dvs., trebuie mai întâi să accesați Divi Builder. 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ă. 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 face clic pe buton Utilizați Visual Builder când răsfoiți dvs site-ul web în amonte dacă sunteți conectat la tabloul de bord WordPress.

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.

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

Utilizați cazul pentru a enumera serviciile companiei pe pagina principală

Deoarece modulul Rezumat combină atât imagini cât și text pentru a prezenta anumite caracteristici, îl puteți utiliza pentru a adăuga o listă a serviciilor dvs. de afaceri la pagina dvs. de pornire. Modulul Blurb vă permite, de asemenea, să vă transformați imaginea / pictograma și titlul într-un link către pagina de servicii. Pentru acest exemplu, voi folosi modulul Blurb pentru a adăuga patru servicii recomandate la o pagină de pornire.

Pentru a adăuga cele patru Blurbs la pagina dvs., utilizați constructorul vizual pentru a adăuga o secțiune standard cu un rând cu patru coloane. Apoi adăugați un modul Blurb la prima coloană a rândului.

Actualizați setările Blurb cu următoarele:

Opțiuni de conținut

Titlu: [introduceți titlul serviciului]
Conținut: [introduceți o scurtă descriere a serviciului]
URL: [adăugați adresa URL la pagina de servicii]
Utilizați pictograma: DA
Pictogramă: [selectați o pictogramă care ilustrează serviciul dvs.]

Opțiuni de proiectare

Culoare pictogramă: # 42bb99 (faceți culoarea care completează designul site-ului)
Utilizați pictograma Dimensiune font: DA
Dimensiunea fontului pictogramei: 68 px (ajustează dimensiunea pictogramei)
Orientare text: centru -
Dimensiunea fontului capului: 24 px
Dimensiunea fontului: 18 px
Înălțimea liniei corpului: 1.5em

Acum primul tău text introductiv este terminat.

Acum duplicați modulul Rezumat pe care tocmai l-ați creat de trei ori și trageți fiecare dintre rezumatele duplicate pe celelalte trei coloane. Deoarece setările dvs. de design au fost integrate în modulele duplicate, tot ce trebuie să faceți este să modificați cuprins (antet, conținut, pictogramă, URL etc.) și modificați culorile pentru a le adapta la fiecare dintre serviciile dvs.

Opțiuni de conținut sumar

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

Titlu

Acordați textului un titlu care va apărea deasupra textului într-un stil de tip bold. Opțiunea URL aflată sub câmpul Titlu vă va permite să faceți din titlu un hyperlink.

Conținut

În acest câmp puteți introduce conținutul corpului textului. Blurb Text va acoperi, de asemenea, întreaga lățime a coloanei dvs. până la 550 px.

URL-ul

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

URL de deschidere

Aici puteți alege dacă linkul dvs. se va deschide sau nu într-o fereastră nouă.

Utilizați pictograma

Când utilizați Blurbs, puteți alege să utilizați o pictogramă sau o imagine cu textul dvs. Dacă selectați „Da” pentru opțiunea „Utilizați pictograma”, vi se vor oferi următoarele opțiuni pentru a vă personaliza pictograma. Dacă nu alegeți să utilizați o pictogramă, vi se va solicita să încărcați o imagine în schimb.

icoană

Dacă ați ales „Da” pentru setarea „Utilizați pictograma”, această opțiune va apărea. Această opțiune vă prezintă o listă de pictograme disponibile pe care le puteți utiliza împreună cu blurb-ul. Doar faceți clic pe pictograma pe care doriți să o utilizați și va apărea în textul dvs.

Imagine

Dacă nu ați ales să utilizați o pictogramă, această setare va apărea. Plasați aici o adresă URL validă sau alegeți / încărcați o imagine prin biblioteca media WordPress. Imaginile din modulul Rezumat apar întotdeauna centrate în coloanele lor și acoperă întreaga lățime a coloanei dvs. până la 550 px. Cu toate acestea, imaginea dvs. nu va fi niciodată mai mare decât dimensiunea inițială de încărcare. Înălțimea imaginii de prezentare este determinată de raportul de aspect al imaginii dvs. originale. Prin urmare, este recomandabil să plasați toate imaginile de prezentare la aceeași înălțime dacă le așezați una lângă alta.

Culoarea de fundal

Definiți o culoare de fundal personalizată pentru modulul dvs. sau lăsați necompletat pentru a utiliza culoarea implicită.

Imagine de fundal

Dacă este setată, această imagine va fi folosită ca fundal pentru acest modul. Pentru a elimina o imagine de fundal, trebuie doar să eliminați adresa URL din câmpul Setări. Imaginile de fundal vor apărea deasupra culorilor de fundal, ceea ce înseamnă că culoarea de fundal nu va fi vizibilă atunci când se aplică o imagine de fundal.

Admin Label

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țiuni de proiectare a modulului sumar

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

Culoarea pictogramei

Dacă ați ales „Da” pentru setarea „Utilizați pictograma”, această opțiune va apărea. Această opțiune vă permite să personalizați culoarea pictogramei. În mod implicit, pictogramele sunt setate la culoarea accentului temei dvs.

Pictograma cercului

Dacă ați ales „Da” pentru setarea „Utilizați pictograma”, această opțiune va apărea. Această opțiune vă permite să plasați pictograma într-un cerc colorat. Dacă selectați „da” pentru această setare, vi se vor oferi opțiuni suplimentare pentru a personaliza culoarea și marginea cercului dvs.

Culoarea cercului

Dacă ați ales „Da” pentru setarea „pictograma cercului”, această opțiune va apărea. Aici puteți alege o culoare pe care să o utilizați pentru cercul dvs. Această culoare este independentă de culoarea pictogramei selectate anterior. Pictograma dvs., în culoarea sa, va apărea într-un cerc cu culoarea selectată aici.

Afișați marginea cercului

Dacă ați ales „Da” pentru setarea „pictograma cercului”, această opțiune va apărea. Această opțiune vă permite să activați o margine pentru cercul dvs. Dacă această opțiune este selectată, va apărea o opțiune suplimentară pentru a selecta culoarea chenarului.

Culoarea de margine a cercului

Dacă ați ales „Da” pentru setarea „Afișați marginea cercului”, această opțiune va apărea. Aici puteți regla culoarea marginii cercului.

Plasare imagine / pictogramă

Aici poți alege locația imaginii/pictogramei tale. Poate apărea fie deasupra textului, fie în stânga textului. Prin plasarea imaginii/pictogramei în stânga textului, imaginea va fi mai mică decât dacă ar fi plasată deasupra.

Utilizați dimensiunea fontului pictogramei

Dacă această opțiune este activată, puteți introduce o dimensiune personalizată pentru pictograma afișată deasupra sau două în stânga blurbului.

Culoarea textului

Dacă textul dvs. este plasat pe un fundal întunecat, culoarea textului ar trebui să fie setată la „Întunecat”. În schimb, dacă blurb-ul dvs. este plasat pe un fundal deschis, culoarea textului ar trebui să fie setată la „Light”.

Orientarea textului

Acest meniu derulant vă permite să specificați orientarea textului pentru a fi justificat la stânga, centrat sau justificat la dreapta.

Font antet

Puteți modifica fontul antetului selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi minunate 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, majuscule și subliniate.

Dimensiunea fontului antetului

Aici puteți regla dimensiunea textului antetului. Puteți trage glisorul de interval pentru a mări sau micșora dimensiunea textului sau puteți 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 dimensiunea dvs. pentru a-i schimba tipul de unitate.

Culoare text antet

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

Spațierea literelor antet

Spațierea literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul antetului, utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea spațiului dorit în câmpul de intrare 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 dimensiunea dvs. pentru a-i schimba tipul de unitate.

Înălțimea rândului antet

Înălțimea rândului afectează spațiul dintre fiecare rând al textului antetului dvs. 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 din 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 dimensiunea dvs. pentru a-i schimba tipul de unitate.

Font corp

Puteți schimba fontul corpului selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi minunate 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, majuscule și subliniate.

Dimensiunea fontului corpului

Aici puteți regla dimensiunea textului corpului. Puteți trage glisorul de interval pentru a mări sau micșora dimensiunea textului sau puteți 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 dimensiunea dvs. pentru a-i schimba tipul de unitate.

Culoarea textului corporal

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

Spațierea literelor corporale

Spațierea literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă a textului corpului dvs., utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea spațiului dorit în câmpul de intrare 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 dimensiunea dvs. pentru a-i schimba tipul de unitate.

Înălțimea liniei corpului

Înălțimea liniei afectează spațiul dintre fiecare linie a textului corpului. Dacă doriți să măriți spațiul dintre fiecare linie, utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea spațiului dorit în câmpul de intrare 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 dimensiunea 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 gamă sau introducând o valoare personalizată în câmpul de introducere din dreapta glisorului. Acceptați unități de măsură personalizate, 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, incluzând: solid, punctat, punctat, dublu, groove, creastă, inserare și start. Selectați stilul dorit din meniul derulant pentru a-l aplica la chenar.

Lățimea maximă a imaginii

Aplicarea unei valori de lățime maximă aici va limita lățimea imaginii de prezentare. Acest lucru afectează doar blurbs-urile care nu sunt în modul pictogramă.

Marja personalizata

Marja este spațiul adăugat la 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 o marjă 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.

Garnitură personalizată

Împletirea este spațiul adăugat în interiorul modulului dvs., între marginea modulului și elementele sale interne. Puteți adăuga valori de umplere personalizate la oricare dintre cele patru laturi ale modulului. Pentru a elimina o marjă 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 Modul sumar

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

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 stiluri CSS personalizate. Puteți adăuga mai multe clase, separate printr-un spațiu. Aceste clase pot fi folosite în dvs Divi tema Child sau în CSS-ul personalizat pe care îl adăugați la pagina dvs. sau la dvs site-ul web folosind opțiunile temei Divi sau setările paginii Divi Builder.

CSS personalizate

CSS personalizat poate fi de asemenea aplicat 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ă.

Animație imagine / pictogramă

Aceasta controlează direcția animației de încărcare leneșă.

ALT text din imagine

Dacă nu ați ales să utilizați o pictogramă, această setare va apărea. Alt text furnizează orice informații necesare dacă imaginea nu se încarcă, este afișată 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.

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. Sperăm că v-am arătat cum să utilizați modulul rezumat pe Divi.