Želite li znati kako koristiti modul ikona za Divi stvoriti prilagođene ikone?
Gumbi ikona postali su glavna stvar u svijetu web dizajna. Ikone pružaju sažete vizualne pozive na radnju koji odlično funkcioniraju za mobilne uređaje jer ne zauzimaju puno prostora. Također dobro funkcioniraju kao preklopni ili skočni gumbi koje korisnici intuitivno prepoznaju bez potrebe za tekstom.
U današnjem vodiču pokazat ćemo vam kako dizajnirati gumbe s ikonama Divi. Stvorite gumb ikone u Divi je vrlo jednostavno i zabavno za napraviti.
Pomoću modula Ikone možemo birati između stotina ikona i koristiti bezbrojne ugrađene opcije dizajna iz Divi Alat za izradu gotovo svake vrste gumba ikone koje se sjetite.
Nadamo se da će vam ovaj članak pomoći da počnete stvarati nevjerojatne gumbe s ikonama za svoj sljedeći projekt.
Krenimo!
pregled
Evo kratkog pregleda gumba ikona koje ćemo izraditi u ovom vodiču.
Stvorite novu stranicu s Divi Builderom
Vidi također: Divi: Kako prilagoditi košaricu i ikone pretraživanja modula "Fullwidth Menu"
S WordPress nadzorne ploče idite na Stranice> Dodaj novo za stvaranje nove stranice.
Dajte mu naslov koji vam ima smisla i kliknite Koristite Divi Builder
zatim kliknite Počnite graditi (Gradi od ogrebotina)
Nakon toga imat ćete prazno platno za početak dizajniranja u Divi.
Stvorite gumbe s ikonama s modulom Divi Icons
1. dio: Stvaranje gumba ikone
Za početak, dodajmo redak s jednim stupcem zadanom redovnom odjeljku.
Zatim dodajte novi modul Ikona na stupac.
Ikona, URL veze i boja pozadine
Ispod kartice Sadržaj postavke modula ikona, ažurirajte sljedeće:
- Ikona: strelica desno (pogledajte snimak zaslona)
- Ikona Link URL: # (za sada samo ispuna)
- Pozadina: #3e22ff
Granica i rubni radijus
Ispod kartice dizajnažurirajte sljedeće:
- Zaobljeni uglovi: 10 px
- Širina obruba: 2 px
- Boja obruba: #7272ff
Kutija sjena
- Box Shadow: Pogledajte snimak zaslona
- Boja sjene: rgba(62,34,255,0.48)
Usklađivanje prostora na koji se može kliknuti s veličinom gumba ikone
Trenutno će se modul ikone prostirati cijelom širinom nadređenog spremnika (ili stupca). To znači da je prostor na koji se može kliknuti veći od stvarnog gumba ikone.
Kako bismo uskladili prostor na koji se može kliknuti s veličinom gumba ikone, modulu možemo dati maksimalnu širinu koja je jednaka širini gumba ikone.
U ovom primjeru, ukupna širina gumba je 94 piksela.
Na naprednoj kartici glavnom elementu dodajte sljedeći prilagođeni CSS:
max-width: 94px
Evo rezultata.
2. dio: Napravite kvadratni gumb ikone
Da biste stvorili kvadratni gumb ikone, duplicirajte redak koji sadrži prvi gumb ikone koji smo upravo stvorili. Ovo će nam dati duplicirani gumb u redu s kojim ćemo raditi.
Dajte ikoni istu visinu i širinu dok je centrirana
Velika kolekcija ikona dostupnih za korištenje u modulu ikona uključuje Divi ikone i Fontawesome ikone. Međutim, neće sve ikone imati istu visinu i širinu. Zbog toga je malo teže odrediti točnu širinu i visinu gumba ikone.
Kako bismo stvorili savršeno četvrtasti gumb koji zahvaća ikonu dok lebdimo, možemo dodati prilagođeni CSS za postavljanje visine i širine ikone, kao i centriranje ikone pomoću svojstva CSS Flex.
Evo kako.
Prvo otvorite postavke dupliciranih ikona. Zatim ažurirajte ikonu novom iz alata za odabir ikona.
Uklonite oblogu s modula ikone. Ovo neće biti potrebno jer ćemo postaviti visinu i širinu za ikonu.
Na naprednoj kartici dodajte sljedeći prilagođeni CSS Element ikone :
height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
Sada će gumb ikone imati visinu i širinu jednaku 90 piksela, što ga čini savršenim kvadratom. Također, svojstvo flex poravnava ikonu u sredini modula. To vam omogućuje jednostavno ažuriranje veličine ikona u modulu ikona.
Da bismo dovršili ovaj gumb, dajmo mu pozadinski gradijent i bijelu boju ruba kako slijedi:
- Gradijent zaustavljanja:
- 0%: #3e22ff
- 100%: #ff2000
- Boja obruba: #fff
Evo konačnog rezultata.
Gumb Stvori kružnu ikonu
Nakon što je gumb ikone savršen kvadrat, jednostavno ga je napraviti kružnim. Ali prije nego što vam pokažemo ovaj jednostavan trik, duplicirajmo prethodni redak da počnemo graditi naš gumb kružne ikone.
Sada otvorite postavke za našu novu dupliciranu ikonu i ispod kartice dizajnažurirajte radijus granice (ili zaobljene kutove) na sljedeći način:
- Zaobljeni uglovi: 50%
I upravo tako, imamo gumb kružne ikone!
Kako bismo malo promijenili dizajn, dajmo modulu ikone drugu ikonu i boju pozadine kako slijedi:
- Ikona: pogledajte snimak zaslona
- Pozadina: #121212
Evo rezultata.
Stvorite vodoravni izbornik gumba ikone
Popularan trend je korištenje ikona za stvaranje izbornika ikona koji se obično sastoji od nekoliko gumba postavljenih jedan pored drugog. Da bismo to učinili, možemo koristiti svojstvo flex.
Evo kako to učiniti.
Prvo dodajte novi red u stupac na stranici.
Otvorite postavke linije i ažurirajte širinu oluka na 1.
- Širina oluka: 1
Zatim otvorite postavke stupca unutar retka i dodajte sljedeći prilagođeni CSS elementu glavnog stupca:
display:flex;
align-items:center;
Dodajte novi modul Ikona na stupac.
Ispod kartice Sadržaj postavke ikone, odaberite ikonu i dodajte URL veze ikone.
Ispod kartice dizajnažurirajte sljedeće:
- Boja ikone: #3e22ff
- Veličina ikone: 40px
- Margina (lijeva i desna): 10px
- Širina obruba: 2 px
- Boja obruba: #3e22ff
NAPOMENA: Margina će stvoriti razmak između susjednih gumba kada kasnije dodamo još.
Ispod kartice napredan, dodajte sljedeći prilagođeni CSS u polje Element ikone (kao što smo ranije učinili za gumb kvadratne ikone):
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
Sada kad god dodamo nove gumbe s ikonama, oni će se pojaviti jedan pored drugog. Da bismo to ilustrirali, duplicirajmo postojeći gumb ikone tri puta kako bismo stvorili ukupno četiri gumba ikone u vodoravnom izborniku.
Nakon toga možemo se vratiti i po potrebi ažurirati ikone.
Evo rezultata.
Dodani efekti lebdenja na gumb ikone
Teško je govoriti o dizajnu gumba ikona bez spominjanja efekata lebdenja. Jednostavno su previše zabavni da bi ih se zanemarilo.
Promjena boje pozadine i boje ikone pri lebdenju
Mijenjanje boja gumba popularan je i učinkovit efekt lebdenja. Na primjer, možemo promijeniti boju pozadine i boju ikone istovremeno kada korisnik prijeđe pokazivačem iznad gumba.
Da biste to učinili, otvorite postavke modula ikone i omogućite opcije lebdenja za boju pozadine i odaberite drugu boju za stanje lebdenja. Zatim možete učiniti isto za ikonu.
U ovom primjeru mijenjamo boju pozadine iz bijele u plavu i ikonu iz plave u bijelu.
Promjena ikone pri lebdenju
Još jedan efekt lebdenja koji bi vam se mogao svidjeti je potpuna promjena ikone. Da biste to učinili, možete odabrati drugu ikonu za stanje lebdenja kada odaberete ikonu u postavkama ikone.
Skala gumba ikone pri lebdenju
Efekt lebdenja koji je teško zanemariti je efekt lebdenja skaliranja. Ovo povećava ili povećava gumb ikone. Najbolji način za dodavanje ove vrste efekta lebdenja je korištenje Divi-jevih opcija transformacije. To će omogućiti da gumb raste bez utjecaja na elemente oko njega.
Da biste gumbu ikone dodali efekt lebdenja na skali, otvorite postavke ikone i pod karticom dizajn, potražite opcije transformacije. Omogućite opcije lebdenja, a zatim dodijelite sljedeću skalu transformacije stanju lebdenja:
- Transformacija Y: 118%
- Transformacija X: 118%
Ovo će povećati veličinu gumba ikone za 18% kada korisnik prijeđe pokazivačem iznad njega.
Gumb za rotiranje ikone pri lebdenju
Rotiranje lebdećih objekata uvijek je zabavna mikrointerakcija. Za rotiranje gumba ikone dok lebdimo, možemo koristiti opciju rotiranja transformacije. Ali prije toga neka gumb bude kružni tako da se samo ikona rotira.
Kako bi ikona bila kružna, pod pretpostavkom da je gumb kvadrat, jednostavno ažurirajte postavku zaobljenih kutova na 50% na sva četiri kuta.
Zatim ažurirajte opcije transformacije kako biste uključili sljedeću vrijednost rotacije transformacije u stanju lebdenja:
- Transformacija Rotacija Z: 180 stupnjeva
Pogledajmo naša 4 efekta lebdenja na djelu.
Konačni rezultat
Pogledajmo konačne rezultate našeg vodiča.
Pročitajte također: Divi: Kako istaknuti modul "Blurb" dok lebdite i zamutiti ostale
Ovdje su naša tri gumba s ikonama (standardni, kvadratni i kružni).
A ovdje je vodoravni izbornik gumba ikone s efektima lebdenja.
Preuzmite DIVI odmah!!!
Zaključak
Znati dizajnirati gumbe ikona za a web stranica je bitno. I, kao što smo vidjeli u ovom vodiču, to nije tako teško s Divi. Divi's Icon Module ima hrpu ugrađenih opcija koje otvaraju vrata kreativnom dizajnu gumba ikona.
Nadamo se da će vam tehnike u ovom članku pomoći da otključate dio čarolije vlastitog dizajna gumba ikona.
Ako imate bilo kakvih nedoumica ili prijedloga, pronađite nas u odjeljak komentara raspravljati o tome.
Također se možete konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
