Gumbi s ikonskim fontovima imaju mnogo primjena u svijetu web dizajna. Budući da fontovi ikona ostaju svježi u boji i dizajnu dok se prilagođavaju različitim veličinama, ima smisla koristiti ih u gumbima. A, stvaranje gumba s ikonskim fontovima na Diviju zapravo je vrlo jednostavno pomoću fontova iz knjižnice " ElegantIcons". U ovom uputstvu pokazat ću vam kako možete koristiti fontove ikona s modulom gumba Divi za stvaranje jednog gumba ikone.
Neki od vrhunaca ovog vodiča uključuju:
- Kako koristiti ElegantIcons da biste dodali ikonu u obliku teksta gumba
- Kako dodati udaljenost i radijus obruba kako bi gumb izgledao kao savršeni kvadrat ili krug
- Kako zamijeniti ikonu gumba drugom ikonom prilikom lebdenja
- Kako postaviti ikonu gumba za preklapanje slike
- i još mnogo toga ...
pregled
Evo pregleda onoga što dolazi ...
Što trebate?
Za ovaj ću vodič koristiti sljedeće:
- Divi tema (očito)
- Stilizirane ikone fonta, udžbenik o Elegantna tema je puno precizniji. Nakon što preuzmete zip datoteku s bloga, povući ćemo je u datoteku fonta eleganticons.ttf koja će se koristiti kao prilagođeni font za naš modul gumba.
- Početna stranica noćenja s doručkom (dostupan besplatno od Divi Builder-a)
Započnimo!
Dodajte font Elegant Icons u modul gumba
Dodajte modul gumba
Da biste započeli, izradite novu stranicu i postavite vizualni graditelj. Odaberite "Izgradi iz ogrebotina", a zatim nakon postavljanja vizualnog graditelja dodajte redak stupca u odjeljak, a zatim dodajte modul gumba u redak.
Povucite stilski font ikone
Da biste dobili igru u boji ElegantFontsmožete preuzeti ovaj paket fonta preko ove veze. Ekstrahirajte ga sadržaj iz zip datoteke i pronađite datoteke fontova elegantne ikone tako da odete na elegant_font > HTML CSS > klasa. Zatim povucite datoteku “ElegantIcons.ttf” na svoje računalo i ispustite je u vizualni alat.
Ovo će otvoriti način automatskog preuzimanja fonta. Samo kliknite gumb za preuzimanje da biste preuzeli font u Divi Builder.
Sada ćete imati pristup stilskom fontu ikone prilikom prilagođavanja modnog fonta u vizualnom alatu.
Idite na postavke modula gumba i ažurirajte font gumba novim fontom Elegant Icon koji ste upravo preuzeli. Pojavit će se na popisu ikona pod "Prilagođeni fontovi".
Možda ćete primijetiti da je tekst gumba pretvoren u hrpu ikona. U stvari, svaki znak unet u područje za unos teksta gumba sada ima ikonu koja odgovara slovu / znaku koji se trenutno koristi.
Budući da nam za naš gumb treba samo jedna ikona, na tipkovnici možete odabrati bilo koji znak da biste generirali ikonu povezanu s tim znakom. Na primjer, unesite broj 5 za tekst gumba da biste dobili strelicu desno chevron.
Zamijenite ikone gumba pri zadržavanju pokazivača
Kao što znate, modul gumba uključuje mogućnost dodavanja ikona prilikom prelaska mišem. Ovu značajku možemo koristiti za zamjenu fonta ikone ikonom lebdenja za lijep efekt lebdenja. Sve što trebamo je promijeniti postavke gumba kako slijedi:
Gumb Veličina teksta: 30px Ikona gumba: pogledajte snimku zaslona (ovo će biti ikona koja će zamijeniti ikonu fonta koja se koristi za gumb) Boja gumba ikone: # 0c71c3 (koja bi trebala odgovarati boji korištenoj za tekst gumba ) Položaj ikone gumba: Boja teksta lijevog gumba lebdi: rgba (255,255,255,0) (ovo je potpuno prozirno kako bi se sakrio font ikone gumba lebdenja). Prilagođeno popunjavanje: 1. lijevo, 1. desno (ovo popunjavanje zamijenit će proširivanje dok lebdite)
Sada sve što trebamo učiniti je zamijeniti marginu za prednji element u prilagođenom css-u. Idite na karticu Napredno i u prednji okvir unesite sljedeći CSS kôd:
margin-left: 0 !important; |
Sada će se ikona vašeg gumba zamijeniti mišem iznad ikone miša.
Kreativni gumbi s ikonama u krugu prilagođeni veličini teksta gumba
Gumbi u obliku kruga izvrsno funkcioniraju za gumbe s jednim ikonama. A ako razumijete unutarnje funkcioniranje razmaka između modula gumba, možete stvoriti savršeno kružne gumbe koji se prilagođavaju veličini teksta gumba.
Trik je u razmaku gumba pomoću duljine jedinice "em". Ova jedinica duljine odnosi se na veličinu teksta na vašem gumbu. Dakle, ako je veličina teksta gumba 30 piksela, 1em je također 30 piksela (2em će biti 60 piksela i tako dalje ...). Znajući to, samo trebamo biti sigurni da će naše popunjavanje oko gumba biti jednako na sve 4 strane. No ono što možda niste uzeli u obzir jest da je visina retka teksta gumba prema zadanim postavkama 1.7 m. To znači da to moramo uzeti u obzir kad dodamo svoje vrijednosti gornjeg i donjeg popunjavanja.
Za one od vas koji želite znati izračun iza vrijednosti popunjavanja potrebnih za stvaranje gumba u krugu, evo:
Za lijevu i desnu ispunu postavite obje na 1em. To znači da će ukupna širina vašeg gumba biti 90 piksela (ili 3em) jer ...
30px padding lijevo + 30px za font-icon + 30px padding desno = 90px ukupno
Visina retka teksta gumba je 1.7 em, što je ekvivalentno 170% veličine teksta gumba (30 piksela) što je 51 piksela.
Za gornju i donju ispunu postavite obje na 0,65em. 0.65em ekvivalent je 65% veličine teksta gumba (30 piksela), što je ekvivalentno 19.5 piksela.
Pa ...
19.5px gornje padding + 51px visina linije + 19.5px donje padding = 90px ukupno
To znači da će, kad je tekst gumba postavljen na 30 piksela, ukupna veličina gumba biti 90 puta 90 piksela (savršen kvadrat). Zapravo, o tome možete tako razmišljati. Bez obzira na veličinu teksta gumba, ukupna veličina gumba 3 je puta veća od vrijednosti. Dakle, tekst gumba od 40 piksela stvorit će gumb od 120 piksela do 120 piksela itd.
Trenutno gumb ima ispravne dimenzije, ali je i dalje kvadratni. Sve što trebamo učiniti je dodati radijus obruba od 50% da bismo kvadratni gumb promijenili u savršeni gumb kruga.
Evo što trebate promijeniti gumb na krug gumb:
Gumb za granični polumjer: 50%
Custom presvlake: 0.65em Top, 0.65em Bottom, 1em Ravno, 1em lijevo
Zapamtite, možete prilagoditi veličinu teksta gumba i gumb će ostati u krugu savršeno poput ispune veličine teksta.
Dodavanje gumba na Divi
Divi olakšava dodavanje i prilagodbu jedinstvenih gumba ikona kako bi odgovarali dizajnu bilo kojeg unaprijed definiranog izgleda.
U ovom primjeru pokazat ću vam kako dodati jedan gumb ikone u izgled početne stranice noćenja s doručkom.
Da biste dodali izgled na svoju stranicu, otvorite izbornik postavki klikom na ljubičastu ikonu na dnu stranice (provjerite je li omogućen vizualni generator). Zatim kliknite ikonu Učitaj iz knjižnice. Odaberite izgled početne stranice noćenja s doručkom i kliknite gumb "Koristi ovaj izgled" da biste rasporedili raspored na stranici.
Dodavanje gumba ikone na sliku
Pretpostavimo da želite dodati mali gumb ikone kako biste kut slike prekrili dodatnim CTA-om koji se odnosi na određeni proizvod ili uslugu. Sve što trebate je dodati modul gumba ispod slike i prilagoditi ga tako da uključuje font ikone i neka ikona prekriva sliku s prilagođenim razmakom.
Potražite odjeljak "O nama" na početnoj stranici. Zatim dodajte modul gumba neposredno ispod jedne od slika korištenih za predstavljanje "Dvokrevetne sobe" (prve u prvom stupcu retka od tri stupca).
Zatim otvorite postavke gumba i stavite veliko slovo "P" u tekstni okvir gumba. To će se promijeniti u našoj ikoni nakon što odaberete nevjerojatne pozadinske skupove poput fonta gumba.
Da biste brzo započeli podudaranje dizajna gumba s rasporedom, spremite postavke gumba i pronađite gumb "Rezerviraj sada" na vrhu izgleda. Otvorite Postavke gumba i kopirajte stilove gumba desnim klikom na gumb Opcije gumba za prebacivanje naslova i odabirom opcije "Kopiraj stilove gumba" s popisa.
Sada desnom tipkom miša kliknite modul koji ste dodali ispod slike i odaberite "Sljepi gumb gumba".
Zatim ažurirajte postavke gumba na sljedeći način:
Gumb Font: Strašan Font
gumb za font font širina obruba: 0px
Ikona gumba za prikaz: NE
Zatim dodajte naš pametni prilagođeni jastučić tako da gumb bude savršen kvadrat:
Prilagođeno isprepletanje: 0.65em Top, 0.65em Bottom, 1em Lijevo, 1em Desno
Da biste gumb postavili tako da pokriva donji desni kut slike, prvo morate ukloniti donju marginu iz gornjeg modula slike. Otvorite postavke Image Image Modula izravno iznad gumba i postavite Bottom Margin na 0px.
Sada moramo povući gumb preko slike koristeći prilagođenu negativnu vrijednost margine jednaku visini gumba. Da bismo to učinili, moramo odrediti visinu našeg gumba.
Kao što je spomenuto ranije u ovom članku, s prilagođenim ispunom možemo znati točnu veličinu našeg gumba na temelju trenutne veličine teksta gumba. Budući da je veličina teksta gumba 20 piksela, znamo da je naša visina gumba 3em (3 puta veća od veličine teksta gumba), što je 60 piksela. Stoga moramo postaviti prilagođenu marginu za naš gumb kako slijedi:
Prilagođena marža: -60px Vrh
A onda možemo postaviti gumb s desne strane podešavanjem poravnanja gumba s desne strane.
Sada kada imamo radni dizajn za našu sliku i naš gumb. Sve što moramo učiniti je dodati isti gumb svim slikama u odjeljku.
Budući da smo uklonili donju marginu slike, ovu promjenu možemo lako primijeniti na sve slike u odjeljku pomoću opcije Proširi stilove. Desnom tipkom miša kliknite sliku i odaberite "Proširi stilove slike".
U dijaloškom okviru Proširi stilove odaberite "Ovaj odjeljak" za opciju Across i kliknite gumb Proširi. Sada sve slike imaju 0px donju marginu.
Posljednji korak je jednostavno kopiranje i lijepljenje modula gumba ispod svake slike.
Ovo je konačni dizajn.
A s obzirom da smo koristili pravilne tehnike razmaka, gumb će također ostati na mjestu na mobilnom ...
Ikone dostupne pomoću modula gumba
Budući da je tekst gumba modula gumba ograničen na znakove dostupne na tipkovnici, morat ćete istražiti ove tipke kako biste pronašli dostupne ikone povezane sa svakom tipkom. Jednostavan način za to je stvaranje modula gumba s fontom gumba podešenim na elegantan font i upisivanjem znakova u tekstni okvir gumba.
Evo snimke zaslona likova s odgovarajućom ikonom fonta:
Ako smatrate da je ovaj popis pomalo iscrpan, uvijek možete koristiti tekstualni modul za stvaranje veza s ikonama pomoću navedenih Unic kodova. ICI .
Završne misli
Korištenje elegantnih ikona s Divi's Button Module je prikladan način za stvaranje jedinstvenih gumba za vaše web stranica. Ovo otvara vrata kreativnosti s postavkama modula za prilagodbu vašeg gumba jedinstvenim stilovima teksta, efektima lebdenja i više. Posebno mi se sviđaju prilagođene vrijednosti razmaka gumba koje osiguravaju da gumbi imaju oblik savršenog kvadrata ili kruga.
Mnogo je upotreba gumba s ikonama. Nadamo se da će primjer korištenja opisan u ovom vodiču dodati malo inspiracije vašim vlastitim projektima.
