Cum se adaugă un e-mail Divi Optin la postarea dvs. pe blogul Gutenberg

Blocul Layout Divi deschide ușa pentru multe modalități convenabile de a aduce caracteristicile puternice de design ale Divi Builder în editorul de blocuri implicit al WordPress (Gutenberg). Acest lucru vă permite să scrieți cea mai mare parte a conținutului postărilor dvs. pe blog folosind interfața familiară a blocului Gutenberg și apoi să injectați Divi Layouts acolo unde este nevoie de design personalizat sau funcționalitate. Un bloc de aspect Divi poate include orice puteți crea în cadrul Divi Builder, dar este, de asemenea, minunat pentru a include ceva la fel de simplu și esențial ca un e-mail Optin.

În acest tutorial, vom prezenta cum să adăugați un frumos Divi Email Optin la o postare de blog Gutenberg folosind blocul de aspect Divi.

Să începem!

Trage cu ochiul

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl 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!

Si asta e!

Să trecem la tutorial, nu-i așa?

Adăugarea unei opțiuni de e-mail Divi la postarea dvs. pe blogul Gutenberg

Creați sau editați o postare pe blog

Pentru a începe, trebuie să creăm o nouă postare pe blog sau să edităm una existentă. Pentru acest exemplu, să adăugăm un conținut fals la titlul și corpul postării folosind câteva blocuri de antet și paragraf. Apoi adăugați o imagine prezentată și alegeți „Fără bară laterală” pentru aspectul paginii din Setările paginii Divi.

Adăugați un bloc de aspect Inline Divi

Odată ce ați creat cea mai mare parte a postării, tot ce trebuie să facem este să adăugăm un nou bloc de aspect Divi oriunde dorim în zona de conținut a postării. L-am putea adăuga undeva mai aproape de sfârșitul postării pentru a capta un potențial calificat care este evident interesat de conținutul postării.

Pentru a-l adăuga, plasați cursorul peste zona în care doriți să adăugați opțiunea de e-mail și apoi faceți clic pe pictograma albastră plus pentru a adăuga un bloc nou. În lista de blocuri pop-up, selectați blocul Divi Layout.

Construiți un aspect nou în cadrul blocului de aspect Divi

După ce a fost selectat blocul de aspect Divi, vom avea opțiunea de a „Construi un aspect nou” sau „Încărcați din bibliotecă”. Deoarece trebuie să construim opțiunea de e-mail de la zero, alegeți opțiunea „Construiți un aspect nou”.

Proiectarea secțiunii

În editorul Layout Block, putem începe să proiectăm opțiunea de e-mail pentru a fi inclusă în postarea noastră. Orice proiectăm în acest editor va fi afișat în zona Bloc de aspect Divi a postării.

Pentru început, deschideți setările secțiunii din secțiunea implicită deja acolo.

Gradient de fundal

Apoi adăugați un gradient de fundal după cum urmează:

• Culoarea din stânga a gradientului de fundal: # ff9945
• Culoare dreaptă a gradientului de fundal: # f86a4c

Divizoare

Apoi, accesați fila de proiectare și un separator de secțiune de sus și de jos, după cum urmează:

• Stilul divizorului superior: vezi captura de ecran
• Culoarea separatorului superior: # f86a4c
• Reparare orizontală a separatorului superior: 0,8x

• Stilul divizorului inferior: vezi captura de ecran
• Culoare divizor inferior: # ff9945
• Repetare orizontală a compartimentului inferior: 0,8x
• Flip divizor inferior: orizontal și vertical

Marja și frontiera

După ce separatoarele sunt la locul lor, acordați secțiunii o mică marjă deasupra și dedesubt și apoi terminați-o cu un chenar și o animație după cum urmează:

• Marja: 20 px de sus, 20 px de jos
• Colțuri rotunjite: 30 px
• Lățimea chenarului: 2 px
• Culoare margine: # ff9945
• Stil de animație: Flip

Adăugați o coloană și setați lățimea rândului

Acum că secțiunea este completă, adăugați o structură cu o coloană la rând.

Apoi actualizați setările rândului după cum urmează:

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

Construiți opțiunea de e-mail

Adăugați modulul Optin de e-mail

Apoi, adăugați un rând de opțiune de e-mail la rând.

E-mail Optin Content

Pentru setările de conținut pentru e-mail optin, actualizați următoarele:

• Titlu: „Obțineți sfaturi GRATUITE în fiecare săptămână!”
• Corp: [păstrați conținutul simulat implicit]
• Mailchimp List: [adăugați o listă]
• Utilizați câmpul cu nume unic: DA
• Folosiți culoarea de fundal: NU

E-mail Optin Design

Câmpuri

Treceți la fila Proiectare și proiectați câmpurile de optimizare a e-mailului, actualizând următoarele:

• Aspect: Corp în dreapta, Formă în stânga
• Culoarea fundalului câmpurilor: # f86a4c
• Culoare text câmpuri: #ffffff
• Fields Font: IBM Plex Sans
• Dimensiune text câmpuri: 18 px
• Câmpurile Spațierea literelor: 2 px
• Înălțimea liniei câmpurilor: 2em

Titlu

Actualizați setările pentru textul titlului după cum urmează:

• Font de titlu: IBM Plex Sans Condensed
• Titlu Greutate font: Semi Bold
• Culoarea textului titlului: #ffffff
• Dimensiune text titlu: 60 px (desktop), 30 px (telefon)
• Înălțimea liniei de titlu: 1.2em (desktop), 1.6 (telefon)

Buton

Pentru buton, actualizați următoarele:

• Utilizați stiluri personalizate pentru buton: DA
• Culoarea textului butonului: # ff9945
• Buton Gradient de fundal Culoare stânga: # ff9945
• Buton Gradient de fundal Culoare dreaptă: #ffffff
• Direcția gradientului: 90 grade
• Poziție finală: 34%
• Lățimea chenarului butonului: 0 px
• Distanța dintre litere și butoane: 2 px
• Buton Font: IBM Plex Sans
• Buton Font Greutate: Bold
• Stil Font Buton: TT
• Garnitura de butoane: 15 px sus, 15 px jos

Căptușeală

Și pentru o ultimă atingere, adăugați următoarea căptușeală:

• Căptușeală: 5% la stânga, 5% la dreapta

Rezultat final

Odată ce am terminat de proiectat aspectul în editorul Divi Layout, asigurați-vă și salvați aspectul. Apoi salvați postarea, astfel încât să puteți vedea o previzualizare a opțiunii de e-mail pe o pagină live. Iată cum arată.

Iată o ușoară animație a opțiunii de e-mail în timp ce derulați în jos postarea.

Gânduri finale

Adăugarea unei opțiuni de e-mail la postarea dvs. Gutenberg tocmai a fost uimitor de simplă cu Blocul de aspect Divi. Nu numai că puteți adăuga o opțiune de e-mail complet funcțională (și ușor de utilizat) în câteva secunde, dar puteți utiliza și Divi Builder pentru a adăuga un design personalizat, efecte de hover și animație. Toate acestea fără a fi nevoie să folosiți un plugin!

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!