5 modele de înscriere prin e-mail pe care le puteți crea cu modulul de înscriere prin e-mail Divi

Cu toții iubim noii abonați la lista noastră de e-mailuri. Și una dintre principalele modalități de a obține noi abonați este de a oferi vizitatorilor dvs. un formular de înscriere prin e-mail bine conceput. De aceea, în acest tutorial, vă voi arăta cum să realizați cinci modele diferite cu modulul de înscriere prin e-mail Divi pentru a vă stimula imaginația cu privire la ceea ce este posibil cu acest modul puternic și flexibil.

Trage cu ochiul

Iată o previzualizare a celor cinci modele Divi Email Opt-in Module pe care le vom aborda astăzi.

Opt-in # 1 Shadow Stacks

Începeți să proiectați # 1

# 2 Opt-in mare și minim

Începeți să proiectați # 2

# 3 Skin-Opt-in

Începeți să proiectați # 3

# 4 Înscrierea ofertei de carte

Începeți să proiectați # 4

# 5 Înscriere cadru decupat

Începeți să proiectați # 5

Ce trebuie să începeți

Abonați-vă la canalul nostru Youtube

Pentru acest tutorial, tot ce veți avea nevoie este Divi. Vom construi fiecare dintre ele de la zero, astfel încât să nu mai avem nevoie de un aspect prefabricat. Cu toate acestea, voi folosi câteva imagini din unele dintre pachetele noastre de aspect, dar vă puteți folosi propriile dvs., dacă doriți.

De asemenea, este important să știți că nu veți putea vedea câmpurile de formular optin de pe site-ul live până nu atribuiți un furnizor / listă de e-mail modulului dvs. de înscriere a e-mailului. Puteți face acest lucru în setările de optimizare a e-mailului din Cont de e-mail.

Acum să trecem la acele modele!

Opt-in # 1 Shadow Stacks

Acest design adaugă două umbre de cutie la modulul de înscriere prin e-mail Divi pentru un efect unic de stivuire care face ca formularul să apară. Prima umbră de casetă este adăugată la modulul de înscriere prin e-mail și a doua umbră de casetă este adăugată rândului care are o dimensiune și un chenar personalizate pentru a-l face să funcționeze.

Iată cum se face.

Mai întâi creați o nouă secțiune cu un rând cu o coloană și adăugați modulul de înscriere a e-mailului pe rând.

Deschideți setările de înscriere la e-mail și actualizați următoarele:

Culoare fundal: # 1a0a38
Aspect: Corp în partea de sus, Forma în partea de jos
Câmpuri Colțuri rotunjite: 0 px
Orientare text: centru
Titlu Greutate font: ușor
Dimensiune text titlu: 36 px
Culoarea textului butonului: #ffffff
Culoarea fundalului butonului: # 00ac69
Lățimea chenarului butonului: 0 px
Raza chenarului butonului: 0 px
Căptușeală personalizată: 3vw sus, 3vw jos, 5vw stânga, 5vw dreapta

Acum, să adăugăm primul nostru strat de umbră de cutie în spatele modulului nostru de înscriere prin e-mail.

Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei cutiei: 25 px
Box Shadow Vertical Position: -25px
Culoare umbră: rgba (26,10,56,0.82)

Acum să adăugăm un mic fragment de CSS personalizat pentru a elimina umplutura din stânga care se adaugă în mod implicit. Accesați fila avansată și adăugați următorul CSS în Formular de înscriere.

padding-left: 0px !important;

Aceasta are grijă de setările modulului de înscriere prin e-mail. Acum, să ne edităm rândul. Deschideți setările rândului și actualizați următoarele:

Lățime personalizată: 600 px
Împletire personalizată: 25 px sus, 0 px jos, 25 px dreapta
Lățimea marginii inferioare: 25 px
Culoare margine inferioară: rgba (0,0,0,0)
Lățimea chenarului stâng: 25 px
Culoare margine stânga: rgba (0,0,0,0)

Acum putem adăuga umbra casetei la rând.

Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei cutiei: 50 px
Box Shadow Vertical Position: -50px
Puterea răspândirii umbrei cutiei: -25px
Culoare umbră: rgba (26,10,56,0.55)

Acum, să verificăm designul final.

# 2 Opt-in mare și minim

Acest design de înscriere prin e-mail este minim, curat și mare. Câmpurile de formular se scalează cu dimensiunea browserului, astfel încât să arate excelent pe toate dispozitivele. Și nu este prea mare că forțează utilizatorul să deruleze.

Iată cum să o faci.

Mai întâi creați o nouă secțiune cu un rând cu o coloană și adăugați modulul de înscriere a e-mailului pe rând.

Deschideți setările de înscriere prin e-mail și actualizați conținutul pentru a include textul titlului și subsolului.

Apoi actualizați fundalul cu o culoare sau o imagine închisă:

Culoarea fundalului: # 121212
Imagine de fundal: Aceasta este opțională. Folosesc unul din pachetul de aspect Podcast

Înainte de a continua cu fila de proiectare pentru mai multe personalizări, trebuie să facem loc pentru elementele mari de formă pe care le vom adăuga. Pentru aceasta, accesați setările rândului și actualizați următoarele:

Lățime personalizată: 100%

Sfat: utilizarea unei lățimi personalizate de 100% este o modalitate excelentă de a vă asigura că designul dvs. nu obține nicio marjă dreaptă sau stângă pe mobil. Dacă utilizați opțiunea „Faceți lățimea completă”, lățimea maximă va fi de 89%, astfel încât veți avea în continuare margini pe mobil.

Acum, săriți înapoi în Setările modulului de înscriere prin e-mail și actualizați următorul design:

Aspect: Corp în partea de sus, Forma în partea de jos

Culoare fundal câmp formular: rgba (0,0,0,0)
Câmpuri Colțuri rotunjite: 0 px
Câmpuri Lățimea marginii inferioare: 2 px
Câmpuri Culoare margine inferioară: #ffffff

Orientare text: centru

Titlu Font: Lato
Titlu Greutate font: ușor
Titlu Stil Font: TT
Dimensiune text titlu: 4vw
Înălțimea liniei de titlu: 1em

Culoarea textului câmpului: #ffffff
Font de câmp: Lato
Greutatea fontului de câmp: ușoară
Dimensiune text câmp: 3,5vw
Spațierea literelor de câmp: 0,1em
Înălțimea liniei de câmp: 1.3em

Spațierea literelor corporale: 0,5em

Dimensiune text buton: 4vw
Raza chenarului butonului: 0 px
Distanța dintre litere și butoane: 0,1em
Buton Font: Lato
Greutatea fontului: ușoară
Căptușeală personalizată: 10vw sus, 10vw jos, 10vw stânga, 10vw dreapta

Observați utilizarea unității de lungime vw pentru dimensiunea fontului combinată cu unitatea de lungime em pentru înălțimea liniei și spațierea literelor. Acest lucru permite ca textul și designul să se adapteze perfect atunci când vă reglați browserul.

Ultimul pas include câteva fragmente de CSS personalizate pentru a lustrui designul. Accesați fila avansată și adăugați următoarele CSS personalizate sub Câmpuri pentru formular de înscriere:

font-size: 3.5vw;

Acest lucru va permite dimensiunea textului atunci când tastați să se potrivească cu textul substituent din câmpurile formularului.

Apoi, să adăugăm o marjă personalizată deasupra butonului pentru a-i oferi un spațiu mic de respirație. Adăugați următoarele sub butonul Abonare:

margin-top: 3.5vw;

Acum, să verificăm designul final.

# 3 Skin-Opt-in

Următorul design va fi cu siguranță o soluție populară pentru companiile și blogurile care doresc să economisească un spațiu vertical pe postările lor sau pe paginile de destinație. Chiar dacă modulul de înscriere prin e-mail al Divi este cel mai bun pentru formulare verticale mai tradiționale, puteți converti formularul într-o formă orizontală slabă, cu doar un mic fragment de CSS.

Iată cum să o faci.

Creați o nouă secțiune cu un rând cu o coloană și adăugați modulul de înscriere a e-mailului pe rând.

Deschideți setările de înscriere la e-mail și actualizați conținutul pentru a include un titlu, dar nimic altceva.

Apoi actualizați designul cu un fundal și o culoare a butonului, după cum urmează:

Culoare fundal: # 54677d
Aspect: corp pe partea de sus, formă pe partea de jos
Orientare text: centru
Culoarea fundalului butonului: # b0c94f
Lățimea chenarului butonului: 0 px

Acum este timpul pentru CSS personalizat. Întrucât dorim designul subțire al formularului numai pe desktop (și nu pe mobil), vom adăuga CSS la pagină (în setările paginii) folosind un ID CSS personalizat pentru a viza stilul formularului.

Pentru a face acest lucru, accesați fila avansată și dați modulului de înscriere un ID CSS personalizat.

ID CSS: slab

Acesta va fi folosit pentru a viza acest formular cu CSS extern pe care îl vom adăuga la pagină.

Acum deschideți setările paginii Divi Builder și adăugați următorul CSS în fila Advanced.

@media (min-width: 980px){
#skinny.et_pb_newsletter .et_pb_newsletter_fields {
  flex-wrap: nowrap !important;
}
#skinny.et_pb_newsletter .et_pb_newsletter_fields>* {
  flex-basis: 23%;
}
}

#skinny .et_pb_newsletter_form {
  padding-left: 0px;
} 

Deoarece Divi folosește deja flex pentru a stiliza forma pe backend, acest CSS elimină proprietatea flex-wrap care determină alinierea verticală a câmpurilor formularului. Rezultatul este un aspect orizontal al câmpurilor de formular. Reglarea proprietății flex-base la 23% setează practic lățimea fiecărui câmp de formular. Și pentru că am adăugat CSS într-o interogare media, designul se va întâmpla doar pe desktop cu aspectul implicit al formularului afișat pe mobil.

Iată designul final.

# 4 Înscrierea ofertei de carte

Acest design încorporează câteva imagini în modulul de înscriere prin e-mail în scopul promovării unei oferte de carte gratuite pentru înscriere. Pentru a face acest lucru, tot ce trebuie să faceți este să adăugați o imagine utilizând editorul wysiwyg încorporat pentru a adăuga descriere și conținut de subsol. Este adevărat că puteți realiza același design combinând modulul de înscriere prin e-mail cu alte module într-un rând cu două coloane, dar m-am gândit că ar fi util să arăt cum să faceți totul în același modul.

Iată cum să o faci.

Creați o nouă secțiune cu un rând cu o coloană și adăugați modulul de înscriere a e-mailului pe rând.

Deschideți setările de înscriere la e-mail și rămâneți în fila conținut.

Sub descriere, scurtați textul implicit la doar câteva propoziții. Apoi adăugați o imagine din biblioteca dvs. media făcând clic pe butonul Adăugați suport media.

Doriți să vă asigurați că imaginea nu are mai mult de 200px lățime. Pentru acest exemplu, folosesc dimensiunea medie a imaginii.

Sub subsol, adăugați câteva propoziții pentru conținutul textului subsolului, apoi faceți clic pe butonul Adăugare suport media pentru a adăuga o imagine de logo sub text (acest lucru este opțional, desigur).

Pentru a vă asigura că imaginea este centrată, setați opțiunea de aliniere la centru atunci când adăugați imaginea din biblioteca media.

Acum sunteți gata să actualizați restul designului. Începeți prin a da modulului o imagine de fundal și un gradient de fundal deasupra imaginii pentru a face textul mai lizibil.

Imagine de fundal: [adaugă imagine]
Culoarea din stânga a gradientului de fundal: rgba (0,0,0,0,5)
Culoare dreaptă a gradientului de fundal: rgba (0,0,0,0,5)
Plasați gradientul deasupra imaginii de fundal: DA

Apoi actualizați restul designului după cum urmează:

Culoarea textului butonului: # 333333
Culoarea fundalului butonului: # ffcb7a
Lățimea chenarului butonului: 0 px
Distanța dintre litere și butoane: 5 px
Greutatea fontului: Ultra Bold
Stilul fontului: TT
Lățime: 700 px
Alinierea modulului: centru
Căptușeală personalizată: 3vw sus, 3vw jos, 3vw stânga, 3vw dreapta

Iată designul final.

# 5 Înscriere cadru decupat

Această tehnică simplă de proiectare este o modalitate excelentă de a oferi e-mail-ului dvs. un aspect unic. Trucul este să folosiți separatoare de secțiuni care au aceeași culoare ca fundalul secțiunii. Apoi, ajustând înălțimea separatoarelor, puteți suprapune formularul de înscriere prin e-mail pentru a tăia marginile într-un mod unic pentru un efect de încadrare frumos.

Iată cum să o faceți.

Creați o nouă secțiune cu un rând cu o coloană și adăugați modulul de înscriere a e-mailului pe rând.

Deschideți setările de înscriere la e-mail și dați modulului dvs. un gradient de fundal.

Culoarea din stânga a gradientului de fundal: # 8300e9
Culoarea dreaptă a gradientului de fundal: # 06c8ff
Tipul gradientului: radial
Direcție radială: stânga sus

Apoi actualizați restul designului după cum urmează:

Greutatea fontului titlului: Bold
Dimensiune text titlu: 36 px
Lățime: 70% (desktop), 100% (tabletă și smartphone)
Alinierea modulului: centru
Căptușeală personalizată: 6vw sus, 6vw jos, 6vw stânga, 6vw dreapta
Colțuri rotunjite: 50 px sus stânga, 0 px sus dreapta, 50 px jos dreapta, 0 px jos stânga

Salvați setările.

Apoi actualizați setările rândurilor cu o lățime personalizată.

Lățime personalizată: 100%

Acum suntem gata să personalizăm setarea secțiunii pentru a adăuga efectul cadrului tăiat cu acele separatoare de secțiune.

Deschideți setările secțiunii și actualizați următoarele:

Culoare fundal: # 222222

Stilul divizorului superior: vezi captura de ecran
Culoarea separatorului de sus: # 222222 (asigurați-vă că se potrivește cu culoarea de fundal a secțiunii)
Înălțimea separatorului superior: 12vw (desktop), 150 px (tabletă și smartphone)
Aranjament divizor superior: în partea de sus a conținutului secțiunii

Stilul divizorului inferior: vezi captura de ecran
Culoare divizor de fund: # 222222 (asigurați-vă că aceasta se potrivește cu culoarea de fundal a secțiunii)
Înălțimea divizorului inferior: 12vw (desktop), 150 px (tabletă și smartphone)
Repetare orizontală a compartimentului inferior: 0,8x
Flip divizor inferior: vertical și orizontal
Aranjamentul divizorului inferior: în partea de sus a conținutului secțiunii

Acum, să verificăm designul final.

Consultați postarea cu privire la crearea de modele de cadre unice pentru mai multe despre această tehnică de proiectare.

Gânduri finale

Aceste modele de înscriere prin e-mail sunt într-adevăr doar vârful aisbergului când vă gândiți la toate opțiunile de stil disponibile în cadrul Divi. Am păstrat în mod intenționat proiectele suficient de simple pentru a vă oferi linii largi de ceea ce puteți face. Simțiți-vă liber să explorați modele mai lustruite pe cont propriu adăugând noi fonturi, culori și efecte de plutire. Și nu uitați să vă distrați în acest proces.

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

Noroc!