Cu cât CTA este mai atractiv din punct de vedere vizual, cu atât este mai mare șansa ca rata de conversie să fie. Există multe modalități de a vă proiecta CTA-urile, dar în acest articol vă vom arăta cum să creați șabloane minunate de coloane CTA cu imagini semi-transparente și suprapuneri de coloane. Puteți găsi imaginile semi-transparente în folderul de descărcare de mai jos, dar nu ezitați să utilizați alte imagini. De asemenea, veți putea descărca gratuit fișierul JSON!
Să mergem.
previzualizări
Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra modului în care arată pe diferite dimensiuni de ecran.
Să începem să recreăm!
Adăugați o secțiune nouă
context
Începeți prin crearea unei pagini noi sau adăugarea unei noi secțiuni obișnuite la o pagină existentă. Apoi accesați setările secțiunii și adăugați un fundal de gradient.
- Fundal: gradient
- Gradient de culoare gradient: gri foarte deschis #efefef
- Culoarea de fundal doi: #ffffff alb
- Tipul gradientului: Radial
- Direcția radială: centru
- Poziția de pornire: 52%
- Poziția finală: 50%
spaţierea
Treceți la fila Proiectare și reglați umplerea în setările de spațiu.
- Căptușire de sus și de jos
- Birou: 0vw
- Tapițerie în ciorapi
- Tabletă + Telefon: 70vw
Adăugați o linie nouă
Structura coloanei
Continuați să adăugați un rând nou folosind următoarea structură a coloanelor:
dimensionarea
Apoi reglați lățimea și lățimea maximă a liniei.
- Lățime: 100%
- Lățime maximă 100%
Adăugați un modul de text
Adăugați H2 și conținut textual
Este timpul să adăugați module! Mai întâi, adăugați un modul de text și inserați câteva cuprins H2 și paragrafele la alegere.
Text
Treceți la fila de proiectare și stilizați textul după cum urmează:
- Textul fontului: Deschide Sans
- Alinierea textului: centru
- Culoarea textului: Verde #5bba1b
- Dimensiunea textului:
- Birou: 1.2vw
- Tabletă: 2.8vw
- Telefon: 3.6vw
- Spațierea literelor de text: 0.2vw
- Înălțimea liniei de text: 1.8em
Titlu 2 Text
După stilizarea textului paragrafului, stilează și textul H2.
- Secțiune: H2
- H2 Greutatea fontului: Doppio One
- H2 Aliniere text: centru
- Culoarea textului H2: #3d3d3d
- H2 Dimensiunea textului:
- Birou: 4.4vw
- Tabletă: 5.9vw
- Telefon: 6.9vw
spaţierea
Și adăugați puțin umplutură în partea de sus.
- Top placă: 212px
Adăugați un modul de divizare
vizibilitate
Sub modulul text, adăugați un modul de divizare și setați vizibilitatea la „Da”.
- Vizibilitate: da
Ligne
Schimbați apoi culoarea separatorului.
- Culoarea liniei: Gri închis #545454
dimensionarea
Acum, ajustați dimensiunea separatorului, astfel încât să pară mai mic.
- Greutatea separatorului: 4px
- Lățime: 9%
- Alinierea modulului: centru
spaţierea
Adăugați, de asemenea, o marjă de sus negativă.
- Marja superioară:
- Birou: -40px
- Tabletă + Telefon: -15px
Adăugați o linie nouă
Structura coloanei
Continuați adăugând un rând nou cu trei coloane de dimensiuni egale. Aceasta va fi baza pentru proiectarea coloanei CTA.
context
Înainte de a adăuga module, adăugați un gradient pe fundalul parametrilor liniei.
- Fundal: gradient
- Gradient de culoare de fundal 1: alb #ffffff
- Culoare de fundal gradient doi: transparent
- Tipul gradientului: Radial
- Centrul de direcție radială
- Poziția de pornire: 42%
- Poziția finală: 50%
dimensionarea
Acum, ajustați dimensiunea liniei.
- Lățime: 100%
- Lățimea maximă: 100%
spaţierea
Apoi accesați setările de spațiere și adăugați valori de umplere personalizate.
- tapițerie superioară: 22vw
- Garnitura de jos: 10vw
- Căptușire stânga și dreapta: 10vw
Setări coloană 1
context
Continuați prin deschiderea coloanei 1 și adăugarea unui fundal de gradient.
- Fundal: gradient
- Culoare fundal gradient: albastru #2a4eed
- Culoare de fundal gradient doi: albastru deschis #91f5f7
- Tipul gradientului: liniar
- Gradient Direcție: 38deg
- Poziția de pornire: 23%
frontieră
Apoi definiți colțurile rotunjite ale coloanelor în setările de bord.
- Colțuri rotunjite: 2vw la toate colțurile
Cutie de umbră
Adăugați și o nuanță de cutie subtilă.
- Box Shadow: A doua opțiune
- Umbra cutiei Poziție orizontală: 6px
- Box Shadow Poziție verticală: -10px
- Cutie Blur Force Blur: 50px
revarsarile
Asigurați-vă că revărsările coloanei sunt de asemenea vizibile.
- Depășire orizontală și verticală: vizibilă
Setări coloană 2
context
Accesați a doua coloană și adăugați următorul fundal de gradient:
- Fundal: gradient
- Culoarea unu gradient de fundal: #1ba038
- Gradient de fundal cu două culori: #c6f727
- Tipul gradientului: liniar
- Gradient Direcție: 38deg
- Poziția de pornire: 23%
frontieră
Adăugați, de asemenea, o rază de bord la coloană.
- Colțuri rotunjite: 2vw la cele patru colțuri
Cutie de umbră
Cu o nuanță subtilă de cutie.
- Box Shadow: A doua opțiune
- Umbra cutiei Poziție orizontală: 6px
- Box Shadow Poziție verticală: -10px
- Cutie Blur Force Blur: 50px
Transformator
Această coloană este puțin mai mare decât celelalte. Pentru a crea acest efect, vom ajusta setările de conversie a transformării pentru coloana 2.
- Transformator:
- Birou: -8vw, axa y
- Tablet + Telefon: 30vw, axa Y
revarsarile
De asemenea, faceți vizibile revarsările acestei coloane.
- Deborduri orizontale și verticale: vizibile
Setări coloană 3
context
Să trecem la ultima și ultima coloană! Adăugați un fundal de gradient.
- Fundal: gradient
- Culoarea de fundal cu un gradient: #f0562c
- Gradient de fundal cu două culori: #f1a526
- Tipul gradientului: liniar
- Gradient Direcție: 38deg
- Poziția de pornire: 23%
frontieră
Comutați la fila Proiectare și adăugați o rază de margine în fiecare colț.
- Colțuri rotunjite: 2vw pe toate colțurile.
Cutie de umbră
Adăugați și o nuanță de cutie.
- Box Shadow: A doua opțiune
- Umbra cutiei Poziție orizontală: 6px
- Box Shadow Poziție verticală: -10px
- Cutie Blur Force Blur: 50px
Transformator
Pe dimensiuni de ecran mai mici, va trebui să repoziționăm coloana folosind valori de conversie de transformare personalizate.
- Transformator:
- Tabletă + Telefon: 60vw
revarsarile
În cele din urmă, ajustați setările de preaplin.
- Deborduri orizontale și verticale: vizibile
Adăugați module de imagine
Importați o imagine semitransparentă decupată
După ce ați creat toți parametrii coloanei, este timpul să adăugați module. Adăugați un modul de imagine în coloana 1 și încărcați o imagine semi-transparentă la alegere. Puteți găsi imaginile pe care le-am folosit în dosarul zip pe care l-ați putut descărca la începutul acestui articol.
dimensionarea
Faceți modulul lățimea completă.
- Treceți la modul de lățime completă: Da
spaţierea
Apoi adăugați marja personalizată și valorile de completare.
- Marja superioară:
- Birou: -11vw
- Tabletă + Telefon: -24vw
- Căptușire la stânga și la dreapta:
- Birou: 5vw
- Tabletă + Telefon: 20vw
Transformați scara într-un plan
Adăugăm un efect subtil de plutire la imagine folosind opțiunea de transformare a scalei din setările de transformare.
- Transform Scale on Hover: 120% pe ambele axe.
Index Z
Pentru a vă asigura că imaginea apare în partea de sus a coloanei, măriți valoarea indexului z din fila Avansat.
- Index Z: 1
Duplicați și trageți module de imagine
Acum clonați modulul de imagine de două ori și plasați duplicatele în celelalte două coloane. Acest proces este mai ușor în modul cu fir.
- Începeți prin duplicarea modulului de două ori
- Apoi trageți noile module de imagine în coloanele 2 și 3.
- Descărcați diferite imagini
Adăugați module text
Adăugați conținut H3
Sub imaginea din coloana 1, adăugați un modul de text și inserați câteva cuprins H3 la alegere.
Titlu 3 Text
Comutați la fila de proiectare și aplicați un stil setărilor de text H3.
- Titlul textului: H3
- H3 Font: Doppio One
- H3 Greutatea fontului: îndrăzneț
- Aliniere H3: centru
- Culoare text H3: alb #ffffff
- H3 Dimensiunea textului:
- Birou: 1.8vw
- Tabletă: 5vw
- Telefon: 6vw
Duplică și trage module de text
Clonați modulul text de două ori și așezați duplicatele în cele două coloane rămase.
- Începeți prin duplicarea modulelor text de două ori.
- Apoi trageți-le sub modulele de imagine din coloanele 2 și 3.
- Schimba cuprins în fiecare nou modul de text
Adăugați module text
Adăugați conținut
Sub modulul de titlu, adăugați un nou modul de text. Adăugați conținut de paragraf în zona de conținut.
Text
Acum, stilează textul după cum urmează.
- Textul fontului: Deschide Sans
- Culoarea textului: alb #ffffff
- Dimensiunea textului:
- Birou: 0.6vw
- Tabletă: 2vw
- Telefon: 2.8vw
- Înălțimea liniei de text: 2.2em
spaţierea
Pentru a centra textul, reglați distanța modulului după cum urmează.
- Marja inferioară:
- Birou: 5vw
- Tabletă + Telefon: 10vw
- Căptușirea stânga și dreapta
- Birou: 5vw
- Tabletă + Telefon: 14vw
Duplică și trage module de text
Clonați modulul text de două ori și trageți duplicatele în cele două coloane rămase.
- Începeți prin duplicarea modulelor text de două ori
- Apoi așezați duplicatele în coloanele 2 și 3
- Modificați conținutul fiecărui duplicat
Adăugați module buton
Adăugați conținut
Să mergem la ultimul modul! Adăugați un modul buton la coloana 1 cu o copie la alegere.
Adăugați un link
Introduceți o legătură în opțiunile de link-uri ale modulului.
aliniere
Acum aliniați modulul buton.
- Aliniere: centru
Stiluri de buton
Apoi, apelați butonul după cum urmează.
- Dimensiunea textului butonului:
- Birou: 1vw
- Tabletă: 2vw
- Telefon: 3vw
- Culoarea textului butonului: albastru strălucitor #2a4eed
- Culoare fundal buton: alb #ffffff
- Raza marginii butonului: 50vw
- Font de buton: Double One
- Greutatea fontului: îndrăzneț
- Culoarea butoanelor: albastru strălucitor #2a4eed
spaţierea
Formați butonul și creați o suprapunere în partea de jos adăugând valori de marjă și umplere personalizate în setările de spațiere.
- Marja inferioară:
- Birou: -1.7vw
- Tabletă: -4vw
- Telefon: -6vw
- Tapițerie Top și Jos:
- Birou: 1vw
- Tabletă + Telefon: 3vw
- Căptușirea stânga și dreapta
- Birou: 4vw
- Tabletă + Telefon: 10vw
Cutie de umbră
Nu în ultimul rând, adăugați o nuanță de cutie subtilă butonului.
- Umbra cutiei: prima opțiune
- Umbra poziției orizontale a cutiei: 0px
- Umbra poziției verticală a cutiei: 2px
- Cutie Blur Force Blur: 50px
Duplică și trage modulul butoanelor
Ca și în cazul modulelor anterioare, clonați butonul de două ori și așezați duplicatele în celelalte două coloane ale liniei.
- Clonați modulul butoanelor de două ori
- Plasați duplicatele în coloanele 2 și 3
Butonul 2 Textul și culoarea pictogramei
Schimbați butonul și culoarea pictogramei modulului butonului în coloana 2.
- Culoarea textului butonului: Verde # 1ba038
- Culoare pictogramă: # 1ba038
Butonul 3 Textul și culoarea pictogramei
Faceți același lucru cu butonul din ultima coloană și ați terminat!
- Culoarea textului butoanelor: portocaliu #f0562c
- Culoare pictogramă: # f0562c
Pentru a termina
În acest articol, v-am arătat cum să utilizați imagini semi-transparente pentru a crea un design uimitor al coloanei CTA. Am folosit setările de depășire a coloanei Divi astfel încât imaginile și butoanele să se suprapună perfect. Încercați să utilizați acest design în următorul proiect Divi și spune-ne cum sta treaba în secțiunea de comentarii!
