Butoanele cu fonturi iconice au multe utilizări în lumea designului web. Deoarece fonturile iconice rămân clare în culori și design, pe măsură ce se redimensionează la diferite dimensiuni, este o idee bună să le folosiți în butoane. Și, crearea unui buton cu fonturi iconice pe Divi este de fapt destul de ușoară folosind fonturile din bibliotecă " ElegantIcons". În acest tutorial, vă voi arăta cum puteți utiliza fonturi de pictograme cu modulul buton Divi pentru a crea un singur buton pictogramă.
Unele dintre aspectele importante ale acestui tutorial includ:
- Cum să utilizați ElegantIcons pentru a adăuga o pictogramă ca text pentru buton
- Cum se adaugă umplutura și raza chenarului pentru a face ca butonul să arate ca un pătrat sau un cerc perfect
- Cum să înlocuiți pictograma butonului cu o pictogramă diferită atunci când plasați cursorul
- Cum să poziționați o pictogramă pentru a suprapune o imagine
- și multe altele ...
studiu
Iată o previzualizare a ceea ce urmează ...
De ce aveți nevoie?
Pentru acest tutorial voi folosi următoarele:
- Divi tema (evident)
- Icoane de font elegant, un tutorial pe Tema elegantă este mult mai precis. După ce ați descărcat fișierul zip din postarea de pe blog, îl vom trage în fișierul cu fonturi eleganticons.ttf pentru al utiliza ca font personalizat pentru modulul nostru de butoane.
- Pagina principală a Bed & Breakfast (disponibil gratuit de la Divi Builder)
Să începem!
Adăugați fontul Elegant Icons la modulul dvs. buton
Adăugați un modul de buton
Pentru a începe, creați o pagină nouă și implementați constructorul vizual. Alegeți „Construiți de la zgârieturi”, apoi, după ce este implementat constructorul vizual, adăugați un rând de coloană la secțiune, apoi adăugați un modul de buton la rând.
Glisați Fontul pictogramei elegante
Pentru a obține jocul de culoare ElegantFontsputeți descărca acest pachet de fonturi prin intermediul acestui link. Extrage-l cuprins din fișierul zip și găsiți fișierele de font cu pictograme elegante navigând la elegant_font > HTML CSS > class. Apoi trageți fișierul „ElegantIcons.ttf” pe computer și plasați-l în generatorul vizual.
Aceasta va afișa modalitatea de descărcare automată a fontului. Doar faceți clic pe butonul de descărcare pentru a descărca fontul în Divi Builder.
Acum veți avea acces la fontul pictogramei elegante atunci când personalizați un font mod în constructorul vizual.
Accesați setările modulului buton și actualizați fontul butonului cu noul font Elegant Icon pe care tocmai l-ați descărcat. Va apărea în lista de pictograme sub „Fonturi personalizate”.
Este posibil să observați că textul butonului dvs. a fost transformat într-o grămadă de icoane. Într-adevăr, fiecare caracter introdus în zona de introducere a textului butonului are acum o pictogramă corespunzătoare literei / caracterului utilizat în prezent.
Deoarece avem nevoie de o singură pictogramă pentru butonul nostru, puteți selecta orice caracter de pe tastatură pentru a genera pictograma asociată cu acel caracter. De exemplu, introduceți numărul 5 pentru textul butonului pentru a obține o săgeată chevron dreapta.
Schimbați pictogramele butonului pe hover
După cum știți, modulul buton include opțiunea de a adăuga pictograme pe hover. Putem utiliza această caracteristică pentru a înlocui fontul pictogramei cu pictograma hover pentru un efect de hover frumos. Tot ce trebuie să facem este să modificăm setările butonului după cum urmează:
Buton Dimensiune text: 30px Pictogramă buton: vezi captura de ecran (aceasta va fi pictograma care va înlocui pictograma fontului utilizată pentru buton) Pictogramă Culoare buton: # 0c71c3 (care ar trebui să se potrivească cu culoarea utilizată pentru textul butonului ) Plasarea pictogramei butonului: Butonul stânga Plasați culoarea textului: rgba (255,255,255,0) (aceasta este complet transparentă pentru a ascunde fontul pictogramei butonului de deplasare). Umplere personalizată: prima stânga, prima dreapta (această umplere va înlocui extinderea în timp ce se deplasează)
Acum tot ce trebuie să facem este să înlocuim marja pentru elementul frontal din CSS personalizat. Mergeți la fila Avansat și introduceți următorul cod CSS în caseta frontală:
margin-left: 0 !important; |
Acum, pictograma butonului dvs. va fi înlocuită cu pictograma cursorului deasupra.
Butoane cu pictograme creative cu cerc redimensionat cu dimensiunea textului butonului
Butoanele în formă de cerc funcționează excelent pentru butoanele cu o singură pictogramă. Și, dacă înțelegeți funcționarea interioară a spațierii modulelor butoanelor, puteți crea butoane perfect circulare care se adaptează la dimensiunea textului butonului.
Trucul este să distanțezi butonul folosind unitatea de lungime „em”. Această unitate de lungime este relativă la dimensiunea textului de pe butonul dvs. Deci, dacă dimensiunea textului butonului este de 30 px, 1em este de asemenea 30px (2em va fi de 60 px și așa mai departe ...). Știind acest lucru, trebuie doar să ne asigurăm că umplutura noastră în jurul butonului nostru va fi aceeași pe toate cele 4 laturi. Dar ceea ce s-ar putea să nu fi luat în considerare este că înălțimea liniei de text a butonului este în mod implicit 1.7em. Aceasta înseamnă că trebuie să luăm în considerare acest lucru atunci când adăugăm valorile noastre de umplere de sus și de jos.
Pentru cei dintre voi care doresc să cunoască matematica din spatele valorilor de umplere necesare pentru a crea butoane de cerc, iată:
Pentru umplerea stângă și dreapta, setați ambele la 1em. Aceasta înseamnă că lățimea totală a butonului dvs. va fi de 90 px (sau 3em), deoarece ...
Căptușire 30px stânga + 30px pentru pictograma font + 30px padding right = 90px total
Înălțimea liniei de text a butonului este 1.7em, sau echivalentul a 170% din dimensiunea textului butonului (30 px), care este de 51 px.
Pentru umplerea de sus și de jos, setați ambele la 0,65em. 0.65em este echivalentul a 65% din dimensiunea textului butonului (30 px), care este echivalent cu 19.5 px.
Deci ...
Învelișul superior 19.5px + înălțimea liniei 51px + căptușirea inferioară 19.5px = total 90px
Aceasta înseamnă că atunci când textul butonului este setat la 30 px, dimensiunea totală a butonului va fi de 90 px cu 90 px (un pătrat perfect). De fapt, vă puteți gândi așa. Indiferent de dimensiunea textului butonului, dimensiunea totală a butonului este de 3 ori valoarea. Deci, textul butonului de 40 px va crea un buton de 120 px cu 120 px etc.
În acest moment, butonul are dimensiunile corecte, dar este încă pătrat. Tot ce trebuie să facem este să adăugăm o rază de margine de 50% pentru a schimba butonul pătrat într-un buton circular perfect.
Iată ce aveți nevoie pentru a schimba butonul dvs. pe un buton cerc:
Butonul pentru raza de frontieră: 50%
Tapiterie personalizată: 0.65 Top, 0.65em Bottom, 1em Dreapta, 1em Stânga
Amintiți-vă, puteți regla dimensiunea textului butonului, iar butonul va rămâne într-un cerc perfect ca umplerea dimensiunii textului.
Adăugarea butoanelor pe Divi
Divi facilitează adăugarea și personalizarea butoanelor de pictograme unice pentru a se potrivi cu designul oricărui aspect predefinit.
Pentru acest exemplu, vă voi arăta cum să adăugați un singur buton pictogramă la aspectul paginii de pornire Bed & Breakfast.
Pentru a adăuga aspectul la pagina dvs., deschideți meniul de setări făcând clic pe pictograma mov din partea de jos a paginii (asigurați-vă că generatorul vizual este activat). Apoi faceți clic pe pictograma Încărcare din bibliotecă. Selectați aspectul paginii de pornire Bed & Breakfast și faceți clic pe butonul „Utilizați acest aspect” pentru a implementa aspectul de pe pagină.
Adăugarea unui buton pictogramă la o imagine
Să presupunem că doriți să adăugați un mic buton pictogramă pentru a suprapune colțul unei imagini cu un CTA suplimentar legat de un anumit produs sau serviciu. Tot ce trebuie să faceți este să adăugați un modul buton sub imagine și să îl personalizați pentru a include fontul pictogramei și ca pictograma să se suprapună peste imagine cu spațiere personalizată.
Căutați secțiunea „Despre noi” pe pagina principală. Apoi adăugați un modul buton direct sub una dintre imaginile folosite pentru a prezenta „Camera dublă” (prima din prima coloană a rândului de trei coloane).
Apoi deschideți setările butonului și puneți un „P” majuscul în caseta de text a butonului. Acest lucru se va schimba în pictograma noastră după ce selectați seturile minunate de fundal, cum ar fi fontul butonului.
Pentru a începe rapid să potriviți designul butoanelor cu aspectul, salvați setările butonului și găsiți butonul „Rezervați acum” în partea de sus a aspectului. Deschideți Setări butoane și copiați stilurile butoanelor făcând clic dreapta pe opțiunea butonului pentru a comuta titlul și selectând opțiunea „Copiere stiluri butoane” din listă.
Acum, faceți clic dreapta pe modulul pe care l-ați adăugat sub imagine și selectați „Lipire stil buton”.
Apoi actualizați setările butonului după cum urmează:
Font Button: Font Awesome
buton font Lățime margine: 0 px
Afișează pictograma butonului: NU
Apoi adăugați umplutura personalizată inteligentă, astfel încât butonul să fie un pătrat perfect:
Vopsea personalizată: 0.65 Top, 0.65em Bottom, 1em Stânga, 1em Dreapta
Pentru a poziționa butonul astfel încât să acopere colțul din dreapta jos al imaginii, trebuie mai întâi să eliminați marginea de jos din modulul de imagine de mai sus. Deschideți setările modulului imagine imagine direct deasupra butonului și setați Marja inferioară la 0 px.
Acum trebuie să trageți butonul peste imagine folosind o valoare a marjei negative personalizate egală cu înălțimea butonului. Pentru a face acest lucru, trebuie să determinăm înălțimea butonului nostru.
Așa cum am menționat anterior în acest articol, odată cu completarea personalizată, putem cunoaște dimensiunea exactă a butonului nostru pe baza dimensiunii actuale a textului butonului. Deoarece dimensiunea textului butonului este de 20 px, știm că înălțimea butonului nostru este de 3em (de 3 ori dimensiunea textului butonului), care este de 60 px. Prin urmare, trebuie să setăm o marjă personalizată pentru butonul nostru după cum urmează:
Marja personalizată: -60px Top
Și atunci putem poziționa butonul nostru pe dreapta, prin ajustarea alinierii butonului din dreapta.
Acum că avem un design funcțional pentru imaginea și butonul nostru. Tot ce trebuie să facem este să adăugăm același buton la toate imaginile din secțiune.
Deoarece am eliminat marginea de jos a imaginii, putem aplica cu ușurință această modificare tuturor imaginilor din secțiune folosind opțiunea Extinde stiluri. Faceți clic dreapta pe imagine și selectați „Extindeți stilurile de imagine”.
În caseta de dialog Extinde stiluri, selectați „Această secțiune” pentru opțiunea Across și faceți clic pe butonul Expand. Acum toate imaginile au o marjă inferioară de 0 px.
Ultimul pas este pur și simplu să copiați și să lipiți modulele Button sub fiecare imagine.
Iată proiectul final.
Și pentru că am folosit tehnici de spațiere adecvate, butonul va rămâne, de asemenea, pe loc ...
Pictograme disponibile folosind modulul buton
Deoarece textul butonului modulului de butoane este limitat la caracterele disponibile pe tastatură, va trebui să explorați aceste taste pentru a găsi pictogramele disponibile asociate fiecărei taste. O modalitate ușoară de a face acest lucru este să creați un modul buton cu fontul butonului setat pe font elegant și să tastați caracterele în caseta de text a butonului.
Iată o captură de ecran a personajelor cu pictograma corespunzătoare a fontului:
Dacă vi se pare că această listă este oarecum exhaustivă, puteți folosi oricând un modul text pentru a crea legături de pictograme folosind codurile Unic enumerate. aici .
Ultimele gânduri
Utilizarea icoanelor elegante cu modulul de butoane Divi este o modalitate convenabilă de a crea butoane unice pentru dvs site-ul web. Acest lucru deschide ușa creativității cu setările modulelor pentru a vă personaliza butonul cu stiluri de text unice, efecte de trecere cu mouse-ul și multe altele. Îmi plac în special valorile personalizate de spațiere între butoane, care asigură ca butoanele să ia forma unui pătrat sau cerc perfect.
Există multe utilizări pentru butoanele pictograme. Sperăm că exemplul de utilizare acoperit în acest tutorial va adăuga o inspirație propriilor dvs. proiecte.
