Treci la conținutul principal

Cum se inserează formularele de abonament pe Gutenberg cu Divi

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]

Blocul Layout Divi deschide ușa către multe modalități practice de a integra caracteristicile puternice de design ale Divi Builder cu editorul de blocuri WordPress implicit (Gutenberg). Acest lucru vă permite să scrieți cea mai mare parte a conținutului postărilor de blog folosind interfața familiară a blocului Gutenberg, apoi să injectați machete Divi 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, minunat pentru a include ceva la fel de simplu și esențial ca un formular de abonament.

În acest tutorial, vom vedea cum să adăugați un formular de abonament la o postare pe blogul Gutenberg folosind blocul de aspect Divi.

Rezultat posibil

Rezultatul final 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 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.

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 !

Injectați o formă pe gutenberg

Și asta e tot!

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]

Injectați un modul formular divi

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 conținut fals la titlul și corpul postării folosind câteva blocuri de antet și paragrafe. Apoi adăugați o imagine selectată și alegeți „Fără bară laterală” pentru aspectul din 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 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 surprinde un potențial calificat care este evident interesat de conținutul postării.

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

Proiectați un nou design divi

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.

Alegeți aspectul divi

Apoi vom adăuga modulul Email Optin la una dintre coloane, vă las alegerea coloanei.

Modul de e-mail Optin divi

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.
Separator modul Divi
  • Lățimea elementului divizor: 40 px (sus și jos).

Vom adăuga acum pe coloana opusă a textului. Aici, veți utiliza text prompt pentru a determina vizitatorul să se aboneze.

Modul text Divi

Apoi, va trebui să efectuați diferite modificări:

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]

  • Textul fontului: Montserrat
  • Culoarea fontului: #FFF
  • Font Text Subtitrare H2: Montserrat
  • Subtitrare text Dimensiune H2: 2.5em
  • Subtitrare text H2 Culoare: #FFF
Personalizare titlu Divi

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!

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