Chceli by ste vedieť, ako používať modul Icon of divi vytvoriť vlastné ikony?
Ikonové tlačidlá sa stali základom vo svete webového dizajnu. Ikony poskytujú stručné vizuálne výzvy na akciu, ktoré fungujú skvele pre mobilné zariadenia, pretože nezaberajú veľa miesta. Dobre fungujú aj ako prepínacie alebo kontextové tlačidlá, ktoré používatelia intuitívne rozpoznávajú bez potreby textu.
V dnešnom tutoriále vám ukážeme, ako navrhnúť tlačidlá s ikonami divi. Vytvorte tlačidlo ikony v divi je celkom jednoduché a zábavné.
Pomocou modulu Ikony si môžeme vybrať zo stoviek ikon a využiť nespočetné množstvo vstavaných možností dizajnu divi Builder na vytvorenie takmer akéhokoľvek typu tlačidla ikony, na ktoré si spomeniete.
Dúfame, že vám tento článok pomôže začať vytvárať úžasné ikony ikon pre váš ďalší projekt.
Začnime!
prehľad
Tu je rýchly prehľad tlačidiel ikon, ktoré vytvoríme v tomto návode.
Vytvorte novú stránku pomocou Divi Builder
Pozri tiež: Divi: Ako prispôsobiť košík a ikony vyhľadávania v module "Ponuka plnej šírky".
Na hlavnom paneli WordPress prejdite na Stránky> Pridať nové vytvoriť novú stránku.
Dajte tomu názov, ktorý vám dáva zmysel, a kliknite Použite Divi Builder
potom kliknite na tlačidlo Začnite stavať (Stavať od nuly)
Potom budete mať prázdne plátno, aby ste mohli začať navrhovať v Divi.
Vytvorte tlačidlá ikon pomocou modulu Divi Icons
Časť 1: Vytvorenie tlačidla ikony
Na začiatok pridajte riadok s jedným stĺpcom do predvolenej bežnej sekcie.
Potom pridajte nový modul Ikona do stĺpca.
Ikona, adresa URL odkazu a farba pozadia
Pod záložkou obsah nastavenia modulu ikon, aktualizujte nasledovné:
- Ikona: Šípka doprava (pozri snímku obrazovky)
- Adresa URL odkazu ikony: # (zatiaľ len výplň)
- Pozadie: #3e22ff
Hranica a polomer hranice
Pod záložkou dizajn, aktualizujte nasledovné:
- Zaoblené rohy: 10px
- Šírka orámovania: 2px
- Farba orámovania: #7272ff
Tieňová skrinka
- Box Shadow: Pozrite si snímku obrazovky
- Farba tieňa: rgba (62,34,255,0.48)
Zhoda klikateľného priestoru s veľkosťou tlačidla ikony
V súčasnosti bude modul ikon pokrývať celú šírku nadradeného kontajnera (alebo stĺpca). To znamená, že klikateľný priestor je väčší ako skutočné tlačidlo ikony.
Aby sme klikateľné miesto zodpovedali veľkosti tlačidla ikony, môžeme modulu prideliť maximálnu šírku, ktorá je rovnaká ako šírka tlačidla ikony.
V tomto príklade je celková šírka tlačidla 94 pixelov.
Na karte Rozšírené pridajte do hlavného prvku nasledujúci vlastný CSS:
max-width: 94px
Tu je výsledok.
Časť 2: Vytvorte tlačidlo štvorcovej ikony
Ak chcete vytvoriť naše tlačidlo so štvorcovou ikonou, duplikujte riadok obsahujúci prvé tlačidlo ikony, ktoré sme práve vytvorili. To nám poskytne duplicitné tlačidlo v riadku, s ktorým môžeme pracovať.
Dajte ikone rovnakú výšku a šírku, pričom ju ponechajte v strede
Veľká zbierka ikon dostupných na použitie v module Icon obsahuje ikony Divi aj ikony Fontawesome. Nie všetky ikony však budú mať rovnakú výšku a šírku. To trochu sťažuje určenie presnej šírky a výšky tlačidla ikony.
Aby sme vytvorili dokonale štvorcové tlačidlo, ktoré zapojí ikonu pri umiestnení kurzora myši, môžeme pridať vlastný CSS na nastavenie výšky a šírky ikony, ako aj vycentrovanie ikony pomocou vlastnosti CSS Flex.
Tu je návod.
Najprv otvorte nastavenia duplicitnej ikony. Potom aktualizujte ikonu novou z nástroja na výber ikon.
Odstráňte výplň z modulu ikon. Toto nebude potrebné, pretože nastavíme výšku a šírku ikony.
Na karte Rozšírené pridajte nasledujúci vlastný CSS do Prvok ikony :
height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
Teraz bude mať tlačidlo ikony výšku a šírku 90 pixelov, čo z neho urobí dokonalý štvorec. Vlastnosť flex tiež zarovná ikonu do stredu modulu. To vám umožní jednoducho aktualizovať veľkosť ikony v module ikon.
Na dokončenie tohto tlačidla mu dajme gradient pozadia a farbu bieleho okraja takto:
- Zarážky prechodu:
- 0%: #3e22ff
- 100 %: #ff2000
- Farba okraja: #fff
Toto je konečný výsledok.
Tlačidlo na vytvorenie kruhovej ikony
Akonáhle je tlačidlo ikony dokonalým štvorcom, urobiť ho kruhovým je jednoduché. Ale predtým, ako vám ukážeme tento jednoduchý trik, duplikujme predchádzajúci riadok a začnite vytvárať naše tlačidlo s kruhovou ikonou.
Teraz otvorte nastavenia pre našu novú ikonu duplikátu a pod kartou dizajn, aktualizujte polomer okraja (alebo zaoblené rohy) takto:
- Zaoblené rohy: 50 %
A práve tak tu máme kruhové tlačidlo s ikonou!
Aby sme trochu zmenili dizajn, dajme modulu ikon inú farbu ikony a pozadia nasledovne:
- Ikona: pozri snímku obrazovky
- Pozadie: #121212
Tu je výsledok.
Vytvorte horizontálne menu tlačidla ikony
Populárnym trendom je používanie ikon na vytvorenie ponuky ikon, ktorá zvyčajne pozostáva z niekoľkých tlačidiel umiestnených vedľa seba. Na to môžeme použiť vlastnosť flex.
Tu je postup, ako to urobiť.
Najprv pridajte nový riadok do stĺpca na stránke.
Otvorte nastavenia čiary a aktualizujte šírku odkvapu na 1.
- Šírka odkvapu: 1
Potom otvorte nastavenia stĺpcov v riadku a pridajte nasledujúci vlastný CSS do prvku hlavného stĺpca:
display:flex;
align-items:center;
Pridajte nový modul Ikona do stĺpca.
Pod záložkou obsah nastavenia ikony, vyberte ikonu a pridajte adresu URL odkazu na ikonu.
Pod záložkou dizajn, aktualizujte nasledovné:
- Farba ikony: #3e22ff
- Veľkosť ikony: 40px
- Okraj (ľavý a pravý): 10 pixelov
- Šírka orámovania: 2px
- Farba okraja: #3e22ff
POZNÁMKA : Okraj vytvorí priestor medzi susednými tlačidlami, keď neskôr pridáme ďalšie.
Pod záložkou pokročilý, pridajte do poľa nasledujúci vlastný CSS Prvok ikony (ako sme to urobili predtým pre tlačidlo štvorcovej ikony):
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
Keď teraz pridáme nové tlačidlá ikon, zobrazia sa vedľa seba. Aby sme to ilustrovali, duplikujme existujúce tlačidlo ikony trikrát, aby sme vytvorili celkovo štyri tlačidlá s ikonami v horizontálnom menu.
Potom sa môžeme vrátiť a aktualizovať ikony podľa potreby.
Tu je výsledok.
Pridané efekty vznášania na tlačidlo ikony
Je ťažké hovoriť o dizajne tlačidla ikony bez zmienky o efektoch vznášania. Sú príliš zábavné na to, aby sme ich ignorovali.
Zmena farby pozadia a farby ikony pri umiestnení kurzora myši
Obľúbeným a efektívnym efektom vznášania je zmena farieb tlačidiel. Môžeme napríklad zmeniť farbu pozadia a farbu ikony súčasne, keď používateľ umiestni kurzor myši na tlačidlo.
Ak to chcete urobiť, otvorte nastavenia modulu ikon a povoľte možnosti prechodu pre farbu pozadia a vyberte inú farbu pre stav kurzora. Potom môžete urobiť to isté pre ikonu.
V tomto príklade zmeníme farbu pozadia z bielej na modrú a ikonu z modrej na bielu.
Zmeniť ikonu pri umiestnení kurzora myši
Ďalší efekt vznášania, ktorý by sa vám mohol páčiť, je úplná zmena ikony. Ak to chcete urobiť, môžete vybrať inú ikonu pre stav vznášania, keď vyberiete ikonu v nastaveniach ikony.
Mierka tlačidla ikony pri umiestnení kurzora myši
Efekt vznášania, ktorý sa ťažko ignoruje, je efekt vznášania škálovania. Tým sa zväčší alebo zväčší tlačidlo ikony. Najlepší spôsob, ako pridať tento typ efektu vznášania, je použiť možnosti transformácie Divi. To umožní tlačidlu rásť bez ovplyvnenia prvkov okolo neho.
Ak chcete k tlačidlu ikony pridať efekt vznášania mierky, otvorte nastavenia ikony a na karte dizajn, vyhľadajte možnosti transformácie. Povoľte možnosti pri umiestnení kurzora myši a potom priraďte nasledujúcu mierku transformácie stavu kurzora:
- Transformácia Y: 118 %
- Transformácia X: 118 %
Tým sa zväčší veľkosť tlačidla ikony o 18 %, keď naň používateľ umiestni kurzor myši.
Tlačidlo otočenia ikony pri umiestnení kurzora myši
Otáčanie vznášajúcich sa objektov je vždy zábavná mikrointerakcia. Na otočenie tlačidla ikony pri umiestnení kurzora myši môžeme použiť možnosť otočenia transformácie. Predtým však urobme tlačidlo kruhové, aby sa otáčala iba ikona.
Ak chcete, aby bola ikona kruhová, za predpokladu, že tlačidlo je štvorec, jednoducho aktualizujte nastavenie zaoblených rohov na 50 % vo všetkých štyroch rohoch.
Potom aktualizujte možnosti transformácie tak, aby zahŕňali nasledujúcu hodnotu rotácie transformácie v stave kurzora:
- Transformácia Rotácia Z: 180 stupňov
Poďme sa pozrieť na naše 4 efekty vznášania v akcii.
Konečný výsledok
Poďme sa pozrieť na konečné výsledky nášho tutoriálu.
Čítajte tiež: Divi: Ako zvýrazniť modul "Blurb" pri umiestnení kurzora myši a rozmazať ostatné
Tu sú naše tri ikony ikon (štandardné, štvorcové a kruhové).
A tu je ponuka tlačidiel horizontálnej ikony s efektmi vznášania.
Stiahnite si DIVI teraz!!!
záver
Vedieť, ako navrhnúť tlačidlá ikon pre a webové stránky je nevyhnutné. A ako sme videli v tomto návode, s Divi to nie je také ťažké. Ikonový modul Divi má množstvo vstavaných možností, ktoré otvárajú dvere kreatívnym dizajnom tlačidiel ikon.
Dúfajme, že techniky v tomto článku vám pomôžu odomknúť niektoré z kúziel vašich vlastných návrhov tlačidiel ikon.
Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
