Doriți să știți cum să utilizați modulul Icon al Divi pentru a crea pictograme personalizate?
Butoanele pictograme au devenit un element de bază în lumea designului web. Pictogramele oferă îndemnuri vizuale la acțiune concise care funcționează excelent pentru dispozitivele mobile, deoarece nu ocupă mult spațiu. De asemenea, funcționează bine ca butoane de comutare sau pop-up pe care utilizatorii le recunosc intuitiv, fără a fi nevoie de text.
În tutorialul de astăzi vă vom arăta cum să proiectați butoanele cu pictograme Divi. Creați un buton pictogramă în Divi este destul de simplu și distractiv de făcut.
Folosind modulul Pictograme, putem alege dintre sute de pictograme și putem folosi nenumărate opțiuni de design încorporate din Divi Builder pentru a crea aproape orice tip de buton pictogramă la care vă puteți gândi.
Sperăm că acest articol vă va ajuta să începeți să creați butoane cu pictograme uimitoare pentru următorul dvs. proiect.
Să începem!
studiu
Iată o prezentare rapidă a butoanelor pictograme pe care le vom crea în acest tutorial.
Creați o pagină nouă cu Divi Builder
Vezi si: Divi: Cum să personalizați coșul și pictogramele de căutare ale modulului „Fullwidth Menu”.
Din tabloul de bord WordPress, accesați Pagini> Adăugare nouă pentru a crea o pagină nouă.
Dați-i un titlu care să aibă sens pentru dvs. și faceți clic Utilizați Divi Builder
Apoi faceți clic pe Începeți să construiți (Construiește de la zero)
După aceea, veți avea o pânză goală pentru a începe proiectarea în Divi.
Creați butoane pictograme cu modulul Pictograme Divi
Partea 1: Crearea unui buton pictogramă
Pentru a începe, să adăugăm un rând cu o singură coloană la secțiunea obișnuită implicită.
Apoi adăugați un nou modul Icoană la coloană.
Pictogramă, URL-ul linkului și culoarea de fundal
Sub filă Conţinut setările modulului de pictograme, actualizați următoarele:
- Pictogramă: săgeată la dreapta (vezi captura de ecran)
- Adresa URL a linkului pictogramei: # (doar o completare pentru moment)
- Fundal: #3e22ff
Chenar și raza graniței
Sub filă Amenajări, actualizați următoarele:
- Colțuri rotunjite: 10px
- Lățimea chenarului: 2px
- Culoare chenar: #7272ff
Cutie de umbră
- Box Shadow: vezi captura de ecran
- Culoare umbră: rgba(62,34,255,0.48)
Potrivirea spațiului pe care se poate face clic cu dimensiunea butonului pictogramei
În prezent, modulul pictogramă se va întinde pe toată lățimea containerului (sau coloanei) părinte. Aceasta înseamnă că spațiul pe care se poate face clic este mai mare decât butonul pictogramă real.
Pentru a potrivi spațiul pe care se poate face clic cu dimensiunea butonului pictogramei, putem da modulului o lățime maximă care este aceeași cu lățimea butonului pictogramă.
În acest exemplu, lățimea totală a butonului este de 94 de pixeli.
Sub fila avansată, adăugați următorul CSS personalizat la elementul principal:
max-width: 94px
Iată rezultatul.
Partea 2: Creați un buton cu pictogramă pătrată
Pentru a crea butonul nostru cu pictogramă pătrată, duplicați rândul care conține primul buton pictogramă pe care tocmai l-am creat. Acest lucru ne va oferi un buton duplicat pe rând cu care să lucrăm.
Dați pictogramei aceeași înălțime și lățime, menținând-o centrată
Colecția mare de pictograme disponibile pentru utilizare în modulul Icon include atât pictograme Divi, cât și pictograme Fontawesome. Cu toate acestea, nu toate pictogramele vor avea aceeași înălțime și lățime. Acest lucru face un pic mai dificilă determinarea lățimii și înălțimii exacte a butonului pictogramă.
Pentru a crea un buton perfect pătrat care activează pictograma la trecerea cursorului, putem adăuga CSS personalizat pentru a seta o înălțime și lățime pentru pictogramă, precum și să centrem pictograma folosind proprietatea CSS Flex.
Iată cum.
Mai întâi, deschideți setările pictogramei duplicat. Apoi actualizați pictograma cu una nouă din selectorul de pictograme.
Scoateți căptușeala din modulul de pictograme. Acest lucru nu va fi necesar, deoarece vom seta o înălțime și o lățime pentru pictogramă.
Sub fila avansată, adăugați următorul CSS personalizat la Element de pictogramă :
height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
Acum butonul pictogramă va avea înălțimea și lățimea egale cu 90 de pixeli, făcându-l un pătrat perfect. De asemenea, proprietatea flex aliniază pictograma din centrul modulului. Acest lucru vă permite să actualizați cu ușurință dimensiunea pictogramei în modulul pictogramei.
Pentru a finaliza acest buton, să-i dăm un gradient de fundal și o culoare albă a marginii, după cum urmează:
- Opriri de gradient:
- 0%: #3e22ff
- 100%: #ff2000
- Culoare chenar: #fff
Iată rezultatul final.
Creați butonul pictogramă circulară
Odată ce butonul pictogramă este un pătrat perfect, a-l face circular este simplu. Dar înainte de a vă arăta acest truc simplu, să duplicăm linia anterioară pentru a începe să construim butonul nostru cu pictogramă circulară.
Acum deschideți setările pentru noua noastră pictogramă duplicat și sub filă Amenajări, actualizați raza marginii (sau colțurile rotunjite) după cum urmează:
- Colțuri rotunjite: 50%
Și chiar așa, avem un buton cu pictogramă circulară!
Pentru a schimba puțin designul, să dăm modulului pictogramei o pictogramă și o culoare de fundal diferite, după cum urmează:
- Pictogramă: vezi captura de ecran
- Fundal: #121212
Iată rezultatul.
Creați un meniu orizontal cu butonul pictogramă
O tendință populară este utilizarea pictogramelor pentru a crea un meniu cu pictograme care constă de obicei din mai multe butoane plasate unul lângă altul. Pentru a face acest lucru, putem folosi proprietatea flex.
Iată cum să faceți acest lucru.
Mai întâi, adăugați un nou rând la o coloană de pe pagină.
Deschideți setările liniei și actualizați lățimea jgheabului la 1.
- Lățimea jgheabului: 1
Apoi, deschideți setările coloanei în interiorul rândului și adăugați următorul CSS personalizat la elementul principal al coloanei:
display:flex;
align-items:center;
Adăugați un modul nou Icoană la coloană.
Sub filă Conţinut setările pictogramei, selectați o pictogramă și adăugați adresa URL a linkului pictogramei.
Sub filă Amenajări, actualizați următoarele:
- Culoare pictogramă: #3e22ff
- Dimensiunea pictogramei: 40px
- Marja (stânga și dreapta): 10px
- Lățimea chenarului: 2px
- Culoare chenar: #3e22ff
OBSERVAȚIE : Marja va crea spațiu între butoanele adiacente odată ce vom adăuga mai multe mai târziu.
Sub filă Avansat, adăugați următorul CSS personalizat în câmp Element de pictogramă (cum am făcut mai devreme pentru butonul cu pictograma pătrată):
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
Acum, ori de câte ori adăugăm noi butoane pictograme, acestea vor apărea unul lângă altul. Pentru a ilustra acest lucru, să duplicăm butonul de pictogramă existent de trei ori pentru a crea un total de patru butoane pictograme în meniul orizontal.
După aceea, putem reveni și actualiza pictogramele după cum este necesar.
Iată rezultatul.
S-au adăugat efecte de trecere la butonul cu pictogramă
Este greu să vorbim despre designul butoanelor cu pictograme fără a menționa efectele de trecere cu mouse-ul. Sunt prea distractive pentru a le ignora.
Schimbarea culorii de fundal și a culorii pictogramei la trecerea cursorului
Schimbarea culorilor butoanelor este un efect de hover popular și eficient. De exemplu, putem schimba simultan culoarea de fundal și culoarea pictogramei atunci când utilizatorul trece cu mouse-ul peste buton.
Pentru a face acest lucru, deschideți setările modulului de pictograme și activați opțiunile de trecere cu mouse-ul pentru culoarea de fundal și alegeți o culoare diferită pentru starea de trecere. Apoi puteți face același lucru pentru pictogramă.
În acest exemplu, schimbăm culoarea de fundal din alb în albastru și pictograma din albastru în alb.
Schimbați pictograma la trecerea cursorului
Un alt efect de hover care v-ar putea plăcea este să schimbați complet pictograma. Pentru a face acest lucru, puteți alege o pictogramă diferită pentru starea de trecere cu mouse-ul atunci când alegeți o pictogramă în setările pictogramei.
Scala butonului cu pictogramă la trecerea cursorului
Un efect de hover greu de ignorat este efectul de scalare. Aceasta mărește sau mărește butonul pictogramă. Cel mai bun mod de a adăuga acest tip de efect de hover este să utilizați opțiunile de transformare ale Divi. Acest lucru va permite butonul să crească fără a afecta elementele din jurul lui.
Pentru a adăuga un efect de trecere la scară la butonul pictogramei, deschideți setările pictogramei și sub fila de Amenajări, căutați opțiuni de transformare. Activați opțiunile de trecere cu mouse-ul, apoi atribuiți următoarea scară de transformare stării de trecere cu mouse-ul:
- Transformare Y: 118%
- Transformare X: 118%
Acest lucru va crește dimensiunea butonului pictogramă cu 18% atunci când utilizatorul trece cu mouse-ul peste el.
Rotiți butonul pictogramă la trecerea cursorului
Rotirea obiectelor care plutesc este întotdeauna o micro-interacțiune distractivă. Pentru a roti un buton pictogramă la trecerea cursorului, putem folosi opțiunea de rotație de transformare. Dar înainte de asta, să facem butonul circular, astfel încât doar pictograma să apară să se rotească.
Pentru a face pictograma circulară, presupunând că butonul este un pătrat, pur și simplu actualizați setarea colțurilor rotunjite la 50% pe toate cele patru colțuri.
Apoi actualizați opțiunile de transformare pentru a include următoarea valoare de rotație a transformării în starea de trecere cu mouse-ul:
- Transformare Rotire Z: 180deg
Să aruncăm o privire la cele 4 efecte de hover în acțiune.
Rezultat final
Să aruncăm o privire la rezultatele finale ale tutorialului nostru.
Citiți și: Divi: Cum să evidențiați un modul „Blurb” la hover și să estompați pe celelalte
Iată cele trei butoane pictograme (standard, pătrate și circulare).
Și aici este meniul butonului cu pictogramă orizontală cu efecte de hover.
Descărcați DIVI acum!!!
Concluzie
Aflați cum să proiectați butoanele pictograme pentru a site-ul web este esential. Și, așa cum am văzut în acest tutorial, nu este atât de greu cu Divi. Modulul de pictograme al lui Divi are o mulțime de opțiuni încorporate care deschid ușa către modelele creative de butoane cu pictograme.
Sperăm că tehnicile din acest articol vă vor ajuta să deblocați o parte din magia propriilor modele de butoane cu pictograme.
Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
