Cum să creezi un CTA unic cu modelul de fundal și opțiunile de mască Divi

Noul model de fundal și opțiunile de mască ale Divi facilitează crearea de secțiuni atrăgătoare și unice de îndemn (CTA) pe site-ul dvs. Puteți combina imagini, degrade, modele și măști cu o mulțime de opțiuni de personalizare pentru a crea modele de fundal unice, care vor atrage atenția vizitatorului.

În acest tutorial, vă vom arăta cum să creați o secțiune CTA unică cu noul model de fundal și opțiuni de mască Divi.

Să începem!

Trage cu ochiul

Iată o previzualizare a secțiunii CTA pe care o vom proiecta în acest tutorial.

De ce aveți nevoie pentru a începe

Înainte de a începe, instalați și activați Tema Divi și asigurați-vă că aveți cea mai recentă versiune a Divi pe site-ul dvs.

Să sărim înăuntru.

Cum să creezi un CTA unic cu modelul de fundal și opțiunile de mască Divi

Creați o pagină nouă cu un aspect prefabricat

Pentru tutorialul nostru, vom folosi un aspect prefabricat din biblioteca Divi. Pentru acest design, vom folosi pagina de destinație Ice Cream Shop din pachetul de layout Ice Cream Shop.

Creați o pagină nouă, adăugați un titlu, apoi selectați opțiunea Utilizați Divi Builder.

Vom folosi un aspect prefabricat din biblioteca Divi pentru acest exemplu, deci selectați Răsfoire layout-uri.

Căutați și selectați aspectul Ice Cream Shop Landing Page.

Selectați Utilizați acest aspect pentru a adăuga aspectul paginii dvs.

Acum suntem gata să ne construim designul.

Modificarea aspectului pentru modelul de fundal și masca

Vom modifica secțiunea CTA a lunii din acest aspect. Să facem câteva modificări aspectului nostru pentru modelul de fundal și designul măștii.

Setări rând

Deschideți Setări rând, apoi selectați Design.

Sub Dimensionare, egalizați înălțimile coloanei.

• Egalizare înălțimi coloane: da

Sub Spațiere, îndepărtați căptușeala superioară pentru a aduce conul în partea de sus a secțiunii.

• Umplutură de sus: 0px

Coloana 1 Setări

Sub fila Conținut pentru setările rândului, selectați setările Coloanei 1. Sub Fundal, ștergeți fundalul portocaliu.

Coloana 2 Setări

Acum, selectați setările Coloanei 2. Designul original are niște spații de care nu avem nevoie, așa că haideți să scăpăm de el. Sub Design, navigați la Spațiere și ștergeți umplutura de sus.

Apoi selectați Avansat și adăugați următorul CSS personalizat la Elementul principal, astfel încât textul nostru „aroma lunii” să fie centrat vertical.

margin:auto;

Secțiunea Setări

Deschideți secțiunea Setări. Sub Design, selectați Umplutură. Reglați căptușeala secțiunii astfel încât conul de sus să se alinieze cu partea de sus a paginii.

• Umplutură: 0px

Adăugarea unui model de fundal și a unei mască la secțiunea CTA

Acum că aspectul nostru a fost modificat, putem adăuga modelul și masca de fundal. Există nenumărate opțiuni pentru modele de fundal și măști cu noile opțiuni Divi, ceea ce înseamnă că puteți crea modele unice pentru secțiunea dvs. CTA cu doar câteva clicuri. Urmăriți pentru a afla cum să creați un fundal atrăgător cu aceste setări.

Setări de culoare de fundal, model și mască

Navigați la setările de fundal ale secțiunii.

Sub fila de culoare, adăugați un fundal portocaliu

• Culoare: #FFA256

Sub fila Model, setați forma și culoarea modelului.

• Forma: confetti
• Culoare: #FF7D14

Acum să adăugăm masca. Selectați fila mască, apoi adăugați setările după cum urmează:

• Forma: Blob de colț
• Culoarea măștii: #FFFFFF
• Transformarea măștii: orizontală
• Raport de aspect al măștii: Peisaj
• Dimensiune masca: capac

Ajustări de proiectare

Acum că fundalul nostru este la locul lui, să facem câteva ajustări finale ale designului.

Deschideți setările butonului „Achiziționare” și modificați alinierea în fila Design.

• Alinierea butoanelor: stânga

Schimbați culoarea de fundal a stării de trecere cu mouse-ul pentru butonul „Cumpărați”, astfel încât să iasă în evidență pe fundalul portocaliu.

• Fundalul butonului la trecerea cu mouse-ul: #FF7D14

De asemenea, vom ajusta aspectul rândurilor pentru a adăuga mai mult spațiu între fundalul portocaliu și secțiunea „Aromă lunii” din dreapta. Schimbați aspectul de la 1:1 la 3:2.

Și acum, designul desktopului este complet și ați învățat cum să creați o secțiune unică CTA cu modelul de fundal Divi și opțiunile de mască!

Faceți secțiunea CTA receptivă

Când secțiunea noastră CTA este vizualizată pe un telefon sau pe tabletă, conținutul din coloana 2 este stivuit sub coloana 1. Acest lucru poate cauza unele probleme de lizibilitate cu designul nostru. Să facem câteva ajustări pentru a optimiza conținutul și designul nostru pentru ecrane mai mici, folosind setările de răspuns încorporate ale Divi.

Deoarece dorim ca textul să apară înaintea butoanelor, copiați textul „Evidențiați aromă a lunii” în modulul de text „Ciocolata cu portocale din iulie”. Asigurați-vă că adăugați acest text doar la versiunile pentru telefon și tabletă.

• Schimbați textul „Orange Chocolate” la H3.

În continuare, vom face câteva modificări textului, astfel încât să iasă în evidență pe acest fundal. Accesați fila Design și faceți următoarele modificări:

• H2 (telefon și tabletă) Culoare text: #000000
• H2 (telefon și tabletă) Dimensiune text: 30px
• H3 (telefon și tabletă) Culoare text: #000000
• H4 (telefon și tabletă) Culoare text: #000000

Acum accesați setările modulului de text original „Aromă lunii” și modificați vizibilitatea, astfel încât să fie vizibilă numai pe dispozitivele desktop. Acest lucru va face ca modulul de text original să se ascundă pe dispozitive mai mici. Textul Aromă lunii va apărea deasupra butonului, cu celălalt text pe pagină.

• Dezactivați pe: telefon și tabletă

Apoi, deschideți setările rândului, apoi deschideți setările coloanei 1. Scoateți căptușeala din dreapta și din stânga.

• Umplutură dreapta: 0px
• Umplutură din stânga: 0px

Accesați secțiunea setări, apoi fundal, apoi editați setările măștii

• Transformarea măștii: inversează
• Raport de aspect al măștii: Portret

Și acum ați creat o secțiune CTA complet receptivă, cu un fundal unic, datorită opțiunilor de model de fundal și mască ale Divi.

Rezultat final

Să aruncăm o privire la rezultatul final.

Gânduri finale

Proiectarea unei secțiuni unice și atrăgătoare de chemare la acțiune este foarte ușoară, datorită modelului puternic de fundal și a opțiunilor de mască ale Divi. Dezlănțuiți-vă creativitatea experimentând diferite culori, modele, măști și combinații de setări. Este ușor de proiectat și vă puteți ajusta setările până când găsiți aspectul perfect cu doar câteva clicuri. Cel mai important, este integrat chiar în Divi! Nu mai este nevoie să proiectați grafică de fundal într-un alt program. Puteți aplica setările de fundal altor secțiuni, rânduri și module pentru modele și mai unice. Dacă doriți să aflați mai multe despre modelul de fundal și caracteristicile măștilor Divi, consultați tutorialul nostru pentru o secțiune de eroi cu măști și modele de fundal și aflați cum să combinați generatorul de gradient al Divi cu măști și modele de fundal.

Cum ați folosit modelul de fundal Divi și opțiunile de mască pe site-ul dvs.? Spune-ne ce ai creat în comentariile de mai jos!