5 modele Creative Divi Button Module și modul de realizare a acestora

În această postare, vă voi arăta 5 modele creative de module de butoane Divi pe care le puteți realiza cu ușurință cu modulul de butoane Divi. Modulul de butoane este unul dintre cele mai populare dintre toate modulele Divi, deoarece butoanele sunt atât de importante pentru a conduce vizitatorii la obiectivele dorite de-a lungul unui site web. Prin urmare, este foarte important ca noi, designeri și dezvoltatori, să facem aceste butoane atrăgătoare și atrăgătoare.

Hai să săpăm!

Trage cu ochiul

Iată o privire rapidă asupra butoanelor pe care le vom construi în acest tutorial.

1. Butonul de margine săgeată stânga

2. Buton linie în mișcare

3. Trageți butonul Tab

4. Butonul cu logo-ul cercului

5. Buton de strălucire

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

5 modele de butoane Divi și moduri de realizare a acestora

1. Butonul de margine săgeată stânga

Pentru a începe, creați o nouă secțiune cu un rând cu o coloană și adăugați un modul buton la rând.

Apoi modificați textul conținutului implicit al butonului pentru a citi „Începeți” (sau orice doriți de fapt).

Acum este timpul să treceți la setările de proiectare și să actualizați următoarele:

Utilizați stiluri personalizate pentru buton: DA
Culoarea textului butonului: #ffffff
Culoarea fundalului butonului: # 324376
Lățimea chenarului: 0 px
Distanța dintre litere și butoane: 0.2em
Buton Font: Fira Sans
Stilul fontului: TT (majuscule), U (subliniat)
Culoare subliniat: rgba (255.255.255,0.2)
Sublinierea stilului: dublu
Pictogramă buton: vezi captura de ecran
Culoare pictogramă buton: # ff4751
Plasare pictogramă buton: stânga

Căptușeală personalizată: 40 px stânga, 20 px dreapta

Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei cutiei: 22 px
Box Shadow Vertical Position: 0px
Culoare umbră: # ff4751

(Căptușeala personalizată din stânga de 40 px creează un spațiu fix care este umplut cu umbra cutiei pentru a sta la același nivel cu pictograma butonului săgeată stânga.)

Deoarece umbra casetei din stânga este la același nivel cu începutul pictogramei săgeată, acest lucru creează un efect de margine săgeată frumos. Dacă, dintr-un anumit motiv, nu se află la același nivel cu pictograma, puteți regla poziția orizontală după cum este necesar. Frumusețea acestui design este că marginea săgeții stânga va rămâne în poziție chiar și atunci când adăugați cantități diferite de text de buton.

Iată rezultatul final.

2. Buton linie în mișcare

Următorul stil de buton are mai mult un aspect tehnic și minimalist. Liniile sunt create folosind o umbră de casetă și un gradient de fundal separat de o margine transparentă. Am adăugat, de asemenea, un efect de hover care mută umbra cutiei spre dreapta, care la rândul său mută linia de jos ușor spre dreapta pentru o interacțiune subtilă.

Pentru a începe, creați o nouă secțiune cu un rând cu o coloană și adăugați un modul buton la rând.

Actualizați conținutul textului butonului la orice doriți. Am lăsat „clic aici” implicit pentru acest exemplu. Apoi actualizați setările de proiectare după cum urmează:

• Utilizați stiluri personalizate pentru buton: DA
• Culoarea textului butonului: # 3b7986
• Buton Gradient de fundal Culoare stânga: rgba (255,255,255,0)
• Buton Gradient de fundal Culoare dreaptă: # 3b7986
• Direcția gradientului: 180 grade
• Poziția inițială: 96%
• Poziție finală: 0%
• Lățimea chenarului butonului: 10 px
• Culoarea chenarului butonului: rgba (0,0,0,0)
• Raza chenarului butonului: 0 px
• Distanța dintre litere și butoane: 6 px
• Buton Font: Exo 2
• Greutatea fontului: Bold
• Stilul fontului: Tt (cu majuscule mici)
• Pictogramă buton: Săgeată dreapta (vezi captura de ecran)
• Afișați pictograma doar pe Hover pentru buton: NU
• Căptușeală personalizată: 0px jos
• Box Shadow: vezi captura de ecran
• Poziție orizontală a umbrei cutiei: -15px
• Box Shadow Vertical Positon: 15 px
• Puterea răspândirii umbrei cutiei: -13px
• Culoare umbră: # 3b7986

Poate fi necesar să setați culoarea de fundal la #ffffff și la hover, deoarece aceasta este setarea implicită pentru buton.

Cheia acestui design este gradientul de culoare de fundal și umbra cutiei. Prin setarea gradientului de culoare de fundal punctul de pornire la 96%, se creează o linie cu o lățime de 4% în partea de jos a butonului. Apoi, odată ce poziționăm și colorăm umbra cutiei, avem un alt element liniar care înfășoară frumos butonul. În plus, pictograma săgeată dreapta funcționează bine și cu elementele de proiectare a liniei.

Iată designul final.

Pentru a adăuga efectul de deplasare care mută umbra casetei, reveniți la setările de proiectare și treceți peste opțiunea „Poziție orizontală a umbrei casetei”. Veți vedea o pictogramă săgeată pop-up chiar lângă text. Faceți clic pe acesta pentru a deschide opțiunile de deplasare pentru setarea respectivă.

Apoi faceți clic pe fila hover și schimbați valoarea la 13 px.
Veți vedea efectul hover previzualizat în generatorul vizual.

Iată cum arată efectul hover:

3. Trageți butonul Tab

Acest design de buton următor adaugă o umbră de casetă pentru a încadra pictograma butonului drept care rămâne într-o poziție absolută. La deplasare, butonul se extinde spre dreapta, creând efectul că trageți o filă.

Pentru a crea butonul, mai întâi, creați o nouă secțiune cu un rând cu o coloană și apoi adăugați un modul buton la rând.

Deschideți setările modulului butonului și actualizați textul butonului de sub fila conținut la orice doriți (voi folosi textul „Aflați mai multe”).

Apoi treceți la fila de proiectare și actualizați următoarele:

Utilizați stiluri personalizate pentru buton: DA
Culoarea textului butonului: #ffffff
Buton Gradient de fundal Culoare stânga: # 7D80DA
Buton Gradient de fundal Culoare dreaptă: # 8EEDF7
Direcția gradientului: 90 grade
Lățimea chenarului butonului: 0 px
Raza chenarului butonului: 10 px
Distanța dintre litere și butoane: 1 px
Buton Font: Source Sans Pro
Greutatea fontului: Bold
Stilul fontului: TT
Pictogramă buton: vezi Captură de ecran
Culoare pictogramă buton: #ffffff
Căptușeală personalizată: 1em stânga, 2,5em dreapta
Box Shadow: Vedeți Captura de ecran
Poziție orizontală a umbrei cutiei: -35px
Box Shadow Vertical Position: 0px
Culoare umbră: # 7d80da

Cheia acestui design este umbra cutiei din dreapta care va încadra pictograma. Dar chiar acum pictograma trebuie să fie poziționată pentru a se potrivi în zona de gradient. Pentru a face acest lucru, trebuie să adăugăm câteva CSS personalizate.

Accesați fila Advanced și introduceți următorul CSS în caseta After input:

position: absolute;
right: 5%;

Acest CSS vizează locația pictogramei și îi conferă o poziție absolută la 5% față de marginea dreaptă a butonului.

Verificați designul până acum.

Acum, pentru a adăuga efectul de hover, trebuie doar să actualizăm opțiunea potrivită de umplere din fila hover. Pentru a face acest lucru, deschideți setările butonului și deschideți opțiunile de deplasare trecând pe elementul de umplere personalizat și făcând clic pe pictograma cursorului care apare. Apoi selectați fila cu mouse-ul și introduceți următoarele:

Căptușeală personalizată: 4em dreapta

Acum, să verificăm rezultatul final.

4. Butonul cu logo-ul cercului

Pentru următorul design, vom transforma o pictogramă / imagine de cerc într-un buton care poate fi făcut clic cu un efect de hover rece care arată un scurt îndemn la acțiune.

Pentru a începe lucrurile, creați o nouă secțiune cu un rând cu o coloană și adăugați un modul buton la rând.

Apoi deschideți setările de proiectare a butoanelor. Sub fila conținut, adăugați cuvântul „Mergeți” pentru textul butonului.

Apoi accesați setările de proiectare și selectați pentru a utiliza stilurile de butoane personalizate. Mai întâi adăugați imaginea cercului ca imagine de fundal pentru buton. Pentru ca acest proiect să funcționeze, asigurați-vă că utilizați o imagine png a unui logo sau a unei pictograme care este un cerc perfect și că dimensiunile imaginii sunt la aceeași înălțime și lățime. Imaginea pe care o folosesc este un png care are 118px pe 118px. Luați-l aici dacă doriți:

După ce adăugați imaginea de fundal, asigurați-vă că dimensiunea imaginii de fundal este setată la „Dimensiune reală”. Acest lucru vă va asigura că imaginea își păstrează dimensiunile originale (118 px cu 118 px).

Apoi vrem să ne mărim butonul pentru a fi dimensiunile exacte ale imaginii noastre de cerc. Pentru a face acest lucru, treceți la fila Advanced și introduceți următorul CSS personalizat în Elementul principal:

width: 118px;
height: 118px;
line-height: 118px !important;
text-align: center;

Observați că CSS setează lățimea, înălțimea și înălțimea liniei, toate la aceeași valoare de 118 px. Aceasta este aceeași lățime și înălțime a imaginii noastre. Acum imaginea se potrivește perfect în buton. Înălțimea liniei este setată la 118 px, astfel încât textul din interiorul butonului să fie centrat vertical în interiorul butonului (nu este încă perfect centrat, deoarece există încă o anumită umplutură de care trebuie să scăpăm, aruncându-l). Și alinierea textului: centru asigură faptul că textul din interiorul butonului rămâne centrat chiar și atunci când modulul butonului este aliniat la stânga sau la dreapta.

Acum tot ce trebuie să facem este să terminăm cu câteva setări de proiectare care vor completa designul. Accesați fila de proiectare și actualizați următoarele:

Culoare text buton (implicit): rgba (0,0,0,0)
Culoarea textului butonului (hover): #ffffff

(Aceasta ascunde în mod implicit textul butonului și îl afișează în alb la trecere)

Culoare fundal (implicit): # 121212
Culoarea fundalului (pluteste): # da00f2

(Aceasta afișează în mod implicit un fundal negru în spatele imaginii și apoi o culoare roz strălucitor pe fundal.)

Lățimea chenarului butonului: 0 px
Raza butonului: 50%;

(Setarea razei butonului la 50% va schimba butonul într-o formă de cerc deoarece înălțimea și lățimea butonului au fost setate la 118 px în css personalizate.)

Buton Font: Poppins
Greutatea fontului: Bold
Stilul fontului: TT
Afișați pictograma butonului: NU (dacă aveți o pictogramă buton va arunca textul centrat)
Căptușeală personalizată: 0 px sus, 0 px jos

(Este important să scoateți căptușeala superioară și inferioară, astfel încât înălțimea liniei pe care o setăm în CSS personalizate să facă textul centrat vertical.)

Box Shadow: vezi captura de ecran
Box Shadow Vertical Position: 0px
Culoare umbră (implicit): rgba (0,0,0,0)
Culoare umbră (hover): rgba (0,0,0,0,68)

(Aceasta va arăta o ușoară umbră de casetă în jurul cercului în cursa pentru un efect suplimentar de pop-up.)

Iată designul final cu efect de hover.

5. Buton de strălucire

Acest ultim design este destul de simplu și simplu de realizat. Este nevoie doar de o utilizare creativă a culorilor de gradient de fundal și a culorilor umbrei casetei. Efectul hover mărește pur și simplu dimensiunea umbrei cutiei pentru a oferi mai mult efect de strălucire.

Pentru a începe, creați o nouă secțiune cu un rând cu o coloană și adăugați un modul buton la rând. Înainte de a actualiza modulul buton, deschideți setările secțiunii și dați secțiunii o culoare de fundal închisă (# 333333).

Acum deschideți setările butonului.

Puteți lăsa textul implicit al butonului „Faceți clic aici”. Apoi actualizați următoarele setări de proiectare:

Aliniere buton: centru
Utilizați stiluri personalizate pentru buton: DA
Dimensiune text buton: 18 px
Culoarea textului butonului: #ffffff

Buton Gradient de fundal Culoare stânga: # 00ff8c
Buton Gradient de fundal Culoare dreaptă: # 15c39a
Tipul gradientului: radial
Direcție radială: centru
Poziție finală: 75%

(Setarea tipului de gradient la Radial îi va oferi gradientului o formă de cerc care se extinde spre exterior. Asigurați-vă că culoarea mai deschisă apare în mijlocul gradientului pentru a crea efectul de strălucire.)

Lățimea chenarului butonului: 0 px
Raza chenarului butonului: 100 px
Spațiere litere buton (implicit): 4 px
Spațiere între litere pentru butoane (plutire): 5 px

(Creșterea distanței dintre litere la cursor va extinde ușor întregul buton pentru un efect frumos)

Greutatea fontului: Ultra Bold
Stilul fontului: I, TT
Pictogramă buton: săgeată dreapta (vezi captura de ecran)
Căptușeală personalizată: 20 px sus, 20 px jos, 30 px stânga, 50 px dreapta

(aveți nevoie de mai multă umplere dreaptă pentru a ține cont de pictograma butonului săgeată dreapta)

Box Shadow: vezi captura de ecran
Box Shadow Vertical Position: 0px
Box Shadow Blur Strength (implicit): 64 px
Forța de estompare a umbrei cutiei (plutitor): 100 px
Puterea răspândirii umbrei cutiei: -12px
Culoare umbră: rgba (0,255,140,0,66)

(Umbra casetei se adaugă la efectul de strălucire atunci când se potrivește culoarea umbrei cu culoarea butonului. Creșterea intensității estompării la deplasare va mări și strălucirea butonului)

Verificați designul final cu efectul hover.

Mai multe butoane de inspirație

Pentru a afla despre inspirația stilurilor de butoane, consultați câteva dintre aceste alte articole:

• Cum se creează butonul fontului pictogramei cu Divi
• Proiectați un aspect unic Divi pe ecran complet cu un buton de derulare animat
• Cum să vă stilizați butoanele sociale Monarch pentru a se potrivi cu designul site-ului dvs.
• 7 chei pentru crearea unui buton de abonament irezistibil

Gânduri finale

Sper că aceste exemple v-au inspirat să maximizați modulul Divi Button în moduri creative noi! Deoarece un îndemn la acțiune este atât de important pentru site-ul dvs. web, este întotdeauna bine să aveți o varietate de idei în cutia noastră de instrumente pentru a crea câteva opțiuni de butoane unice. Simțiți-vă liber să folosiți aceste idei pentru a vă propune câteva stiluri uimitoare de butoane!

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

Noroc!