Cum să adăugați un bloc de aspect Divi CTA în linie și animație la postarea dvs. pe blogul Gutenberg

Când simplificați modul în care creați postări de blog pe site-ul dvs., sunt șanse mari să doriți să includeți un CTA atractiv undeva în postarea dvs. Acum, cu noua integrare a blocului de aspect Gutenberg Divi, puteți adăuga cu ușurință un bloc nou construit Divi oriunde în postarea dvs. pe blogul Gutenberg. Acest lucru vă permite să păstrați conținutul general al postărilor de blog în mediul Gutenberg, în timp ce construiți în continuare un Divi CTA personalizat utilizând opțiunile integrate 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 în linie și animat la postarea dvs. Gutenberg. Vom împărți și fișierul JSON al blocului de aspect Divi CTA gratuit!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați gratuit blocul de layout Inline & Animated Divi CTA

Pentru a pune mâinile pe secțiunile gratuite despre eroi, va trebui mai întâi să le descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Importul blocului de aspect JSON

Încă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 & Export”.

Apoi, selectați fișierul JSON din folderul de descărcare și faceți clic pe „Import Divi Builder Layouts”.

Adăugați un nou bloc Divi Block în Gutenberg Post

Odată ce aspectul dvs. a fost importat, puteți merge la postarea dvs. Gutenberg și puteți adăuga un nou bloc de aspect Divi.

Importați fișierul JSON din aspectele salvate

Apoi, faceți clic pe „Încărcare din bibliotecă”, navigați la „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 afișare a pachetului Third Theme Builder Pack

Descărcați pachetul Third Theme Builder

E timpul să începi să creezi de la zero! În primul rând, designul pe care îl recreăm se potrivește celui de-al treilea pachet de generatoare de teme lansat pe blogul Divi. Accesați postarea și descărcați fișierele JSON ale acestui pachet de generatoare de teme.

Accesați Divi Theme Builder

După ce ați descărcat al treilea pachet de generatoare de teme, puteți merge la Divi Theme Builder.

Încărcați șablonul de postare

Încărcați șablonul de postare al pachetului Generator de teme 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 pentru generatorul de teme Divi”. Asigurați-vă că salvați și modificările pentru generatorul de teme. În acest moment, am atribuit șablonul de postare pe blog al pachetului constructor de teme tuturor postărilor noastre.

Deschideți Postul Gutenberg existent sau creați unul nou

Următorul pas este adăugarea blocului de aspect Divi CTA la postarea noastră Gutenberg. Pentru aceasta, deschideți o postare existentă sau creați una nouă.

Adăugați un bloc Divi nou în linie

Odată ajuns în postare, veți putea adăuga un nou bloc de aspect Divi.

Construiți un aspect nou în interiorul blocului Divi

Apoi, veți primi două opțiuni. Selectați opțiunea „Construiți un aspect nou”.

Setări secțiune

Spațiere

Odată ajuns în editorul de blocuri de aspect Divi, veți observa o secțiune. Deschideți acea secțiune și adăugați câteva valori de marjă personalizate pentru a crea spațiu în jurul containerului secțiunii.

• Marja superioară: 50 px
• Marja inferioară: 50 px
• Marja stângă: -10%
• Marja dreapta: -10%

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândurilor și măriți lățimea și lățimea maximă.

• Lățime: 100%
• Lățime maximă: 100%

Adăugați divizorul # 1 în coloană

Vizibilitate

Este timpul să adăugați module, începând cu un modul divizor. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Linia

Treceți la fila de proiectare a modulului și modificați setările liniei după cum urmează:

• Culoare linie: # fc526e
• Stilul liniei: solid
• Poziția liniei: sus

Dimensionare

Modificați și setările de dimensionare.

• Greutatea divizorului: 3 px
• Lățime: 30%
• Alinierea modulului: dreapta
• Înălțime: 3 px

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: 2000 ms
• Întârziere animație: 500 ms
• Intensitate animație: 100%
• Animație Opacitate de pornire: 100%

Adăugați divizorul # 2 în coloană

Vizibilitate

Treceți la următorul modul divizor. Din nou, asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Linia

Apoi, accesați fila de proiectare a modulului și modificați setările liniei după cum urmează:

• Culoare linie: # e1e3e8
• Stilul liniei: solid
• Poziția liniei: sus

Dimensionare

Modificați apoi setările de dimensionare ale modulului.

• Greutatea divizorului: 3 px
• Înălțime: 3 px

Spațiere

Adăugați și câteva valori de spațiere personalizate.

• Marja stângă: 10%
• Marja dreapta: -20%

Animaţie

Și completați setările modulului modificând setările de animație după cum urmează:

• Stil de animație: Slide
• Direcția animației: Stânga
• Durata animației: 2000 ms
• Întârziere animație: 500 ms
• Intensitate animație: 100%
• Animație Opacitate de pornire: 100%

Adăugați divizorul # 3 în coloană

Vizibilitate

La următorul și ultimul modul divizor de care avem nevoie în acest rând. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Linia

Apoi, accesați fila de proiectare și modificați setările liniei după cum urmează:

• Culoare linie: # fc526e
• Stilul liniei: solid
• Poziția liniei: sus

Dimensionare

Modificați și dimensiunea modulului.

• Greutatea divizorului: 3 px
• Înălțime: 3 px

Spațiere

Împreună cu setările de spațiere.

• Marja inferioară: 100 px
• Marja stângă: -20%
• Marja dreapta: 10%

Animaţie

Și completați setările modulului modificând setările de animație.

• Stil de animație: Slide
• Direcția animației: Corect
• Durata animației: 2000 ms
• Intensitate animație: 100%
• Animație Opacitate de pornire: 100%

Adăugați rândul # 2

Structura coloanei

Adăugați un alt rând la secțiune folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 70%
• Alinierea rândurilor: centru

Adăugați modulul de text nr. 1 în coloană

Adăugați conținut H2

Apoi, adăugați un prim modul de text în coloana rândului cu un conținut H2 la alegere.

Setări text H2

Treceți la fila de proiectare și modificați setările de text H2 în consecință:

• Rubrica 2 Culoarea textului: # fc526e
• Rubrica 2 Dimensiune text: 28 px

Spațiere

Adăugați câteva valori de umplere personalizate în continuare.

• Căptușeală superioară: 50 px
• Căptușeală inferioară: 50 px
• Căptușeală stângă: 50 px

Frontieră

Folosim și o margine stângă.

• Lățimea marginii stânga: 2 px
• Culoare margine stângă: # fc526e

Animaţie

Și completați setările modulului adăugând o animație personalizată.

• Stil de animație: Flip
• Regia de animație: Centru
• Întârziere animație: 1500 ms

Adăugați modulul de text nr. 2 în coloană

Adauga continut

Adăugați un alt modul de text chiar sub cel anterior, cu un conținut la alegere.

Spațiere

Mutați pe fila de proiectare a modulului și modificați valorile de umplere în consecință:

• Căptușeală superioară: 50 px
• Căptușeală inferioară: 50 px
• Căptușeală dreaptă: 50 px

Frontieră

Adăugați o margine sus și dreapta în continuare.

• Marginea sus și dreapta: 2 px
• Culoare margine sus și dreapta: # fc526e

Animaţie

Și completați setările modulului modificând setările de animație după cum urmează:

• Stil de animație: Flip
• Regia de animație: Centru
• Întârziere animație: 1700 ms

Adăugați un modul buton în 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

Treceți la fila de proiectare a modulului și modificați setările butonului după cum urmează:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 13 px
• Culoarea textului butonului: #ffffff
• Culoare degrade 1: # ff5b84
• Culoare gradient 2: # f94857
• Tipul gradientului: liniar
• Direcția gradientului: 165 grade
• Lățimea chenarului butonului: 0 px

• Raza chenarului butonului: 0 px
• Distanța dintre litere și butoane: 1 px
• Buton Font: Montserrat
• Buton Font Greutate: Semi Bold
• Stilul fontului butonului: majuscule

Spațiere

Adăugați câteva căptușeli personalizate în partea de sus și de jos.

• Căptușeală superioară: 16 px
• Căptușeală inferioară: 16 px

Animaţie

Și completați setările modulului adăugând următoarea animație:

• Stil de animație: Flip
• Întârziere animație: 1900 ms

Clonați rândul 1 și plasați în partea de jos a secțiunii

După ce ați finalizat primul și al doilea rând, puteți clona primul rând și puteți plasa duplicatul în partea de jos a secțiunii.

Schimbați ordinea divizorului

Schimbați locurile pentru primul și ultimul modul divizor.

Schimbați spațiul divizorului # 1

Apoi, deschideți primul modul divizor din rândul dvs. și modificați setările de spațiere.

• Marja superioară: 100 px
• Marja stângă: 10%
• Marja dreapta: -20%

Schimbați spațiul divizorului # 2

Modificați și setările de spațiu ale celui de-al doilea modul divizor.

• Marja stângă: -20%
• Marja dreapta: 10%

Schimbați divizorul # 3 Dimensionare

Apoi, deschideți al treilea modul divizor și utilizați alinierea modulului din stânga în setările de dimensionare.

• Alinierea modulului: stânga

Eliminați întârzierea animației Divider # 3

Eliminați și întârzierea de animație a celui de-al treilea modul divizor și sunteți gata! După ce ați finalizat blocul de aspect Divi CTA, asigurați-vă că salvați modificările și vă actualizați postarea.

• Întârziere animație: 0 ms

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să profitați de noua integrare Gutenberg a lui Divi și să adăugați un bloc de aspect DIV CTA în linie și animat la postarea dvs. pe blogul Gutenberg. Aceasta este o modalitate excelentă de a vă evidenția CTA la alegere în timp ce vizitatorii vă citesc conținutul postărilor pe blog. Ați putut descărca și fișierul JSON al blocului de aspect Divi CTA gratuit! Dacă aveți întrebări, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos!

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.