Construirea de bannere receptive cu noile opțiuni de fundal ale lui Divi

În ultima mea postare, v-am arătat cum să stilizați butoanele folosind interfața opțiunilor de fundal ale lui Divi, plasând modulul butonului peste fundaluri de coloane și rânduri. Astăzi, vă voi arăta cum să proiectați bannere care pot fi făcute clic folosind interfața Divi cu opțiunile de fundal.

Vom folosi aceleași tehnici ca și pentru fundalurile butoanelor, cu câteva modificări minore. Practic, vă voi arăta cum să creați butoane foarte mari și să le proiectați un pic mai mult ca bannere. Factorul important aici este că întreaga suprafață a bannerului rămâne apăsabilă. Cu toate acestea, ar trebui să știți de la început că putem realiza numai bannere simple folosind această metodă. Deoarece suntem limitați de introducerea textului modulului buton, putem crea bannere numai cu un șir de text. Cu toate acestea, utilizând opțiunile de fundal ale coloanei, putem crea niște bannere destul de interesante în cel mai scurt timp folosind Visual Builder.

Bannere HTML vs. Bannere imagine

Există o mulțime de avantaje în utilizarea bannerelor html (bannere construite folosind elemente html) față de bannere imagine (bannere construite ca o singură imagine fără elemente html). Pentru bannere html, textul este recunoscut de browserele web (esențial pentru traducătorii de pagini și cititorii de ecran). Scalează cu dimensiunea ferestrelor browserului, astfel încât să pară întotdeauna clare, spre deosebire de imaginile care pot fi distorsionate sau ilizibile. Și poate că aspectul meu preferat de a folosi bannere html peste bannere de imagine este că html este foarte ușor de schimbat. Pot schimba textul cu câteva apăsări de taste în loc să caut în adâncimea hard disk-ului meu un fișier original pe care va trebui să îl editez într-un editor foto. Și, pot face rapid o altă versiune a bannerului pentru a face un test divizat folosind Divi Leads.

Această metodă de transformare a butoanelor în bannere deschide ușa unor aplicații utile, cum ar fi crearea unei postări, categorii sau serii personalizate pentru blogul dvs. (sau podcast).

Să începem.

Trage cu ochiul

Înainte de a fi oficial dați drumul. Iată o scurtă privire asupra bannerelor pe care le vom construi în acest post.

Implementarea proiectării cu Divi

Abonați-vă la canalul nostru Youtube

Exemplul nr. 1: Banner de sigle

Folosind Visual Builder, adăugați o secțiune obișnuită cu o coloană și un rând.

Apoi adăugați un modul buton la rând.

Apoi actualizați setările modulului buton după cum urmează:

Opțiuni de conținut

Buton Text: [introduceți textul pe care doriți să îl utilizați pentru mesajul banner]
Adresa URL a butonului: [introduceți adresa URL]

Opțiuni de proiectare

Aliniere buton: Centru
Culoarea textului: deschis
Utilizați stiluri personalizate pentru buton: DA
Dimensiune text buton: 32 px
Lățimea chenarului butonului: 0 px
Buton Font: Arvo
Pictogramă buton: [adăugare pictogramă. Folosesc pictograma cursorului]
Afișați pictograma doar pe cursor pentru buton: NU

Opțiuni avansate

Trebuie să setăm lățimea butonului la 100% pentru a umple lățimea coloanei. De asemenea, trebuie să extindem înălțimea butonului nostru pentru a oferi suficient spațiu pentru conținutul bannerului nostru. Pentru aceasta, introduceți următorul CSS personalizat în caseta Element principal:

 Width: 100%;
padding: 20px 0 200px; 

Notă : Completarea personalizată aici este cheia pentru ajustarea locului în care doriți să fie afișat textul bannerului. Deoarece alinierea butonului este deja centrată, tot ce trebuie să fac este să reglez textul pe verticală. Prin urmare, oferind textului butonului o umplutură mai scurtă în partea de sus și o umplere mai lungă în partea de jos, va regla textul în partea de sus a bannerului.

Salvează setările

Lucrurile sunt încă albe și invizibile chiar acum, dar este în regulă. Vom adăuga un fundal pentru modulul buton în setările rând și coloană.

Accesați Setările rândului în care se află modulul buton și actualizați următoarele:

Opțiuni de conținut

Sub fila imagine de fundal

Imagine de fundal: [inserați imaginea]
Poziția imaginii de fundal: [utilizați această opțiune pentru a regla imaginea pentru bannerul dvs. Am vrut să se afișeze partea de jos a imaginii, așa că am selectat „Centrul de jos”.]

Acum derulați puțin în jos pentru a actualiza opțiunile de fundal ale coloanei 1.

Selectați fila Coloana 1 Gradient de fundal și apoi faceți clic pe butonul circular gri cu un simbol plus alb.

Actualizați următoarele:

Culori de gradient de fundal: rgba (131,0,233,0,92), rgba (0,0,0,0,69)
Direcția gradientului coloanei: 180 grade
Poziția de început a coloanei: 50%
Poziția finală a coloanei: 0%

Salvează setările

În continuare vom adăuga un logo pe banner. Faceți clic pe fila Imagine de fundal și actualizați următoarele:

Coloana 1 fundal Dimensiune imagine: Dimensiune reală (sigla mea este de 120 x 120 png)

Coloana 1 Poziția imaginii de fundal: Centru

Asta e. Acum aveți un banner simplu care poate fi clicat și receptiv. Puteți utiliza setările modulului buton pentru a adăuga orice efect de cursor pe care doriți să îl faceți să fie remarcabil.

Să facem un alt exemplu.

Exemplul 2: Banner text simplu

Pentru următorul banner, să duplicăm întreaga secțiune care conține primul banner pe care tocmai l-ați proiectat. Acest lucru va economisi ceva timp de configurare.

Apoi accesați setările rândului și actualizați următoarele:

Opțiuni de conținut

Imagine de fundal: [introduceți o imagine nouă]
Poziția imaginii de fundal: Centru
Coloana 1 Culori de gradient de fundal: rgba (0,0,0,0,41), rgba (12,113,195,0,66)
Direcția gradientului coloanei: 270deg

Apoi faceți clic pe fila coloanei 1 imagine de fundal și ștergeți imaginea / sigla.

Salvează setările

Accesați Setările modulului buton și actualizați următoarele:

Opțiuni de conținut

Text buton: [introduceți text pentru bannerul dvs.]
URL buton: [introduceți adresa URL pentru banner]

Opțiuni de proiectare

Dimensiune text buton: 42 px
Lățimea chenarului butonului: 19 px
Culoare margine buton: rgba (0,0,0,0.17)
Distanța dintre litere și butoane: 8 px
Buton Font: Montserrat, Bold (B)
Adăugați pictograma buton: NU
Culoarea chenarului butonului: rgba (0,0,0,0.46)
Raza de margine a cursorului butonului: 0 px
Distanța între litere și trecerea butonului: 12 px

După cum puteți vedea, acest exemplu de banner are un efect unic de deplasare care schimbă culoarea chenarului și crește spațierea literelor:

Cum să-ți faci bandă largă

Pentru a face acest banner lățime completă, tot ce trebuie să faceți este să actualizați Setările secțiunii din fila Proiectare după cum urmează:

Împletire personalizată: 0 px sus, 0 px dreapta, 0 px jos, 0 px stânga

Salvează setările

Acum accesați Setările rândului și actualizați opțiunile de proiectare după cum urmează:

Faceți acest rând lățime completă: DA
Utilizați lățimea personalizată a jgheabului: DA
Lățimea jgheabului: 1

Acum, bannerul întinde lățimea completă a ecranului pe toate dispozitivele.

Cum se face un banner lipicios

Dacă doriți, puteți face cu ușurință acest banner fix (lipicios) și fixați-l în partea de sus a ferestrei browserului. Aș sugera scăderea căptușelii pentru ao face mult mai scurtă, astfel încât să nu blocheze prea mult fereastra.

Pentru a micșora înălțimea, accesați Setările modulului butonului din fila Advanced, adăugați următorul CSS în caseta Element principal :

padding: 0px 0px !important;

Acum, pentru a face întreaga secțiune lipicioasă, accesați Setările secțiunii și actualizați fila Opțiuni avansate cu următoarele CSS personalizate din caseta Element principal :

position: fixed;
top: 0;
width: 100%;
z-index: 9999;

Acum întreaga secțiune va rămâne în partea de sus a paginii și va rămâne acolo când derulați pagina în jos.

Acest tip de banner ar funcționa bine pentru articolele promoționale de pe o pagină de destinație fără o bară de navigare, deoarece bannerul lipicios ar ajunge să ascundă bara de navigare.

Adăugarea de bannere la mai multe planuri de coloane

De asemenea, puteți crea bannere pe o structură cu mai multe rânduri de coloane. Acest lucru ar fi la îndemână dacă doriți să prezentați câteva elemente în partea de jos a paginii sau a blogului.

Să-i dăm o lovitură.

Adăugați o altă secțiune obișnuită cu o structură de rând 1/2 1/2 coloană.

De dragul timpului, continuați și copiați sau copiați un modul buton pe care tocmai l-am creat și lipiți-l sau trageți-l în prima coloană.

Pentru a obține designul fundalului bannerului, vom folosi fundalurile coloanelor din Setările rândului. Accesați Setările rândului și actualizați următoarele:

Opțiuni de conținut

Sub fila Imagine de fundal

Coloana 1 Fundal: [introduceți imaginea de fundal]
Coloana 1 Poziția imaginii de fundal: [reglați poziția imaginii după dorința dvs.]
Coloana 1 Imagine de fundal Amestec: înmulțiți

Sub fila Gradient de fundal

Coloana 1 Culori de gradient: rgba (255,255,255,0), # e02b20
Coloana 1 Direcție gradient: 180deg
Coloana 1 Poziția inițială: 70%
Coloana 1 Poziție finală: 0%

Ultimul pas este actualizarea setărilor modulului buton :

Opțiuni de conținut

Text buton: Travel Series

Opțiuni de proiectare

Dimensiune text buton: 32 px
Lățimea chenarului butonului: 2 px
Distanța dintre litere și butoane: 0 px
Culoarea chenarului butonului: # edf000
Distanța între litere și trecerea butonului: 0 px

Opțiuni avansate

CSS personalizat în caseta Element principal:

padding: 350px 0px 50px;
width: 100%;

Acest css personalizat ajustează umplutura modulului Buton astfel încât textul să fie în partea de jos chiar în spatele gradientului de fundal.

Simțiți-vă liber să copiați acest proces pentru bannerul din coloana următoare și să actualizați conținutul oricum doriți.

Verificați rezultatul.

Notă : nu aș folosi înălțimea coloanei Egalizează atunci când folosesc această funcționalitate. Coloana se va întinde dincolo de modulul buton. Dacă doriți ca înălțimile bannerului să se potrivească perfect, poate fi necesar să vă jucați cu căptușeala de pe modulul buton pentru a o corecta.

Sensibil?

Da. Deoarece butoanele sunt construite în structura coloanelor Divi, butoanele vor răspunde frumos pe toate dispozitivele. Pentru bannere orizontale, aș fi atent la plasarea logo-ului și a textului dvs., deoarece acestea se pot suprapune pe mobil.

Iată un exemplu de cum arată acestea atunci când reduceți dimensiunile ecranului mai mici:

Compatibilitatea browserului

În prezent, proprietatea CSS în fundal-blend-mode nu este acceptată de Internet Explorer sau Edge și Safari are opțiuni de amestecare limitate. Cu toate acestea, rezerva nu este considerabilă în experiența mea pentru majoritatea cazurilor.

Gânduri finale

Sper că v-a plăcut acest truc de proiectare mic, dar util pentru a crea bannere receptive. Atâta timp cât înțelegeți limitările implicate și îl păstrați simplu, puteți crea niște bannere destul de interesante. În plus, această soluție este atât de ușor de implementat, cât și de personalizată rapid.

Și, sunt sigur că există și alte aplicații utile pentru asta. Aștept cu nerăbdare să vă aud ideile în comentarii.

Noroc!