Blocul Divi Layout deschide ușa către multe modalități convenabile de a integra funcțiile puternice de design ale Divi Builder cu editorul de blocuri implicit al WordPress (Gutenberg). Acest lucru vă permite să scrieți majoritatea cuprins a postării dvs. de blog folosind interfața de bloc Gutenberg familiară, apoi injectați machete Divi acolo unde este nevoie de design personalizat sau funcționalitate. Un bloc de aspect Divi poate include orice puteți crea în Divi Builder, dar este, de asemenea, grozav pentru a include ceva la fel de simplu și esențial ca un formă de abonament.
În acest tutorial, vom vedea cum să adăugați un formă abonament la o postare de blog Gutenberg folosind blocul de aspect Divi.
Rezultat posibil
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 postarea 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 !
Și asta e tot!
Să trecem la tutorial, bine?
Adăugați un modul de e-mail Optin la postarea dvs. de blog din 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 cuprins simulați titlul și corpul articolului folosind câteva blocuri de antet și paragrafe. Apoi, adăugați o imagine prezentată și alegeți „Fără bară laterală” pentru aspect în setările paginii Divi.
Adăugați un bloc de layout Divi online
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 vrem în zona de postare. cuprins de publicare. L-am putea adăuga undeva mai aproape de sfârșitul mesajului pentru a capta un client calificat care este evident interesat de conținutul mesajului.
Pentru a-l adăuga, plasați mouse-ul peste zona în care doriți să adăugați opțiunea de e-mail, apoi faceți clic pe pictograma albastră plus pentru a adăuga un bloc nou. În lista blocurilor contextuale, selectați blocul Divi Layout.
Creați un nou aspect în blocul de dispunere Divi
Odată selectat blocul de aspect Divi, vom avea opțiunea „Creați un aspect nou” sau „Încărcați din bibliotecă”. Deoarece trebuie să creăm opțiunea de e-mail de la zero, alegeți opțiunea „Creați un aspect nou”.
Proiectarea secțiunii
În editorul de aspect, putem începe să proiectăm opțiunea de e-mail pentru a fi inclusă în postarea noastră. Tot ceea ce proiectăm în acest editor va fi afișat în zona Divi Layout Block a postării.
Pentru a începe, deschideți deja setările secțiunii implicite.
Pentru aspect, vom alege un aspect cu două coloane.
Apoi vom adăuga modulul Email Optin la una dintre coloane, vă las alegerea coloanei.
Apoi, vom personaliza fundalul secțiunii. Puteți schimba oricând valorile pentru a vă face designul unic. Cu toate acestea, am folosit următoarele valori:
- Fundal: # ff6100
- Separator de sus și de jos: al 13-lea numărare de sus.
- Lățimea elementului divizor: 40 px (sus și jos).
Acum vom adăuga text în coloana opusă. Aici, veți folosi text de stimulare pentru a aduce vizitator pentru a va abona.
Apoi, va trebui să efectuați diferite modificări:
- Textul fontului: Montserrat
- Culoarea fontului: #FFF
- Font Text Subtitrare H2: Montserrat
- Subtitrare text Dimensiune H2: 2.5em
- Subtitrare text H2 Culoare: #FFF
Nu uitați să configurați sistemul de e-mail pe care îl veți utiliza. Trebuie să știți că Gutenberg este compatibil cu MailChimp.
Ultimele gânduri
Adăugarea unui e-mail optin la mesajul dvs. Gutenberg a devenit incredibil de ușoară 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!
