Crearea de postări de blog valoroase necesită timp și efort. Împreună cu găsirea celor mai bune subiecte pe care să le scrieți în nișa dvs., este de asemenea important să păstrați cititorii implicați și să le permiteți să găsească rapid informațiile pe care le caută.
Acum, o modalitate bună de a aborda acest tip de experiență a utilizatorului este să distribuiți o casetă rezumativă vizuală la sfârșitul postării dvs. pe blog, chiar înainte de ultimele gânduri.
Cu noile blocuri de aspect Divi, puteți crea acum fără efort o casetă rezumativă cu opțiunile integrate Divi. În acest tutorial, vă vom ghida prin proces și veți putea descărca gratuit fișierul JSON de aspect!
Să începem să recreăm!
Utilizați șablonul de publicare pentru al șaselea pachet tematic
Descărcați pachetul generator al șaselea temă
Caseta de rezumat pe care o vom recrea pe parcursul acestui tutorial se potrivește perfect cu șablonul de postare al șaselea temă Builder Pack gratuit. Accesațiarticol blog și descărcați întregul pachet.
Accesați Divi Theme Builder
Apoi mergeți la Divi Theme Builder.
Descărcați șablonul de publicare
Faceți clic pe pictograma din colțul din dreapta sus și descărcați șablonul de postare din Theme Building Pack. Asigurați-vă că modificați ulterior modificările aduse constructorului de teme.
Deschideți o publicație existentă Gutenberg sau creați-o pe una nouă
Acum, după ce ați adăugat șablonul de postare corespunzător, este timpul să creați caseta de rezumat. Deschideți sau creați o postare nouă utilizând Gutenberg.
Adăugați un rezumat al titlului H2
Spre sfârșitul postării blogului, vom adăuga un nou titlu H2.
Adaugă un nou bloc Divi online
În continuare vom adăuga un nou bloc de layout Divi.
Creați un aspect nou în interiorul blocului Divi
După ce ați adăugat blocul, veți avea două opțiuni. Alegeți să creați un aspect nou.
Setări secțiune
Culoare de fundal
În cadrul editorului de blocuri de layout Divi, veți observa o secțiune. Deschideți această secțiune și utilizați un fundal alb pentru aceasta.
- Culoare fundal: #FFFFFF
spaţierea
Comutați la fila de proiectare a secțiunii și adăugați valori de marjă și umplere personalizate.
- Marja superioară: 100px
- Marja stângă: -10% (birou), 0% (tabletă și telefon)
- Marja dreaptă: -10% (birou), 0% (tabletă și telefon)
- Garnitură superioară: 0px
- Garnitura de jos: 0px
frontieră
Adăugați, de asemenea, o rază de frontieră.
- Stânga jos: 16px
- Partea din dreapta jos: 16px
Cutie de umbră
Cu o umbră subtilă a cutiei.
- Cutie de umbră Box Box: 60px
- Forța de propagare a umbrei cutiei: 10px
- Culoare umbră: rgba (0,0,0,0,08)
Adăugați o linie nouă
Structura coloanei
Continuați să adăugați o nouă linie la secțiune utilizând următoarea structură a coloanei:
dimensionarea
Fără a adăuga încă un modul, deschideți setările rândului și lăsați rândul să ocupe întreaga lățime a containerului secțiunii.
- Utilizați o lățime personalizată de jgheab: Da
- Lățimea jgheabului: 1
- Egalizați înălțimile coloanei: Da
- Lățime: 100%
- Lățime maximă: 100%
spaţierea
Apoi îndepărtați din linie căptușeala implicită superioară și inferioară.
- Garnitură superioară: 0px
- Garnitura de jos: 0px
Setări pentru coloana 1
Culoare de fundal
Apoi, deschideți setările din coloana 1 și folosiți o culoare albă de fundal pentru asta.
- Culoare fundal: #FFFFFF
spaţierea
Adăugați, de asemenea, valori de umplere personalizate.
- Garnitură superioară: 70px
- Garnitura de jos: 70px
- Căptușire stânga: 70 px
- Căptușire dreapta: 70px
Cutie de umbră
Continuați adăugând o umbră de casetă subtilă cu o culoare implicită diferită și plasați cursorul în umbră.
- Cutie de umbră Box Box: 50px
- Culoare implicită a umbrelor: rgba (0,0,0,0)
- Plasați culoarea umbrei cu mouse-ul: rgba (0,0,0,0,15)
Treceți la scară de transformare
La plecare, dorim, de asemenea, să redimensionăm ușor coloana.
- Corect: 105%
- Scăzut: 105%
Plasați cursorul Z Index
Completați parametrii coloanei adăugând un index hover z.
- Hover Index Z: 11
Adăugați modulul text # 1 la coloană
Adăugați un număr în zona de conținut
Este timpul să adăugați module, începând cu un prim modul text. Adăugați un număr în casetă cuprins.
Fundal gradient
Apoi adăugați un fundal de gradient.
- Culoarea 1: # ff5e92
- Culoarea 2: # ffd4b6
- Direcția gradientului: 165deg
Setări text
Accesați fila de proiectare a modulului și modificați setările de text după cum urmează:
- Font text: Poppins
- Culoarea textului: #ffffff
- Dimensiunea textului: 26px
- Alinierea textului: centru
dimensionarea
Apoi alocați o lățime și o înălțime.
- Latime: 150px
- Înălțime: 150px
frontieră
Adăugați, de asemenea, o rază de frontieră.
- În stânga jos, în dreapta sus și în dreapta jos: 100 pixeli
Element principal CSS
Pentru a centra textul în containerul nostru, va trebui să adăugăm câteva linii de cod CSS la elementul modulului principal din fila avansată.
display: flex;align-items: center;justify-content: center;
Poziţie
Și vom încheia parametrii modulului prin repoziționarea modulului.
- Poziție: absolută
- Locație: stânga sus
Adăugați modulul text # 2 la coloană
Adăugați conținut H3
Să trecem la următorul modul de text. Adauga ceva cuprins H3 la alegere.
Setări text H3
Apoi modificați dimensiunea textului H3 al modulului.
- Titlu 3 Dimensiune text: 23px
spaţierea
De asemenea, modificați setările de spațiere.
- Marja superioară: 100px
- Marja de jos: 20px
Adăugați un modul de separare în coloană
vizibilitate
Următorul modul de care avem nevoie este un modul de separare. Asigurați-vă că este activată opțiunea „Afișați separatorul”.
- Afișare separator: Da
Setări de linie
Treceți la fila de proiectare a modulului și modificați setările rândului după cum urmează:
- Culoarea liniei: # ff5e92
- Stil de linie: solid
- Poziția liniei: ridicat
dimensionarea
Modificați de asemenea dimensiunea modulului.
- Greutatea separatorului: 2px
- Lățime: 20%
Adăugați modulul text # 3 la coloană
Adăugați conținut
Să trecem la următorul și ultimul modul de text. Adauga ceva cuprins de votre choix.
Coloana de clonare
După ce ați completat coloana și toate modulele, puteți clona întreaga coloană.
Schimbați culoarea de umbră a casetei implicite
Deschideți setările din coloana 2 și modificați culoarea implicită a umbrelor.
- Culoare umbră: rgba (0,0,0,0,06)
Modificați fundalul gradient al modulului text nr. 1
Deschideți primul modul de text din următoarea 2 coloană și schimbați fundalul de gradient.
- Culoare 1: # 7e5ce6
- Culoarea 2: # 25b8ee
Modificați chenarul modulului text nr. 1
Modificați de asemenea setările graniței modulului.
- Stânga sus, stânga jos și dreapta jos: 100 pixeli
Modificați poziția modulului text # 1
Și repoziționați modulul în fila avansată.
- Locație: dreapta sus
Schimbați culoarea separatorului
Continuați deschizând setările pentru modulul de separare. Schimbați culoarea liniei pentru a se potrivi noii scheme de culori.
- Culoarea liniei: # 7e5ce6
Schimbă tot conținutul
În cele din urmă, modificați întregul conținut al modulului din coloana 2.
Clonați întreaga secțiune de două ori
După ce ai terminat prima secțiune, o poți clona de două ori.
Modificați spațiul primei secțiuni duplicat
Deschideți setările din prima secțiune duplicată și modificați valorile marjei în consecință:
- Marja stângă: -5% (computer desktop), 0% (tabletă și telefon)
- Marja dreaptă: -5% (birou), 0% (tabletă și telefon)
Modificați spațiul celei de-a doua secțiuni duplicat
De asemenea, deschideți al doilea duplicat, ștergeți toate valorile marjei și adăugați în schimb o marjă inferioară.
- Marja de jos: 100px
Schimbă tot conținutul
În cele din urmă, modificați întregul conținut al modulului.
Salvați aspectul în biblioteca Divi pentru refolosire
Dacă intenționați să utilizați această casetă rezumativă în alte postări de blog, asigurați-vă că ați salvat-o în biblioteca Divi, astfel încât să o puteți accesa cu ușurință! Asta e !
studiu
Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.
Ultimele gânduri
În acest articol, v-am arătat cum să adăugați o casetă de rezumat la postarea dvs. Gutenberg cu noile blocuri de aspect ale Divi. Casetele de rezumat sunt o modalitate vizuală excelentă de a vă ajuta vizitatori pentru a găsi informațiile pe care le caută.
De asemenea, puteți descărca gratuit fișierul JSON pentru aspect! Dacă aveți întrebări, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.
