Crearea modelelor de butoane Divi unice folosind un modul de text

Este posibil să vă fi trecut deja prin minte crearea de designuri de butoane Divi unice folosind un modul text. Dacă da, ești mai creativ decât știi! Odată cu lansarea opțiunilor de hover în Divi, toate modulele pot fi făcute clic. Aceasta deschide ușa pentru utilizarea oricărui modul (cu toate setările sale de proiectare încorporate) ca CTA sau buton care poate fi făcut clic. Un modul de text, de exemplu, vă permite să adăugați cât de mult text doriți la modul în diferite formate. În plus, modulul text are și câteva opțiuni de design robuste pentru personalizarea colțurilor rotunjite pentru a crea forme unice.

În acest tutorial, voi explora câteva modele unice de butoane Divi care sunt posibile folosind un modul text.

Să începem!

Trage cu ochiul

Iată câteva exemple de modele de butoane pe care le vom crea cu ușurință cu modulul text.

Acesta este un buton cu text pe două rânduri ...

Acesta este un buton care folosește un element din listă ...

Acesta este un buton care utilizează colțuri creative ...

Crearea modelelor de butoane Divi unice folosind un modul de text

Abonați-vă la canalul nostru Youtube

# 1 Crearea unui buton cu mai multe linii de text

Așa cum am menționat mai devreme, modulul text permite o cantitate nelimitată de text, deci ar fi ușor să creați un buton cu doar două rânduri de text folosind modulul text în mai multe formate. Folosind wysiwyg sau editorul de text, puteți adăuga text de paragraf, anteturi, link-uri, liste și blocuri. Și cea mai bună parte a modulului de text este că puteți viza și stiliza fiecare dintre aceste formate de text individual folosind fila UI integrată în setările de proiectare a constructorului vizual.

Acest lucru face foarte ușor să adăugați mai multe linii de text și apoi să stilizați fiecare linie de text separat pentru un aspect unic al butonului.

Iată un exemplu rapid de cum să configurați modulul text ca buton cu mai multe linii de text.

Dacă nu ați făcut-o deja, creați o pagină nouă și implementați constructorul vizual. Alegeți opțiunea „Construiți de la zero”. Apoi creați o nouă secțiune, un rând cu o coloană. Apoi adăugați un modul text la rând.

Pentru conținutul textului, utilizați fila html și introduceți următoarele:

<h3>Contact Us</h3>
<h4>WE CAN HELP</h4>

Există o mulțime de stiluri de fundal diferite pe care le putem adăuga la modulul nostru, dar pentru acest exemplu, tet's adaugă un fundal de gradient simplu:

Culoarea din stânga a gradientului de fundal: # FEE140
Culoarea dreaptă a gradientului de fundal: # FA709A

Apoi treceți la fila de proiectare și utilizați interfața de utilizare a filei de titlu pentru a stiliza etichetele de titlu h3 și h4 după cum urmează:

Titlul 3 Greutate font: Ultra Bold
Rubrica 3 Stil font: TT
Rubrica 3 Culoarea textului: #ffffff
Titlul 4 Stil font: TT
Titlul 4 Culoare text: #ffffff
Titlul 4 Dimensiune text: 16 px

Acum tot ce trebuie să facem este să dimensionăm modulul text pentru a semăna mai mult cu un buton. Pentru a face acest lucru, actualizați următoarele:

Lățime: 230 px
Căptușeală personalizată: 1em sus, 0,5em jos, 2em stânga, 2em dreapta

De la lansarea noilor opțiuni de hover ale Divi, toate modulele pot deveni clicabile la fel ca un buton. Pentru a face acest lucru, reveniți la fila conținut și introduceți o adresă URL de link de modul.

Iată rezultatul final.

Ca efect de plutire, puteți adăuga o umbră de casetă care trece prin buton, aplicând în cele din urmă o nouă culoare de fundal pentru a înlocui gradientul.

Pentru aceasta, deschideți setările modulului text și actualizați următoarele:

Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei casetei: 0 px (implicit), 230 px (plutitor)
Box Shadow Vertical Position: 0px
Culoare umbră: rgba (0,0,0,0) (implicit), # fee140 (hover)

Iată cum arată pe hover.

# 2 Crearea unui buton de listă

Deoarece modulele text vă permit să adăugați liste (neordonate sau comandate) la conținut, puteți profita de această caracteristică pentru a crea un buton listă. Practic, tot ce trebuie să faceți este să creați o listă cu un singur element de listă în caseta de conținut. Apoi, înfășurați elementul listei într-o etichetă de antet, astfel încât să puteți stiliza elementul glonț al listei și textul antetului separat.

Dacă nu ați făcut-o deja, creați o pagină nouă și implementați constructorul vizual. Alegeți opțiunea „Construiți de la zero”. Apoi creați o nouă secțiune, un rând cu o coloană. Apoi adăugați un modul text la rând.

Apoi adăugați următorul html în fila text a setărilor de conținut:

<ol><li><h3>Contact Us</h3></li></ol>

Este important să înfășurați textul articolului de listă într-o etichetă de titlu, astfel încât să putem stiliza glonțul / numărul elementului de listă separat de text.

Acum, treceți la fila de proiectare și terminați de proiectat modulul text ca buton:

Sub categoria de setări pentru text, selectați fila listă ordonată și actualizați următoarele:

Font listă comandată: Exo 2
Listă comandată Greutate font: ușor
Culoare text listă comandată: # 000000
Dimensiune text listă comandată: 20 px
Lista ordonată Spațierea literelor: 5 px
Tipul stilului listei ordonate: zecimal-conducător-zero
Poziția stilului listei ordonate: în exterior
Linie comandată liniuță articol: 2em

În categoria Textul antet, faceți clic pe fila H3 și actualizați următoarele:

Titlul 3 Font: Exo 2
Titlul 3 Greutate font: Semi Bold
Rubrica 3 Stil font: TT
Rubrica 3 Culoarea textului: # 0c71c3
Rubrica 3 Dimensiune text: 26 px
Titlul 3 Înălțimea liniei: 0,3em

Apoi, modificați lățimea modulului și dați-i o margine și spațierea pentru a face ca să arate ca un buton:

Lățimea (modulului): 262px
Aliniere modul: centru
Căptușeală personalizată: 2em sus, 0 px jos, 2em stânga, 2em dreapta
Colțuri rotunjite: 10px2em
Lățimea chenarului: 1 px
Culoarea chenarului: # 000000
Stil de margine: solid

Și nu uitați să adăugați un link către modulul dvs. la adresa URL desemnată la alegere.

Iată designul final.

Simțiți-vă liber să explorați noi tipuri de stiluri de listă (cum ar fi Upper Roman) pentru designuri unice de butoane de listă.

# 3 Crearea unui buton cu colțuri creative (ca o frunză)

Pentru următorul proiect, vom profita de setarea de proiectare a colțului rotunjit într-un modul de text. Ideea de bază este de a seta diferite valori ale razei colțurilor pentru a crea butoane cu formă unică. În acest exemplu, voi modela modulul nostru pentru a arăta ca un buton cu frunze.

Dacă nu ați făcut-o deja, creați o pagină nouă și implementați constructorul vizual. Alegeți opțiunea „Construiți de la zero”. Apoi creați o nouă secțiune, un rând cu o coloană. Apoi adăugați un modul text la rând.

Deschideți setările modulului text și introduceți următorul html în fila text a casetei de conținut:

<h3>grow</h3>
<h4>with us</h4>

Acest lucru ne permite să punem textul butonului pe două linii (reducând lățimea verticală) și să le stilăm independent.

Apoi adăugați un fundal degradat cu o culoare mai „asemănătoare frunzei”.

Culoarea din stânga a gradientului de fundal: # 7cda24
Culoarea dreaptă a gradientului de fundal: # 26e051
Direcția gradientului: 90 grade

Acum să trecem la setările de proiectare pentru a ne centra textul și a stiliza etichetele de titlu. va trebui să selectați fila h3 pentru a proiecta titlul h3 și selectați fila h4 pentru a proiecta titlul h4:

Orientare text: centru
Rubrica 3 Font: Oswald
Rubrica 3 Greutatea fontului: ușoară
Rubrica 3 Stil font: TT
Rubrica 3 Culoarea textului: #ffffff
Rubrica 3 Dimensiune text: 27 px
Rubrica 4 Font: Oswald
Titlul 4 Stil font: TT
Titlul 4 Culoare text: #ffffff

Continuați să actualizați designul pentru a oferi modulului dvs. text lățimea și spațiul corespunzător pentru un buton.

Lățime: 178 px
Aliniere modul: centru
Căptușeală personalizată: 2em sus, 2em jos, 1em stânga, 1em dreapta

În cele din urmă, putem adăuga colțurile noastre rotunjite personalizate pentru a da modulului o formă de frunză și apoi adăugați o umbră de cutie pentru a face frunza să aibă o viață mai mare. Pentru a face această actualizare, urmați următoarele:

Mai întâi deblocați opțiunea de colț rotunjit, astfel încât să puteți atribui valori individuale fiecărui colț.

Colțul din stânga sus: 100 px
Colțul din dreapta jos: 100 px

Apoi adăugați o umbră de cutie ...

Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei cutiei: 25 px
Box Shadow Vertical Position: -4px
Puterea răspândirii umbrei cutiei: -12px
Culoare umbră: rgba (0,0,0,0.25)

Nu uitați să adăugați adresa URL a linkului modulului, astfel încât modulul dvs. să se conecteze la locația dorită.

Iată designul final.

Pentru un efect de hover, puteți alterna valorile colțului rotunjit pentru a pune designul butonului în direcția opusă pe hover:

Iată cum arată efectul hover.

Gânduri finale

Este întotdeauna plăcut să te gândești din când în când când vine vorba de proiectarea site-urilor web cu Divi. Sperăm că acest tutorial vă ajută să vă gândiți la designuri noi și creative de butoane Divi folosind modulul text. De fapt, aș sugera explorarea altor module (cum ar fi modulul Blurb) pentru mai multe opțiuni de proiectare.

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

Noroc!