Cum se creează butoane cu fonturi Icon cu Divi

Butoanele cu fonturi cu pictograme au multe utilizări în lumea designului web. Deoarece pictogramele fontului rămân clare în culori și design, pe măsură ce se redimensionează la diferite dimensiuni, este logic să le folosiți în butoane. Și, crearea unui buton cu font de pictogramă în Divi este de fapt destul de ușor folosind Fontul cu pictograme elegante. În acest tutorial, vă voi arăta cum puteți utiliza fonturile de pictograme cu modulul de butoane Divi pentru a crea un singur buton de pictograme.

Unele dintre cele mai importante momente ale acestui tutorial includ:

• Cum se utilizează Fontul elegant pentru a adăuga o pictogramă ca text al butonului
• Modul de adăugare a ramei de umplere și a chenarului care asigură că butonul ia forma unui pătrat sau cerc perfect
• Cum se înlocuiește pictograma butonului cu o pictogramă diferită pe hover
• Cum să poziționați pictograma unui buton pentru a suprapune o imagine
• și altele…

Trage cu ochiul

Iată o scurtă privire asupra a ceea ce va urma ...

De ce ai nevoie

Pentru acest tutorial, voi folosi următoarele:

• Tema Divi (evident)
• Icoanele cu fonturi elegante - Odată ce ați descărcat fișierul zip din postarea de pe blog, vom trage fișierul cu fonturi eleganticons.ttf pentru a fi folosit ca font personalizat pentru modulul nostru de butoane.
• Aspectul paginii de pornire Bed & Breakfast (disponibil gratuit de la Divi Builder)

Să începem!

Adăugarea fontului cu pictograme elegante în modulul dvs. de butoane

Adăugați un modul buton

Pentru a începe, creați o pagină nouă și implementați constructorul vizual. Alegeți „Construiți din zgârieturi” și apoi, odată ce este creat implementatorul vizual, adăugați un rând cu o coloană la secțiune și apoi adăugați un modul buton la rând.

Trageți în Fontul pictogramei elegante

Pentru a obține Fontul cu pictogramă elegantă, accesați Postarea pe blogul cu pictograma Elegant Icon și descărcați fișierul cu fonturi. Extrageți conținutul fișierului zip și găsiți fișierele de fonturi cu pictograme elegante navigând la elegant_font> HTML CSS> fonturi. Apoi trageți fișierul „ElegantIcons.ttf” din fișierul computerului și plasați-l în generatorul vizual.

Aceasta va afișa automat Încărcare font modal. Pur și simplu faceți clic pe butonul de încărcare pentru a încărca fontul în Divi Builder.

Acum veți avea acces la elegantul Icon Font când personalizați orice font de modul din constructorul vizual.

Accesați setările modulului buton și actualizați fontul butonului cu noul Font Elegant Icon pe care tocmai l-ați încărcat. Se va afișa în lista de pictograme sub „Fonturi personalizate”.

Este posibil să observați că acum textul butonului dvs. a fost transformat într-o grămadă de icoane. Acest lucru se datorează faptului că fiecare caracter introdus în caseta de introducere a textului butonului are acum o pictogramă care corespunde 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ă funcționalitate 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ă:

Dimensiune text buton: 30 px
Pictogramă buton: vezi captura de ecran (aceasta va fi pictograma care va înlocui fontul pictogramei utilizat pentru buton)
Culoare pictogramă buton: # 0c71c3 (aceasta ar trebui să se potrivească cu culoarea utilizată pentru textul butonului)
Plasare pictogramă buton: stânga
Culoare text buton hover: rgba (255,255,255,0) (aceasta este complet transparentă pentru a ascunde fontul pictogramei butonului pe hover)
Împletire personalizată: 1em stânga, 1em dreapta (această umplere va suprascrie umplerea implicită a butonului și o va împiedica să se extindă la trecere)

Acum tot ce trebuie să facem este să suprascrieți marja pentru elementul anterior din css-ul personalizat. Mergeți la fila Avansat și introduceți următorul CSS în caseta anterioară:

margin-left: 0 !important;

Acum, pictograma butonului dvs. va fi înlocuită de pictograma cu mouse-ul pe hover.

Crearea perfectă a butoanelor cu pictograme cerc care se dimensionează cu dimensiunea textului butonului

Proiectarea butoanelor Circle funcționează foarte bine pentru butoanele cu o singură pictogramă. Și, dacă înțelegeți funcționarea interioară a spațiului modulului butonului, puteți crea butoane perfect circulare care se potrivește în funcție de dimensiunea textului butonului.

Trucul constă în a spaționa butonul folosind unitatea de lungime „em”. Această unitate de lungime este relativă la dimensiunea textului butonului. Deci, dacă butonul are dimensiunea textului de 30 px, 1em este, de asemenea, 30 px (2em ar fi 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 este posibil să nu fi luat în considerare faptul că textul butonului înălțimea liniei este de 1,7em în mod implicit. Asta î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 aceia dintre voi care doresc să știe matematica din spatele valorilor de umplere necesare pentru a crea butoane de cerc, iată:

Pentru umplutura stânga și dreapta, setați-le pe ambele la 1em. Aceasta înseamnă că lățimea totală a butonului nostru va fi de 90 px (sau 3em), deoarece ...

30 px de umplere la stânga + 30 px de font pictogramă + 30 px de umplere la dreapta = 90 px total

Înălțimea liniei de text a butonului este 1,7em, care este echivalentul a 170% din dimensiunea textului butonului (30 px), care este egal cu 51 px.

Pentru umplutura de sus și de jos, setați-le pe ambele la 0,65em. 0.65em este echivalentul a 65% din dimensiunea textului butonului (30 px), care este egal cu 19,5 px.

Prin urmare…

19,5 px de umplutură superioară + 51 px de înălțime a liniei + 19,5 px de umplutură de jos = 90 px total

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 astfel. Indiferent ce setați ca dimensiune a textului butonului, dimensiunea totală a butonului va fi de 3x acea valoare. Deci, textul unui buton de 40 px va crea un buton de 120 px cu 120 px și așa mai departe.

În acest moment, butonul are dimensiunile potrivite, 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ă de ce aveți nevoie pentru a vă schimba butonul într-un buton cerc:

Raza chenarului butonului: 50%
Căptușeală personalizată: 0,65em sus, 0,65em jos, 1em dreapta, 1em stânga

Nu uitați, puteți ajusta dimensiunea textului butonului, iar butonul va rămâne perfect cerc pe măsură ce căptușeala se adaptează la dimensiunea textului.

Adăugarea de butoane cu pictograme la aspectul dvs. Divi

Divi facilitează adăugarea și personalizarea butoanelor cu o singură pictogramă pentru a se potrivi cu designul oricărui aspect premodat.

Pentru acest exemplu, vă voi arăta cum să adăugați un singur buton cu 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ă este activat generatorul vizual). 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 pe pagină.

Adăugarea unui buton pictogramă la o imagine

Să presupunem că doriți să adăugați un mic buton cu pictogramă pentru a suprapune colțul unei imagini pentru un CTA suplimentar care se leagă de un anumit produs sau serviciu. Tot ce trebuie să faceți este să adăugați un modul de buton sub imagine și să-l personalizați pentru a include fontul pictogramei și a-l face să se suprapună peste imagini cu spațiu personalizat.

Găsiți secțiunea „Despre noi” din aspectul paginii de pornire. Apoi adăugați un modul buton direct sub una dintre imaginile utilizate pentru a prezenta „Camera dublă” (este prima din prima coloană a rândului cu trei coloane).

Apoi deschideți setările butonului și puneți un „P” majuscul în caseta de text a butonului. Acest lucru se va transforma în pictograma noastră după ce selectați fontul Elegant ca Font Buton.

Pentru a începe să se potrivească designul butonului cu aspectul, salvați setările butonului și găsiți butonul „Rezervați acum” în secțiunea superioară a aspectului. Deschideți setările butoanelor și copiați stilurile butoanelor făcând clic dreapta pe Opțiuni buton Comută titlu și selectând opțiunea „Copiere stiluri butoane” din listă.

Acum faceți clic dreapta pe modulul buton pe care l-ați adăugat sub imagine și selectați „Lipiți stiluri de butoane”.

Apoi actualizați setările butonului după cum urmează:

Buton Font: Font elegant
Lățimea chenarului butonului: 0 px
Afișează pictograma butonului: NU

Apoi, să adăugăm căptușeala noastră personalizată inteligentă pentru a ne asigura că butonul este un pătrat perfect:

Căptușeală personalizată: 0,65em sus, 0,65em jos, 1em stânga, 1em dreapta

Pentru a poziționa butonul astfel încât să se suprapună peste colțul din dreapta jos al imaginii, va trebui mai întâi să scăpați de marginea inferioară a modulului de imagine de mai sus. Deschideți setările modulului de imagine al imaginii direct deasupra butonului și setați marginea de jos la 0 px.

Acum trebuie să tragem butonul în sus deasupra imaginii 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 mai devreme în această postare, cu umplutura personalizată, putem cunoaște dimensiunea exactă a butonului nostru pe baza dimensiunii textului butonului curent. 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ă:

Marjă personalizată: -60px Top

Și apoi putem poziționa butonul la dreapta ajustând butonul Aliniere la dreapta.

Acum, că avem un design funcțional pentru imagine și buton. Tot ce trebuie să facem este să adăugăm același buton la toate imaginile din secțiune.

Deoarece am scos marginea inferioară a imaginii, putem aplica cu ușurință această modificare tuturor imaginilor din secțiune folosind Extind Styles. Faceți clic dreapta pe imagine și selectați „Extindeți stilurile de imagine”.

În fereastra pop-up Extend Styles, selectați „Această secțiune” pentru opțiunea Throughout și faceți clic pe butonul de extindere. Acum, toate imaginile au o marjă inferioară de 0 px.

Ultimul pas este pur și simplu copierea și lipirea modulelor Buton sub fiecare dintre imagini.

Iată designul final.

Și pentru că am folosit tehnici de spațiere adecvate, butonul va rămâne în poziție și pe mobil ...

Pictograme disponibile utilizând modulul Buton

Deoarece textul butonului modulului butonului este limitat la caracterele disponibile pe tastatură, va trebui să explorați acele 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 la Font elegant și să tastați caracterele în caseta de text a butonului.

Aici este captura de ecran a personajelor cu pictograma corespunzătoare a fontului:

Dacă acest proces este limitat, puteți folosi oricând un modul text pentru a crea legături de pictograme folosind unicodele enumerate aici.

Gânduri finale

Utilizarea Fontului cu pictograme elegante cu modulul de butoane Divi este o modalitate convenabilă de a crea butoane cu pictograme unice pentru site-ul dvs. web. Acest lucru deschide niște uși pentru a deveni creativi cu setările modulului pentru a vă personaliza butonul cu stiluri de text unice, efecte de cursor și multe altele. Îmi plac în special acele valori personalizate de spațiere a butoanelor care asigură că butoanele iau forma unui pătrat sau cerc perfect.

Există multe utilizări pentru butoanele pictograme. Sperăm că exemplul de utilizare pe care l-am acoperit va adăuga puțină inspirație pentru propriile dvs. proiecte.

Pentru mai multe idei, consultați cum să utilizați Fontul cu pictograme elegante sau cum să încorporați un font cu pictograme pe site-ul dvs. web.

Mi-ar plăcea să vă prezint câteva idei de la dvs. în comentariile de mai jos.

Noroc!