Când simplificați modul în care creați postări de blog pe dvs site-ul web, sunt șanse să doriți să includeți un CTA atractiv undeva în articolul dvs. Acum, cu noua integrare Gutenberg Layout Block de la Divi, puteți adăuga cu ușurință un nou bloc construit de Divi oriunde în postarea dvs. de blog Gutenberg. Acest lucru vă permite să păstrați cuprins postare generală pe blog în mediul Gutenberg, creând în același timp un CTA Divi personalizat folosind opțiunile încorporate Divi-s. Cel mai bun din ambele lumi! În acest tutorial, vă vom arăta cum să adăugați un bloc de aspect Divi CTA animat în linie la postarea dvs. Gutenberg. De asemenea, vom partaja gratuit fișierul JSON al blocului de aspect Divi CTA!
Să mergem.
Rezultat posibil
Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire asupra rezultatului pe diferite dimensiuni de ecran.
Importarea blocului de dispunere JSON
Descărcați aspectul în biblioteca Divi
Pentru a importa fișierul JSON pe care l-ați putut descărca mai sus, accesați biblioteca Divi din backend-ul tabloului de bord WordPress și faceți clic pe „Import și export”.
Apoi selectați fișierul JSON din folderul dvs. de descărcare și faceți clic pe „Importați machete Divi Builder”.
Adăugați un nou bloc Divi în interiorul Gutenberg
După ce aspectul dvs. a fost importat, puteți accesa mesajul dvs. Gutenberg și adăugați un nou bloc de design Divi.
Importați un fișier JSON din prezentările salvate
Apoi faceți clic pe „Încărcați din bibliotecă”, accesați „Aspectele dvs. salvate” și selectați aspectul pentru a importa blocul de aspect Divi CTA în postarea de pe blog. Asta e!
Să începem să recreăm!
Utilizați șablonul de publicare pentru al treilea pachet tematic
Utilizați al treilea pachet de teme Builder
Este timpul să începi să creezi de la zero! În primul rând, designul pe care îl recreăm corespunde celui de-al treilea pachet de creare a temelor care a fost publicat pe blogul Divi. Accesați articolul și descărcați fișierele JSON pentru acest pachet de creare a temei.
Accesați Divi Theme Builder
După ce ați descărcat cel de-al treilea pachet de creare a temelor, puteți accesa Divi Theme Builder.
Descărcați șablonul de publicare
Descărcați șablonul de postare Theme Builder Pack făcând clic pe pictograma din colțul din dreapta sus.
Apoi selectați șablonul de postare și faceți clic pe „Importați șabloane Divi Theme Builder”. Asigurați-vă că salvați modificările și în generatorul de teme. În acest moment, am atribuit șablonul de postare pe blog din pachetul de construire a temelor tuturor postărilor noastre.
Deschideți o publicație existentă Gutenberg sau creați-o pe una nouă
Următorul pas este să adăugați blocul de aspect Divi CTA la postarea noastră Gutenberg. Pentru aceasta, deschideți un articol existent sau creați unul nou.
Adaugă un nou bloc Divi online
Odată ajuns în mesaj, puteți adăuga un nou bloc de aspect Divi.
Creați un aspect nou în interiorul blocului Divi
Apoi, veți avea două opțiuni. Selectați opțiunea „Creați un aspect nou”.
Setări secțiune
spaţierea
Odată ajuns în editorul de blocuri de layout Divi, veți observa o secțiune. Deschideți această secțiune și adăugați valori de marjă personalizate pentru a crea spațiu în jurul containerului secțiunii.
- Marja superioară: 50px
- Marja de jos: 50px
- Marja stângă: -10%
- Marja dreapta: -10%
Adăugați linia # 1
Structura coloanei
Continuați să adăugați un nou rând utilizând următoarea structură a coloanei:
dimensionarea
Fără a adăuga mai multe module, deschideți parametrii liniei și măriți lățimea și lățimea maximă.
- Lățime: 100%
- Lățime maximă: 100%
Adăugați separatorul # 1 la coloană
vizibilitate
Este timpul să adăugați module, începând cu un modul de separare. Asigurați-vă că este activată opțiunea „Afișați separatorul”.
- Afișare separator: Da
Ligne
Treceți la fila de proiectare a modulului și modificați setările rândului după cum urmează:
- Culoarea liniei: # fc526e
- Stil de linie: solid
- Poziția liniei: ridicat
dimensionarea
Modificați de asemenea parametrii de dimensionare.
- Greutatea separatorului: 3px
- Lățime: 30%
- Alinierea modulului: dreapta
- Înălțime: 3px
Animaţie
Și modificați setările de animație în consecință:
- Stil de animație: Slide
- Direcția animației: stânga
- Durata animației: 2000ms
- Întârziere animație: 500 ms
- Intensitatea animației: 100%
- Opacitatea de pornire a animației: 0%
Adăugați divizorul # 2 la coloană
vizibilitate
Să trecem la următorul modul de separare. Din nou, asigurați-vă că opțiunea „Afișați separatorul” este activată.
- Afișare separator: Da
Ligne
Apoi accesați fila de proiectare a modulului și modificați setările rândului după cum urmează:
- Culoarea liniei: # e1e3e8
- Stil de linie: solid
- Poziția liniei: ridicat
dimensionarea
Apoi modificați parametrii de dimensionare a modulului.
- Greutatea separatorului: 3px
- Înălțime: 3px
spaţierea
Adăugați, de asemenea, valori de spațiere personalizate.
- Marja stângă: 10%
- Marja dreapta: -20%
Animaţie
Și completați parametrii modulului modificând parametrii animației după cum urmează:
- Stil de animație: Slide
- Direcția animației: stânga
- Durata animației: 2000ms
- Întârziere animație: 500 ms
- Intensitatea animației: 100%
- Opacitatea de pornire a animației: 100%
Puteți adăuga cât mai multe separatoare pe care doriți să le modificați animația.
Adăugați o linie # 2
Structura coloanei
Adăugați un alt rând la secțiune folosind următoarea structură a coloanei:
dimensionarea
Fără a adăuga mai multe module, deschideți parametrii liniei și modificați parametrii de dimensionare după cum urmează:
- Utilizați o lățime personalizată de jgheab: Da
- Lățimea jgheabului: 1
- Lățime: 70%
- Alinierea liniei: centru
Adăugați modulul text # 1 la coloană
Adăugați conținut H2
Apoi, adăugați un prim modul de text la coloana de rând cu cuprins H2 la alegere.
Setări text H2
Treceți la fila de proiectare și modificați setările de text H2 în consecință:
- Culoarea textului articolului 2: # fc526e
- Antetul 2 Dimensiunea textului: 28px
spaţierea
Apoi adăugați valori de umplere personalizate.
- Garnitură superioară: 50px
- Garnitura de jos: 50px
- Plăcuță stângă: 50px
frontieră
De asemenea, folosim o frontieră stângă.
- Lățimea marginii stângi: 2px
- Culoarea marginii stângi: # fc526e
Animaţie
Și completați parametrii modulului adăugând o animație personalizată.
- Stil de animație: Flip
- Regia animației: Centru
- Întârziere animație: 1500 ms
Adăugați modulul text # 2 la coloană
Adăugați conținut
Adăugați un alt modul de text chiar sub cel anterior cu cuprins de votre choix.
spaţierea
Treceți la fila de proiectare a modulului și modificați valorile de umplere în consecință:
- Garnitură superioară: 50px
- Garnitura de jos: 50px
- Căptușire dreapta: 50px
frontieră
Apoi adăugați un chenar superior și drept.
- Frontiera din dreapta și sus: 2 pixeli
- Culoarea marginii superioare și drepte: # fc526e
Animaţie
Și completați parametrii modulului modificând parametrii animației după cum urmează:
- Stil de animație: Flip
- Regia animației: Centru
- Întârziere animație: 1700 ms
Adăugați un modul buton la coloană
Adăugați o copie
Următorul și ultimul modul de care avem nevoie în acest rând este un modul buton. Adăugați o copie la alegere.
Setări buton
Comutați la fila de proiectare a modulului și modificați setările butonului după cum urmează:
- Utilizați stiluri personalizate pentru buton: Da
- Dimensiunea textului butonului: 13px
- Culoarea textului butonului: #ffffff
- Gradient de culoare 1: # ff5b84
- Gradient de culoare 2: # f94857
- Tipul gradientului: liniar
- Direcția gradientului: 165deg
- Lățimea marginii butonului: 0px
- Raza de margine a butonului: 0px
- Spațiu de litere pentru butoane: 1px
- Font de buton: Montserrat
- Greutatea fontului pentru buton: Semi îndrăzneț
- Stilul fontului cu buton: cu majuscule
spaţierea
Apoi adăugați o umplere personalizată superioară și inferioară.
- Garnitură superioară: 16px
- Garnitura de jos: 16px
Animaţie
Și completați parametrii modulului adăugând următoarea animație:
- Stil de animație: Flip
- Întârziere animație: 1900 ms
Clonați linia nr. 1 și așezați-o în partea de jos a secțiunii
După ce ai terminat prima și a doua linie, poți clona prima linie și așezați duplicatul în partea de jos a secțiunii.
Schimbați ordinea separatoarelor
Schimbați locurile pentru primul și ultimul modul de separare.
Ultimele gânduri
În acest articol, v-am arătat cum să profitați de noua integrare Gutenberg de la Divi și să adăugați un bloc animat de prezentare Divi CTA în postarea dvs. de blog Gutenberg. Aceasta este o modalitate excelentă de a evidenția apelul la acțiune la alegere în timp ce vizitatori citește conținutul articolului tău de pe blog.
