Tlačidlá s ikonickými fontami majú vo svete webdizajnu mnoho využití. Pretože ikonické písma zostávajú v ostrej farbe a dizajne aj pri škálovaní na rôzne veľkosti, je dobré ich používať v tlačidlách. A vytvorenie tlačidla s ikonickými fontami v Divi je v skutočnosti celkom jednoduché pomocou fontov z knižnice “ ElegantIcons„. V tomto návode vám ukážem, ako môžete pomocou ikonových písiem s modulom tlačidiel Divi vytvoriť jediné tlačidlo s ikonami.
Niektoré z najdôležitejších tém tejto výučby zahŕňajú:
- ako používať ElegantIcons pridať ikonu ako text tlačidla
- Ako pridať polstrovanie a polomer orámovania, aby tlačidlo vyzeralo ako dokonalý štvorec alebo kruh
- Ako nahradiť ikonu tlačidla inou ikonou pri umiestnení kurzora myši
- Ako umiestniť ikonu tlačidla na prekrytie obrázka
- a ďalšie ...
prehľad
Tu je ukážka toho, čo sa chystá ...
Čo potrebujete?
Pre tento tutoriál použijem nasledujúce:
- Divi Téma (samozrejme)
- Štýlové ikony písiem, návod na Elegantná téma je oveľa presnejšia. Po stiahnutí súboru zip z blogového príspevku ho presunieme do súboru písma eleganticons.ttf, ktorý použijeme ako vlastné písmo pre náš modul tlačidiel.
- Domovská stránka Bed & Breakfast (k dispozícii zadarmo od Divi Builder)
Začnime!
Pridajte do svojho tlačidlového modulu písmo Elegant Icons
Pridať modul tlačidla
Na začiatok vytvorte novú stránku a nasaďte vizuálny nástroj na tvorbu. Vyberte možnosť „Vytvoriť od začiatku“ a potom po nasadení vizuálneho nástroja na tvorbu pridajte do sekcie riadok stĺpca a do riadku potom pridajte tlačidlový modul.
Presuňte písmo Stylish Icon
Ak chcete získať farebnú hru ElegantFontssi môžete stiahnuť tento balík fontov prostredníctvom tohto odkazu. Extrahujte to obsah zo súboru zip a nájdite súbory písma elegantnej ikony tak, že prejdete na elegant_font > HTML CSS > class. Potom pretiahnite súbor „ElegantIcons.ttf“ do počítača a pustite ho do nástroja na tvorbu vizuálov.
Zobrazí sa modálne okno Automaticky sťahovať písmo. Stačí kliknúť na tlačidlo sťahovania a stiahnuť písmo do aplikácie Divi Builder.
Teraz budete mať prístup k štýlovému písmu ikon pri prispôsobovaní písma úprav vo vizuálnom nástroji na vytváranie.
Prejdite do nastavení modulu tlačidiel a aktualizujte písmo tlačidla pomocou nového písma Elegant Icon, ktoré ste práve stiahli. Zobrazí sa v zozname ikon v časti „Vlastné písma“.
Môžete si všimnúť, že text vášho tlačidla bol transformovaný do množstva ikon. Každý znak zadaný do oblasti na zadávanie textu tlačidla má teraz ikonu zodpovedajúcu aktuálne použitému písmenu / znaku.
Pretože pre svoje tlačidlo potrebujeme iba jednu ikonu, môžete vybrať ľubovoľný znak na klávesnici a vygenerovať tak ikonu spojenú s týmto znakom. Napríklad zadajte číslo 5 pre text svojho tlačidla a získate šípku doprava šípku.
Ikony tlačidiel vymeniť pri umiestnení kurzora myši
Ako viete, tlačidlový modul obsahuje možnosť pridať ikony pri umiestnení kurzora myši. Túto funkciu môžeme použiť na nahradenie písma ikony ikonou vznášania pre pekný efekt vznášania. Všetko, čo musíme urobiť, je zmeniť nastavenie tlačidiel nasledovne:
Tlačidlo Veľkosť textu: 30 pixelov Ikona tlačidla: pozri snímku obrazovky (toto bude ikona, ktorá nahradí ikonu písma použitú pre tlačidlo) Ikona Farba tlačidla: # 0c71c3 (ktorá by sa mala zhodovať s farbou použitou pre text tlačidla) ) Umiestnenie ikony tlačidla: Farba textu kurzora po ľavom tlačidle: rgba (255,255,255,0 1 1) (toto je úplne priehľadné, aby sa skrylo písmo ikony kurzora). Vlastná výplň: XNUMX. vľavo, XNUMX. vpravo (táto výplň nahradí rozbaľovanie pri umiestnení kurzora)
Všetko, čo musíme urobiť, je nahradiť okraj predného prvku vo vlastnom css. Prejdite na kartu Rozšírené a do predného poľa zadajte nasledujúci kód CSS:
margin-left: 0 !important; |
Teraz bude ikona vášho tlačidla nahradená ikonou kurzora myši.
Kreatívne ikonu tlačidlá s kruhom zmenšený s veľkosťou textu tlačidla
Tlačidlá v tvare kruhu fungujú skvele pre tlačidlá s jednou ikonou. A ak rozumiete vnútornému fungovaniu rozstupov tlačidlových modulov, môžete vytvoriť perfektne kruhové tlačidlá, ktoré sa prispôsobia veľkosti textu tlačidla.
Trik spočíva v umiestnení gombíka von pomocou jednotky dĺžky „em“. Táto jednotka dĺžky je relatívna k veľkosti textu na vašom tlačidle. Takže ak je veľkosť textu tlačidla 30px, 1em je tiež 30px (2em bude 60px atď.). Keď to vieme, musíme sa len ubezpečiť, že naše polstrovanie okolo nášho gombíka bude rovnaké na všetkých 4 stranách. Čo by ste však možno nebrali do úvahy je to, že výška textového riadku tlačidla je predvolene 1.7em. To znamená, že to musíme vziať do úvahy, keď pridáme naše horné a spodné hodnoty výplne.
Pre tých z vás, ktorí chcú poznať matematiku za hodnotami výplne potrebnými na vytvorenie kruhových tlačidiel, je tu:
Pre ľavú a pravú výplň nastavte obidve na 1em. To znamená, že celková šírka vášho tlačidla bude 90 pixelov (alebo 3 pixelov), pretože ...
30px výplň vľavo + 30px pre písmo-ikona + 30px výplň vpravo = 90px celkom
Výška riadku textu tlačidla je 1.7EM, čo zodpovedá 170% veľkosti textu tlačidla (30px), čo je 51px.
Pre horné a spodné polstrovanie nastavte obidve na 0,65em. 0.65em je ekvivalent 65% veľkosti textu tlačidla (30px), čo je ekvivalent 19.5px.
Takže ...
19.5px horné čalúnenie + 51px výška riadku + 19.5px dolné čalúnenie = 90px celkom
To znamená, že keď je text tlačidla nastavený na 30 pixelov, celková veľkosť tlačidla bude 90 pixelov na 90 pixelov (dokonalý štvorec). V skutočnosti to tak môžete premýšľať. Bez ohľadu na veľkosť textu tlačidla je celková veľkosť tlačidla trojnásobná. Takže text tlačidla 3px vytvorí tlačidlo 40px na 120px atď.
Momentálne má tlačidlo správne rozmery, ale stále je štvorcové. Všetko, čo musíme urobiť, je pridať 50% polomer ohraničenia, aby sa štvorcové tlačidlo zmenilo na perfektné kruhové tlačidlo.
Tu je to, čo potrebujete na zmenu tlačidla na kruhové tlačidlo:
Tlačítko hraničného polomeru: 50%
Vlastné čalúnenie: 0.65 Top, 0.65em Bottom, 1em Priamy, 1em Vľavo
Pamätajte, že môžete upraviť veľkosť textu tlačidla a tlačidlo zostane v kruhu dokonale ako výplň veľkosti textu.
Pridávanie tlačidiel na zariadení Divi
Divi uľahčuje pridávanie a prispôsobovanie jedinečných tlačidiel s ikonami tak, aby zodpovedali dizajnu ľubovoľného preddefinovaného rozloženia.
V tomto príklade vám ukážem, ako pridať jedno tlačidlo s ikonou k rozloženiu domovskej stránky Bed & Breakfast.
Ak chcete na stránku pridať rozloženie, otvorte ponuku nastavení kliknutím na fialovú ikonu v dolnej časti stránky (uistite sa, že je povolený vizuálny generátor). Potom kliknite na ikonu Načítať z knižnice. Vyberte rozloženie domovskej stránky Bed & Breakfast a kliknutím na tlačidlo „Použiť toto rozloženie“ rozmiestnenie rozmiestnite na stránku.
Pridanie ikonového tlačidla k obrázku
Predpokladajme, že chcete pridať malé tlačidlo s ikonou, ktoré prekryje roh obrázka ďalšou výzvou na akciu súvisiacou s konkrétnym produktom alebo službou. Všetko, čo musíte urobiť, je pridať tlačidlový modul pod obrázok a prispôsobiť ho tak, aby obsahoval písmo ikony, a aby ikona prekrývala obrázok s vlastnými rozostupmi.
Na domovskej stránke vyhľadajte sekciu „O nás“. Potom pridajte tlačidlový modul priamo pod jeden z obrázkov použitých na prezentáciu „dvojlôžkovej izby“ (prvá v prvom stĺpci v rade troch stĺpcov).
Potom otvorte nastavenie tlačidla a do textového poľa tlačidla vložte veľké písmeno „P“. To sa zmení na našej ikone, akonáhle vyberiete úžasné sady pozadia, ako je písmo tlačidla.
Ak chcete rýchlo začať porovnávať dizajn tlačidla s rozložením, uložte nastavenia tlačidiel a nájdite tlačidlo „Rezervovať“ v hornej časti rozloženia. Otvorte Nastavenia tlačidiel a kopírujte štýly tlačidiel tak, že kliknete pravým tlačidlom myši na Možnosti tlačidiel, čím prepnete nadpis a v zozname vyberiete možnosť „Kopírovať štýly tlačidiel“.
Teraz kliknite pravým tlačidlom myši na modul, ktorý ste pridali pod obrázok, a vyberte možnosť „Vložiť štýl tlačidla“.
Potom aktualizujte nastavenie tlačidla nasledovne:
Tlačidlo písma: Awesome font
tlačidlo písma Šírka orámovania: 0px
Zobraziť ikonu tlačidla: NIE
Potom pridajte naše inteligentné čalúnenie, aby tlačidlo bolo perfektným štvorcom:
Vlastné vycpávky: 0.65 Top, 0.65em dolná, ľavá 1em, pravá 1em
Ak chcete umiestniť tlačidlo tak, aby zakrývalo pravý dolný roh obrázka, musíte najskôr odstrániť spodný okraj z modulu obrázka vyššie. Otvorte nastavenia modulu Image Image priamo nad tlačidlom a nastavte dolnú hranicu na 0px.
Teraz musíme pretiahnuť tlačidlo cez obrázok pomocou vlastnej hodnoty záporného okraja rovnajúcej sa výške tlačidla. Aby sme to dosiahli, musíme určiť výšku nášho tlačidla.
Ako už bolo spomenuté vyššie v tomto článku, s vyplneným vlastným vyplnením môžeme poznať presnú veľkosť nášho tlačidla na základe aktuálnej veľkosti textu tlačidla. Pretože veľkosť textu tlačidla je 20px, vieme, že výška nášho tlačidla je 3em (trojnásobok veľkosti textu tlačidla), čo je 3px. Preto musíme pre náš gombík nastaviť vlastnú maržu takto:
Vlastná marža: -60px hore
A potom môžeme umiestniť naše tlačidlo napravo úpravou zarovnania tlačidla napravo.
Teraz, keď máme funkčný dizajn pre náš obrázok a naše tlačidlo. Všetko, čo musíme urobiť, je pridať rovnaké tlačidlo ku všetkým obrázkom v sekcii.
Pretože sme odstránili spodný okraj obrázka, môžeme túto zmenu ľahko použiť na všetky obrázky v sekcii pomocou možnosti Rozšíriť štýly. Pravým tlačidlom myši kliknite na obrázok a vyberte možnosť „Rozšíriť štýly obrázkov“.
V dialógovom okne Rozšírenie štýlov vyberte možnosť „Táto časť“ pre možnosť Naprieč a kliknite na tlačidlo Rozbaliť. Teraz majú všetky obrázky spodný okraj 0px.
Posledným krokom je jednoducho skopírovať a vložiť tlačidlové moduly pod každý obrázok.
Tu je konečný návrh.
A pretože sme použili správne techniky rozmiestnenia, tlačidlo zostane aj na svojom mobilnom ...
Ikony dostupné pomocou tlačidlového modulu
Pretože text tlačidla tlačidlového modulu je obmedzený na znaky dostupné na klávesnici, budete musieť tieto klávesy preskúmať, aby ste našli dostupné ikony spojené s jednotlivými klávesmi. Jednoduchý spôsob, ako to urobiť, je vytvoriť tlačidlový modul s tlačidlom písma nastaveným na elegantné písmo a zadávať znaky do textového poľa tlačidla.
Tu je screenshot znakov s príslušnou ikonou písma:
Ak sa vám zdá tento zoznam trochu vyčerpávajúci, môžete kedykoľvek pomocou textového modulu vytvoriť odkazy na ikony pomocou uvedených kódov Unic. tu .
záverečné myšlienky
Používanie elegantných ikon s tlačidlom Divi's Button Module je pohodlný spôsob, ako vytvoriť jedinečné tlačidlá pre vás webové stránky. To otvára dvere kreativite s nastaveniami modulu na prispôsobenie tlačidla pomocou jedinečných štýlov textu, efektov vznášania a ďalších funkcií. Obzvlášť sa mi páčia hodnoty vlastného rozstupu tlačidiel, ktoré zabezpečujú, že tlačidlá majú tvar dokonalého štvorca alebo kruhu.
Ikonových tlačidiel je veľa využití. Dúfajme, že príklad použitia uvedený v tomto výučbe pridá inšpiráciu pre vaše vlastné projekty.
