Butoane de styling cu noile opțiuni de fundal ale lui Divi (6 modele incluse)

Dacă nu ați profitat de noua interfață de opțiuni de fundal a lui Divi, pierdeți. Posibilitățile de proiectare a fundalului sunt uluitoare. Dar nu ar fi minunat să avem aceleași opțiuni de design puternice pentru butoanele noastre? Dacă răspunsul este da, atunci cred că veți iubi această postare.

Astăzi vă voi arăta cum să aduceți aceleași caracteristici puternice de design de fundal la butoanele de stil. Acest truc de design acoperă fundalul Rând și Coloană din spatele modulului buton pentru a vă oferi 3 straturi de capabilități de proiectare. Cu acest tip de putere, lucrurile ar putea deveni periculoase. Cel mai bine este să păstrați calmul și să mergeți încet la început

Să mergem.

Trage cu ochiul

Iată exemplele de modele de butoane acoperite în această postare.

Butoane de styling cu noile opțiuni de fundal ale lui Divi (6 modele incluse)

Abonați-vă la canalul nostru Youtube

Pregatirea

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

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 text]
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: 48 px

Opțiuni avansate

Avem nevoie de lățimea de 100% va fi necesară pentru a umple lățimea coloanei. Pentru aceasta, introduceți următorul CSS personalizat în caseta Element principal:

Width: 100%;

Salvează setările

Nu puteți vedea nimic în pagină chiar acum, deoarece marginea butonului și textul sunt albe. În loc să stilizăm culoarea de fundal a butonului utilizând setările modulului butonului, vom personaliza culoarea de fundal a rândului / coloanei din spatele butonului utilizând opțiunile de fundal mai avansate. Vom revizita setările modulului de butoane odată ce vom începe să facem designuri mai specifice pe butoane. Dar, deocamdată, să terminăm configurarea rândului.

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

Opțiuni de conținut

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

Acum ar trebui să vedeți culorile implicite ale gradientului în spatele butonului alb.

Coloana se potrivește frumos în spatele butonului nostru acum, dar trebuie să micșorăm lățimea butonului. Pentru a face acest lucru, vom folosi setările de dimensionare a rândurilor. Setând o lățime personalizată pentru rândul nostru, setăm și lățimea butonului nostru.

Opțiuni de proiectare

Sub opțiunile de proiectare, vom ajusta dimensiunea rândului pentru a se potrivi noului nostru buton, ajustând următoarele:

Utilizați lățimea personalizată: DA
Lățime personalizată: 500 px (aceasta setează lățimea maximă a butonului la 500 px)
Împletire personalizată: 0 px sus, 0 px dreapta, 0 px jos, 0 px stânga

Opțiuni avansate

Avem nevoie de potrivirea razei de margine a rândului și a coloanei cu ceea ce am setat pentru butonul nostru, astfel încât să se potrivească toate. Pentru a face acest lucru, introduceți următorul CSS personalizat în caseta Element principal:

border-radius: 10px;

Introduceți același CSS în caseta Element principal Column:

border-radius: 10px;

Salvează setările

Acum că setările Row au fost actualizate pentru a avea o lățime și o umplutură personalizate, s-au realizat două lucruri. În primul rând, am setat cu succes o lățime personalizată pentru butonul nostru. Și, în al doilea rând, avem acum un alt strat de opțiuni de fundal pe care le putem folosi pentru a ne stiliza butonul.

Este vorba de un total de 3 straturi de fundal (buton, coloană, rând) pe care le-am putea folosi pentru coafare ulterior.

Iată o ilustrare a modului în care butonul este construit în prezent.

Destul de cool nu?

Asta este pentru configurarea de bază. Acum este timpul pentru partea distractivă de a crea modele minunate pentru butoanele dvs.

Crearea de modele de butoane minunate

# 1 Buton de fundal video

Pentru a crea acest buton, veți utiliza toate cele 3 straturi, fundalul rândului pentru videoclip, fundalul coloanei pentru gradient și fundalul butonului pentru suprapunerea ușoară albastră.

Pentru Setările rândului actualizați următoarele opțiuni de conținut :

Video de fundal: [încărcați video]
Coloana 1 Culori de gradient de fundal: rgba (12.113.195,0.41), rgba (131.0.233,0.18)

Salvează setările

Pentru setările modulului buton , actualizați următoarele:

Opțiuni de conținut

Text buton: „Verifică-l”

Opțiuni de proiectare

Culoare fundal buton: rgba (12.113.195,0.25)
Culoarea chenarului butonului: # 0c71c3

Salvează setările

Acum singura problemă care ne-a rămas este raza de margine a fundalului video. Trebuie să adăugăm câteva CSS personalizate pentru a oferi videoclipului o rază de margine care să se potrivească cu butonul. Acest cod suplimentar este necesar numai pentru butonul de fundal video.

Pentru a adăuga CSS personalizat, accesați setările paginii din Visual Builder și faceți clic pe fila Advanced. Apoi actualizați caseta de intrare CSS personalizat cu următorul CSS:

.et_pb_section_video_bg {

border-radius: 10px;

}

Salvează setările

Sfat : O altă opțiune de design interesantă este să aveți spectacolul video pe hover. Doar dați modulului de buton o culoare solidă de fundal și schimbați-l în transparent pe hover.

Asta e! Acum aveți un buton cu fundal video.

# 2 Buton cu carouri

Butonul în carouri necesită utilizarea a două straturi (rând și coloană) de gradiente de culoare de fundal.

Pentru a crea acest buton, veți folosi 2 straturi, fundalul rândului pentru primul nivel de gradiente și fundalul coloanei pentru ultimul strat de culoare de gradient.

Pentru Setările rândului actualizați următoarele opțiuni de conținut :

Culori de gradient de fundal: # 8300e9, # 0c71c3
Direcția gradientului: 270 de grade
Poziția inițială: 50%
Poziție finală: 0%
Coloana 1 Culori de gradient de fundal: rgba (224,11,0,0.39), rgba (255,255,255,0)
Direcția gradientului: 180 grade
Poziția inițială: 50%
Poziție finală: 0%

Salvează setările

Acum accesați Setările modulului buton și actualizați următoarele

Opțiuni de conținut

Text buton: „Abonați-vă”

Opțiuni de proiectare

Lățimea chenarului butonului: 0 px
Distanța dintre litere și butoane: 10 px
Buton Font: Implicit, Bold (B), Italic (I)
Distanța între litere și trecerea butonului: 10 px

Asta e. Iată rezultatul final.

Acum știi cum să adaugi un efect în carouri la butoane.

# 3 Buton gradient radial

Pentru a crea acest buton, veți folosi 2 straturi (rând și coloană) de gradiente de culoare de fundal.

Pentru Setările rândului actualizați următoarele opțiuni de conținut :

Culori de gradient de fundal: # 8300e9, # 0c71c3
Tipul gradientului: radial
Direcție radială: centru
Poziția inițială: 50%
Poziție finală: 100%
Coloana 1 Culori de gradient de fundal: rgba (224,11,0,0.39), rgba (255,255,255,0)
Tipul gradientului: radial
Direcție radială: centru
Poziția inițială: 50%
Poziție finală: 100%

Salvează setările

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

Opțiuni de conținut

Text buton: „contactați-mă”

Opțiuni de proiectare

Lățimea chenarului butonului: 0 px
Buton Font: Crafty Girls

Pictogramă buton: [alege pictograma inimii]
Afișați numai pictograma în cursă pentru butonul: NU

Opțiuni avansate

Pentru o ultimă atingere, să adăugăm o umbră diapozitivă la buton. În plus față de codul anterior, introduceți următorul CSS personalizat în caseta Element principal :

box-shadow: 0px 5px 10px 3px #ccc;

Asta e! Iată rezultatul final:

# 4 Buton Bullseye

Pentru a crea acest buton, veți folosi 2 straturi (rând și coloană) de gradiente de culoare de fundal. În plus, vom adăuga câteva css-uri personalizate în modulul de butoane pentru a crea efectul pop-up de margine de jos.

Pentru Setările rândului actualizați următoarele opțiuni de conținut :

Culori de gradient de fundal: # 023500, # 008c02
Tipul gradientului: radial
Direcție radială: centru
Poziția inițială: 19%
Poziție finală: 0%
Coloana 1 Culori de gradient de fundal: rgba (0,206,72,0,43), rgba (255,255,255,0)
Tipul gradientului: radial
Direcție radială: centru
Poziția inițială: 32%
Poziție finală: 0%

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

Opțiuni de conținut

Textul butonului: „Cumpărați”

Opțiuni de proiectare

Dimensiune text buton: 65 px
Lățimea chenarului butonului: 0 px
Buton Font: Roboto, Bold (B), majuscule (TT)

Opțiuni avansate

Acum pentru atingerea finală. Adăugați următorul CSS personalizat la codul existent în caseta de intrare Element principal :

box-shadow: 0px 5px 0px 0px #01771f;

# 5 Buton imagine

Pentru a crea acest buton, veți utiliza toate cele 3 straturi, rândul pentru imaginea de fundal, coloana pentru fundalul de gradient și fundalul butonului pentru suprapunerea semiclară a culorii albastre.

Pentru Setările rândului actualizați următoarele opțiuni de conținut :

Sub fila Imagine de fundal

Imagine de fundal: [încărcați imaginea]
Dimensiunea imaginii de fundal: copertă
Poziția imaginii de fundal: Centru
Repetarea imaginii de fundal: fără repetare
Amestec de imagine de fundal: înmulțiți

Sub fila Gradient de fundal

Culori de gradient de fundal: rgba (12.113.195,0.33), # edf000
Tipul gradientului: liniar
Direcția gradientului: 63 grade
Poziția inițială: 50%
Poziție finală: 100%

Acum derulați în jos până la opțiunile de fundal ale coloanei 1 și selectați fila gradient.

Coloana 1 Culori de gradient de fundal: rgba (236.239,31,0.66), rgba (0,0,0,0.49)
Tipul gradientului coloanei: liniar
Direcția gradientului coloanei: 139deg
Poziția de început a coloanei: 12%
Poziția finală a coloanei: 0%

Salvează setările

Asta se ocupă de al doilea nivel de designuri de fundal. A mai rămas încă unul.

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

Opțiuni de conținut

Textul butonului: „Obțineți bilete”

Opțiuni de proiectare

Culoare fundal buton: rgba (12.113.195,0.16)
Culoarea chenarului butonului: # efef4f
Buton Font: Lato
Pictogramă buton: [pictogramă selectați bilete]
Afișați pictograma doar pe cursor pentru buton: NU

Buton Hover Culoare text: # 023b7c
Culoarea fundalului butonului Hover: # 023b7c

Asta e!. Verificați butonul imagine.

# 6 Buton portret

Pentru a construi acest ultim buton, vom folosi doar un singur strat de design de fundal. Vom folosi un amestec de imagini de fundal și culoarea de fundal pentru a crea un aspect unic.

Pentru Setări rând , derulați în jos până la Opțiunile de fundal ale coloanei 1 și actualizați următoarele:

Imagine de fundal a coloanei: [încărcați imaginea portret]
Dimensiunea imaginii de fundal a coloanei: potrivită (acest lucru vă va asigura că portretul se potrivește întotdeauna în interiorul butonului)
Poziția imaginii de fundal a coloanei: în centru stânga (aceasta aliniază portretul la stânga butonului)
Repetarea imaginii de fundal a coloanei: Fără repetare
Coloană Imagine de fundal Amestec: Luminozitate (aceasta creează o combinație frumoasă a culorii portocalii cu portretul)

Asigurați-vă că ștergeți culorile curente de gradient dacă le aveți setate. Dacă nu, doriți să puteți amesteca fundalul portocaliu. Doar faceți clic pe fila de gradient și treceți cu mouse-ul peste caseta de selectare a culorilor și faceți clic pe pictograma coș de gunoi care apare în partea dreaptă sus.

Acum puteți vedea amestecul portocaliu pe buton.

Salvează setările

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

Opțiuni de conținut

Textul butonului: „Să vorbim”

Opțiuni de proiectare

Aliniere buton: dreapta
Culoarea chenarului butonului: # ff7b23
Distanța dintre litere și butoane: 3 px
Buton Font: Maimuță fericită
Pictogramă buton [pictogramă adăugare chat]
Afișați pictograma doar pe cursor pentru buton: NU
Distanța între litere și trecerea butonului: 3 px

Totul este gata! Îmi place acest design pentru un buton de contact pe blog. Cred că adaugă o notă personală plăcută.

Proiectarea butoanelor pe diferite structuri de coloane

Până acum, am folosit rândurile cu o singură coloană pentru a servi drept fundal pentru butoanele noastre. Acest lucru ne permite 3 straturi de design de fundal. Cu toate acestea, dacă doriți să includeți un buton pe o altă structură de coloane, puteți. Veți pierde rândul doar ca strat de fundal.

De exemplu, să presupunem că doriți să adăugați un rând 1/2 1/2 coloană cu un buton în stânga și un text în dreapta. Iată ce ați face.

Începeți cu o nouă secțiune obișnuită și selectați structura rândului 1/2 1/2 coloană . Apoi adăugați un modul buton în coloana din stânga.

În setările modulului buton , asigurați-vă că introduceți următorul CSS în caseta de intrare Element principal sub fila Avansat:

Width: 100%;

Puteți personaliza restul modulului buton mai târziu.

Apoi, accesați Setările rândului și derulați până la opțiunile de fundal Coloana 1 și actualizați setările de fundal cum doriți.

Apoi accesați fila Design și actualizați următoarele:

Coloana 1 Completare personalizată: 0 px sus, 0 px dreapta, 0 px jos, 0 px stânga

Salvează setările

Acum aveți un buton în coloana din stânga care poate utiliza opțiunile de fundal ale coloanei 1 pentru proiectare. Odată ce vă întoarceți și actualizați stilul butonului după dorința dvs., adăugați textul în coloana din dreapta și ați terminat!

Sensibil?

Da. Deoarece butoanele sunt construite în structura coloanelor Divi, butoanele vor răspunde frumos pe toate dispozitivele. Poate fi necesar să revizuiți setările modulului buton pentru a regla modul în care anumite elemente ale butonului se adaptează la diferite dispozitive.

Suport Cross Browser

Î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.

Iată cum arată butoanele pe IE:

Dacă sunteți dedicat IE, aș sugera să le testați pentru a găsi un mediu fericit care să arate excelent atât pe IE, cât și pe alte browsere.

Gânduri finale

Trebuie să recunosc, acest tutorial este destul de revoluționar pentru mine personal. În trecut, a trebuit să adaug o grămadă de clase și CSS suplimentare la tema copilului meu, dacă doream să stilez butoanele în mod creativ. Dar acum că pot folosi opțiunile de fundal ale lui Divi, viața mea a devenit mult mai ușoară. Sper că puteți folosi acest truc de design pentru a vă duce butoanele la nivelul următor.

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

Noroc