Cum să proiectezi o secțiune de abonament atractivă pentru orice tip de site web cu Divi

Unul dintre principalele motive pentru care oamenii creează site-uri web este acela de a găsi o nouă modalitate de abordare a publicului țintă. Odată ce faceți primul pas și începeți să construiți un site web, începeți să vă întrebați exact cum veți putea lua legătura cu potențialii dvs. clienți. Unul dintre lucrurile care s-au dovedit a ajuta mulți proprietari de site-uri web este crearea listelor. Este vorba despre colectarea de adrese de e-mail de la vizitatori, transformarea lor în clienți potențiali (și în cele din urmă clienți) cu marketing prin e-mail.

Și odată cu crearea listelor vine crearea de secțiuni atractive de abonare pe site-ul dvs. web. Vrei ca secțiunea de abonare să fie atrăgătoare și, mai important, vrei ca secțiunea de abonare să se convertească. Pentru acest tutorial, am creat o secțiune uimitoare de abonare care vă va atrage, fără îndoială, atenția vizitatorului. Combinăm un design elegant cu argumente privind motivul pentru care să vă înscrieți pentru o listă de e-mailuri. În plus, vom împărtăși și trei palete de culori din care puteți alege în timp ce creați designul.

Să ajungem la asta!

Abonați-vă la canalul nostru Youtube

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire asupra rezultatului pe diferite dimensiuni de ecran.

Paleta de culori # 1

• Culoare # 1: rgba (79,35,255,0,88)
• Culoare # 2: # e09900
• Culoare # 3: # 4f23ff

Paleta de culori # 2

• Culoare # 1: rgba (255,35,97,0.75)
• Culoare # 2: # e09900
• Culoare # 3: # d80e00

Paleta de culori # 3

• Culoare # 1: rgba (41,17,147,0,75)
• Culoare # 2: # 00ffd8
• Culoare # 3: # 291193

Abordare

Alegeți una dintre paletele de culori de mai sus (sau creați-vă propria dvs.) și utilizați aceste culori pe parcursul tutorialului. Ne vom referi la culoarea # 1, # 2 sau # 3 când folosim o culoare în setările noastre. De asemenea, facem ca modulul Abonare să se suprapună între două coloane și subliniem avantajele înregistrării pentru o listă de e-mailuri.

Recreați secțiunea Abonare

Adăugați o secțiune nouă

Divizor de top

Deschideți pagina la care doriți să adăugați secțiunea de abonare și adăugați o nouă secțiune standard. Deschideți imediat setările secțiunii dvs. și adăugați următorul separator superior:

• Stil divizor: Găsiți în listă
• Culoare divizor: #FFFFFF
• Înălțimea împărțitorului: 200 px
• Flip divizor: vertical

Separator inferior

Adăugați același tip de divizor în partea de jos a secțiunii:

• Stil divizor: Găsiți în listă
• Culoare divizor: #FFFFFF
• Înălțimea împărțitorului: 200 px
• Flip divizor: vertical

Spațiere

Deschideți apoi setările de spațiu și eliminați toate căptușirile implicite ale secțiunii dvs. adăugând „0px” la căptușeala superioară și inferioară.

Adăugați un rând nou

Structura coloanei

Acum că am terminat cu toate setările secțiunii, putem adăuga un rând nou. Alegeți următoarea structură de coloane pentru aceasta

Fundal de gradient

Deschideți setările de rând și continuați adăugând următorul fundal de gradient:

• Culoarea primului gradient: Culoarea # 1
• Culoare gradient secund: Culoare # 2
• Direcția gradientului: 123deg
• Plasați gradientul deasupra imaginii de fundal: Da

Imagine de fundal

Continuați adăugând o imagine de fundal la alegere. Această imagine de fundal se va afișa doar printr-un pic. Alegeți „Copertă” și ca dimensiune a imaginii de fundal.

Culoare de fundal Colum 2

Apoi, adăugați „rgba (255,255,255,0,87)” ca Culoare 2 Culoare de fundal.

Dimensionare

De asemenea, vom reduce spațiul dintre ambele coloane și vom face rândul să ocupe întreaga lățime a ecranului aplicând următoarele setări de dimensionare:

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da

Spațiere

Ultimul lucru pe care trebuie să-l faceți în cadrul setărilor rândului este să adăugați câteva umpluturi personalizate:

• Căptușeală superioară și inferioară: 0 px
• Coloana 1 Căptușeală superioară: 200 px
• Coloana 1 Căptușeală inferioară: 100 px
• Coloana 2 Căptușeală superioară: 300 px (desktop) 50 px (tabletă și telefon)
• Coloana 2 Căptușeală inferioară: 100 px (tabletă și telefon)
• Coloana 2 Căptușeala stânga și dreapta: 50 px

Adăugați Blurb Module # 1 la Coloana 1

Adăugați titlu Blurb

Acum să începem să adăugăm modulele noastre! Vom începe cu prima coloană adăugând un modul Blurb. Odată ce am terminat modificarea acelui modul Blurb, îi vom refolosi setările și pentru celelalte două. După ce adăugați un modul Blurb, dați-i un titlu.

Adăugați pictograma Blurb

Adăugați o pictogramă la modulul Blurb următor. Am folosit următoarea pictogramă pentru primul modul:

Setări pictograme

Schimbați aspectul pictogramei adăugând următoarele setări:

• Culoare pictogramă: #FFFFFF
• Plasarea pictogramelor: sus
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 43 px

Setări text titlu

Folosim doar un titlu blurb. De aceea va trebui să modificăm doar setările de text ale H4:

• Titlu Font: Yeseva One
• Alinierea textului titlului: centru
• Culoarea textului titlului: #FFFFFF
• Spațierea literelor de titlu: -1 px

Dimensionare

De asemenea, vom modifica lățimea modulului Blurb în funcție de diferitele dimensiuni ale ecranului:

• Lățimea conținutului: 150 px
• Lățime: 33% (desktop), 40% (tabletă), 60% (telefon)
• Alinierea modulului: centru

Spațiere

În cele din urmă, adăugați următoarea umplutură personalizată și la modulul Blurb:

• Căptușeală superioară și inferioară: 50 px

Clonați modulul Blurb de două ori și modificați modulul Blurb recomandat

Schimbați pictograma și conținutul

Acum puteți merge mai departe și puteți clona modulul Blurb de două ori. Păstrați-le pe toate în prima coloană. Pentru fiecare dintre noile module Blurb, continuați și schimbați pictograma și titlul pentru a se potrivi cu mesajul pe care doriți să îl trimiteți.

Adăugați o culoare de fundal

Vom evidenția modulul Blurb din mijloc. Pentru a face acest lucru, vom începe prin a adăuga o culoare albă de fundal.

Schimbați pictograma și culoarea textului titlului

De asemenea, vom schimba culoarea pictogramei și titlul H4 la „# 000000”.

Adăugați colțuri rotunjite

Apoi, vom adăuga „5px” la fiecare dintre colțurile din setările Border.

Box Shadow

Nu în ultimul rând, vom adăuga un pic de adâncime utilizând prima opțiune umbră de casetă.

Adăugați modulul de text nr. 1 la Colum 2

Setări text

Să trecem la a doua coloană! Primul modul de care avem nevoie este un modul de text. După ce ați adăugat conținutul, aplicați următoarele setări de text:

• Font text: Yeseva One
• Culoarea textului: # 000000
• Dimensiune text: 54 px
• Înălțimea liniei de text: 1em

Adăugați modulul de text nr. 2 în coloana 2

Spațiere

Chiar sub acel modul de text, vom adăuga un alt modul de text pentru descriere. După ce ați adăugat conținutul, adăugați „20 px” la marginea de sus.

Adăugați modulul Optin de e-mail în coloana 2

Culoare de fundal

Următorul modul pe care va trebui să îl adăugăm este un modul Optin de e-mail. După ce îl adăugați, continuați și schimbați culoarea de fundal în „rgba (255,255,255,0)”.

Cont de email

Adăugați contul de e-mail urmând să alegeți furnizorul de servicii ales.

Câmpuri

Continuați deschizând setările Câmpului și dezactivați câmpurile Prenume și Nume.

Setări de câmp

Vom modifica și setările de câmp. Eliminați colțurile rotunjite adăugând „0px” la fiecare colț. Adăugați și prima opțiune umbră a casetei.

Setări buton

Apoi, modificați aspectul butonului:

• Culoarea textului butonului: #FFFFFF
• Culoare fundal buton: Culoare # 3
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 0 px
• Buton Font: Yeseva One
• Afișează pictograma buton: Da
• Culoare pictogramă buton: #FFFFFF
• Plasare pictogramă buton: stânga
• Afișați pictograma doar pe Hover pentru buton: Nu
• Box Shadow: Selectați prima opțiune

Spațiere

În cele din urmă, faceți ca modulul Abonare să se suprapună ambelor coloane utilizând următoarele setări de spațiere:

• Marja superioară: 20 px (desktop), 0 px (tabletă și telefon)
• Marja stângă: -60% (desktop și tabletă), 0 px (telefon)
• Marja dreaptă: 60% (desktop), 50% (tabletă), 0 px (telefon)

Adăugați modulul Social Media Follow în Colum 2

Adăugați câte rețele sociale doriți

Nu în ultimul rând, vom adăuga un modul Social Follow Follow. Continuați și adăugați rețelele sociale pe care doriți să le apăreați.

Colturi rotunjite

După ce ați adăugat toate rețelele sociale, adăugați „50 px” la fiecare dintre colțurile din setările Border.

Spațiere

De asemenea, vom împinge modulul în jos adăugând „50px” la marginea de sus.

Schimbați individual culoarea de fundal a fiecărei rețele sociale

Nu în ultimul rând, schimbați culoarea de fundal a fiecăreia dintre rețelele sociale în mod individual la „# 000000”.

previzualizare

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Gânduri finale

Secțiunile de abonare sunt o parte importantă a site-ului dvs. web. Vă ajută să creați liste de e-mailuri, să activați marketingul prin e-mail și să transformați clienții potențiali în vizitatori într-o chestiune de timp. În această postare, v-am arătat cum să creați o secțiune uimitoare de abonare care să se potrivească cu orice tip de site web de acolo. Am combinat utilizarea unui design superb cu punerea avantajelor înscrierii acolo. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!