Treci la conținutul principal

Cum să adăugați un bloc animat la articolul dvs. din Gutenberg

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

Când simplificați modul în care creați postări de blog pe site-ul dvs., există șanse mari să doriți să includeți un CTA captivant undeva în postarea dvs. Acum, cu noua integrare a blocului de aspect Gutenberg Divi, puteți adăuga cu ușurință un bloc Divi nou construit oriunde în postarea dvs. pe blogul Gutenberg. Acest lucru vă permite să păstrați conținutul general al postării de blog în mediul Gutenberg, în timp ce continuați să creați un CTA Divi personalizat utilizând 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 animat de aspect online Divi CTA la postarea dvs. Gutenberg. De asemenea, vom distribui 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.

Prezentare animație Divi

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

Import Divi

Apoi selectați fișierul JSON din folderul dvs. de descărcare și faceți clic pe „Importați machete Divi Builder”.

Importați json divi 1

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.

Adăugați un aspect 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!

Încărcați un aspect divi

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.

Împachetează tema word divi

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.

Meniu divi pentru constructorul de teme

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.

Portabilitatea modulului Divi

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.

Captură de ecran wordpress.go 2020.02.05 14 58 38

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.

Crearea publicației pe gutenberg

Adaugă un nou bloc Divi online

Odată ajuns în mesaj, puteți adăuga un nou bloc de aspect Divi.

Adăugați un 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”.

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

Construiți un nou aspect divi

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%
Configurați distanța dintre secțiuni pe divi

Adăugați linia # 1

Structura coloanei

Continuați să adăugați un nou rând utilizând următoarea structură a coloanei:

Alegeți o coloană divi

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%
Configurați dimensiunea liniei Divi

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
Afișați un separator divi

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
Configurați stilul separatorului divi

dimensionarea

Modificați de asemenea parametrii de dimensionare.

  • Greutatea separatorului: 3px
  • Lățime: 30%
  • Alinierea modulului: dreapta
  • Înălțime: 3px
Personalizați divizorul div

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%
Pornirea modulului separator animatin divi

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
Adăugați un nou separator divi

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
Adăugați o nouă linie divi

dimensionarea

Apoi modificați parametrii de dimensionare a modulului.

  • Greutatea separatorului: 3px
  • Înălțime: 3px
Divizorul divizor greutate

spaţierea

Adăugați, de asemenea, valori de spațiere personalizate.

  • Marja stângă: 10%
  • Marja dreapta: -20%
Configurați spațiul modulului separator divi

Animaţie

Și completați parametrii modulului modificând parametrii animației după cum urmează:

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

  • 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%
Personalizați separatorul de animație 2

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
Personalizarea dimensiunii liniei 2

Adăugați modulul text # 1 la coloană

Adăugați conținut H2

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

Adăugați text în coloana Divi

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
Secțiunea de text Divi

spaţierea

Apoi adăugați valori de umplere personalizate.

  • Garnitură superioară: 50px
  • Garnitura de jos: 50px
  • Plăcuță stângă: 50px
Personalizați secțiunea de text divi

frontieră

De asemenea, folosim o frontieră stângă.

  • Lățimea marginii stângi: 2px
  • Culoarea marginii stângi: # fc526e
Folosiți un chenar divi

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
Parametru text modul Divi

Adăugați modulul text # 2 la coloană

Adăugați conținut

Adăugați un alt modul text chiar sub cel precedent, cu conținutul ales.

Adăugați un nou text al modulului Divi

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
Configurați umplerea modulului de text divi

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.

Adăugați un buton divi

Setări buton

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

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

  • 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
Configurarea gradientului butonului Divi
  • 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
Personalizați stilul butonului divi

spaţierea

Apoi adăugați o umplere personalizată superioară și inferioară.

  • Garnitură superioară: 16px
  • Garnitura de jos: 16px
Configurați spațierea modulului butonului Divi

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
Bloc de dispunere DIV CTA

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 Divi Gutenberg și să adăugați un bloc de prezentare online și animat Divi CTA la postarea dvs. pe blogul Gutenberg. Aceasta este o modalitate excelentă de a evidenția îndemnul la alegere în timp ce vizitatorii citesc conținutul postărilor pe blog. 

Acest articol conține comentarii 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top
2 acțiuni
acțiune2
tweet
Registru