Dëshironi të dini se si të përdorni modulin Icon of Divi për të krijuar ikona të personalizuara?
Butonat e ikonave janë bërë një element kryesor në botën e dizajnit të uebit. Ikonat ofrojnë thirrje koncize vizuale për veprim që funksionojnë shkëlqyeshëm për pajisjet celulare sepse nuk zënë shumë hapësirë. Ata gjithashtu funksionojnë mirë si dhe butonat e ndërrimit ose të dritareve që përdoruesit i njohin intuitivisht pa pasur nevojë për tekst.
Në tutorialin e sotëm do t'ju tregojmë se si të dizajnoni butonat e ikonave Divi. Krijo një buton ikonë në Divi është mjaft e thjeshtë dhe argëtuese për t'u bërë.
Duke përdorur modulin Icons, ne mund të zgjedhim nga qindra ikona dhe të përdorim opsione të panumërta të dizajnit të integruara nga Divi Ndërtues për të krijuar pothuajse çdo lloj butoni ikonë që mund të mendoni.
Shpresojmë që ky artikull t'ju ndihmojë të filloni të krijoni butona të mahnitshëm ikonash për projektin tuaj të ardhshëm.
Le të fillojmë!
studim
Këtu është një përmbledhje e shpejtë e butonave të ikonave që do të krijojmë në këtë tutorial.
Krijo një faqe të re me Divi Builder
Shiko gjithashtu: Divi: Si të personalizoni ikonat e shportës dhe kërkimit të modulit "Menyja me gjerësi të plotë".
Nga pulti i WordPress, shkoni te Faqet> Shto të Reja për të krijuar një faqe të re.
Jepini një titull që ka kuptim për ju dhe klikoni Përdorni Divi Builder
Pastaj kliko Filloni të ndërtoni (Ndërtoni nga Gërvishtja)
Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.
Krijoni butona ikonash me modulin Divi Icons
Pjesa 1: Krijimi i një butoni ikone
Për të filluar, le të shtojmë një rresht me një kolonë në seksionin e rregullt të paracaktuar.
Pastaj shtoni një modul të ri Ikonë tek kolona.
Ikona, URL-ja e lidhjes dhe ngjyra e sfondit
Nën skedinë Përmbajtja Cilësimet e modulit të ikonës, përditësoni sa vijon:
- Ikona: Shigjeta djathtas (shih pamjen e ekranit)
- URL-ja e lidhjes së ikonës: # (vetëm një mbushës tani për tani)
- Sfondi: #3e22ff
Kufiri dhe rrezja kufitare
Nën skedinë Projektimi, përditësoni sa vijon:
- Këndet e rrumbullakosura: 10 px
- Gjerësia e kufirit: 2 px
- Ngjyra e kufirit: #7272ff
Kuti me hije
- Box Shadow: Shiko pamjen e ekranit
- Ngjyra e hijes: rgba (62,34,255,0.48)
Përputhja e hapësirës së klikueshme me madhësinë e butonit të ikonës
Aktualisht, moduli i ikonës do të shtrijë gjerësinë e plotë të kontejnerit (ose kolonës) mëmë. Kjo do të thotë se hapësira e klikueshme është më e madhe se butoni aktual i ikonës.
Për të përputhur hapësirën e klikueshme me madhësinë e butonit të ikonës, ne mund t'i japim modulit një gjerësi maksimale e cila është e njëjtë me gjerësinë e butonit të ikonës.
Në këtë shembull, gjerësia totale e butonit është 94 piksele.
Nën skedën e avancuar, shtoni CSS-në e mëposhtme të personalizuar në elementin kryesor:
max-width: 94px
Këtu është rezultati.
Pjesa 2: Krijo një buton ikone katrore
Për të krijuar butonin tonë të ikonës katrore, dublikojeni rreshtin që përmban butonin e parë të ikonës që sapo krijuam. Kjo do të na japë një buton dublikatë në rresht për të punuar me të.
Jepini ikonës të njëjtën lartësi dhe gjerësi duke e mbajtur në qendër
Koleksioni i madh i ikonave të disponueshme për t'u përdorur në modulin Icon përfshin si ikonat Divi ashtu edhe ikonat Fontawesome. Megjithatë, jo të gjitha ikonat do të kenë të njëjtën lartësi dhe gjerësi. Kjo e bën pak më të vështirë përcaktimin e gjerësisë dhe lartësisë së saktë të butonit të ikonës.
Për të krijuar një buton të përkryer katror që angazhon ikonën në lëvizje, ne mund të shtojmë CSS të personalizuar për të vendosur një lartësi dhe gjerësi për ikonën, si dhe në qendër të ikonës duke përdorur veçorinë CSS Flex.
Ja se si.
Së pari, hapni cilësimet e ikonës së kopjuar. Më pas përditësoni ikonën me një të re nga zgjedhësi i ikonave.
Hiqni mbushjen nga moduli i ikonës. Kjo nuk do të jetë e nevojshme pasi ne do të vendosim një lartësi dhe një gjerësi për ikonën.
Nën skedën e avancuar, shtoni CSS-në e mëposhtme të personalizuar Elementi i ikonës :
height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
Tani butoni i ikonës do të ketë lartësi dhe gjerësi të barabartë me 90 piksele, duke e bërë atë një katror të përsosur. Gjithashtu, vetia flex e rreshton ikonën në qendër të modulit. Kjo ju lejon të përditësoni me lehtësi madhësinë e ikonës në modulin e ikonave.
Për të përfunduar këtë buton, le t'i japim një gradient sfondi dhe një ngjyrë të bardhë kufiri si më poshtë:
- Ndalesat e gradientit:
- 0%: #3e22ff
- 100%: #ff2000
- Ngjyra e kufirit: #fff
Këtu është rezultati përfundimtar.
Krijo butonin e ikonës rrethore
Pasi butoni i ikonës është një katror i përsosur, bërja e tij rrethore është e thjeshtë. Por, përpara se t'ju tregojmë këtë truk të thjeshtë, le të dublikojmë rreshtin e mëparshëm për të filluar ndërtimin e butonit tonë rrethor të ikonës.
Tani hapni cilësimet për ikonën tonë të re të kopjuar dhe nën skedën Projektimi, përditësoni rrezen e kufirit (ose qoshet e rrumbullakosura) si më poshtë:
- Këndet e rrumbullakosura: 50%
Dhe ashtu si kjo, ne kemi një buton ikone rrethore!
Për të ndryshuar pak dizajnin, le t'i japim modulit të ikonës një ikonë dhe ngjyrë të ndryshme të sfondit si më poshtë:
- Ikona: shikoni pamjen e ekranit
- Sfondi: #121212
Këtu është rezultati.
Krijo një menu horizontale me butonin ikonë
Një prirje popullore është përdorimi i ikonave për të krijuar një meny ikonash e cila zakonisht përbëhet nga disa butona të vendosur krah për krah. Për ta bërë këtë, ne mund të përdorim vetinë flex.
Ja se si ta bëjmë atë.
Së pari, shtoni një rresht të ri në një kolonë në faqe.
Hapni cilësimet e linjës dhe përditësoni gjerësinë e kanalit në 1.
- Gjerësia e kanalit: 1
Tjetra, hapni cilësimet e kolonës brenda rreshtit dhe shtoni CSS-në e mëposhtme të personalizuar në elementin kryesor të kolonës:
display:flex;
align-items:center;
Shto një modul të ri Ikonë tek kolona.
Nën skedinë Përmbajtja cilësimet e ikonës, zgjidhni një ikonë dhe shtoni URL-në e lidhjes së ikonës.
Nën skedinë Projektimi, përditësoni sa vijon:
- Ngjyra e ikonës: #3e22ff
- Madhësia e ikonës: 40 px
- Margjina (majtas dhe djathtas): 10 px
- Gjerësia e kufirit: 2 px
- Ngjyra e kufirit: #3e22ff
VËREJTJE: Marzhi do të krijojë hapësirë midis butonave ngjitur pasi të shtojmë më vonë.
Nën skedinë Avancuar, shtoni CSS-në e mëposhtme të personalizuar në fushë Elementi i ikonës (siç bëmë më parë për butonin e ikonës katrore):
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
Tani sa herë që shtojmë butona të rinj ikonash, ato do të shfaqen krah për krah. Për ta ilustruar këtë, le të dublikojmë butonin ekzistues të ikonës tri herë për të krijuar gjithsej katër butona ikonash në menynë horizontale.
Pas kësaj, ne mund të kthehemi dhe të përditësojmë ikonat sipas nevojës.
Këtu është rezultati.
U shtuan efektet e pezullimit te butoni i ikonës
Është e vështirë të flasësh për dizajnin e butonit të ikonave pa përmendur efektet hover. Ata janë thjesht shumë argëtues për t'i injoruar.
Ndryshimi i ngjyrës së sfondit dhe ngjyrës së ikonës në lëvizje
Ndryshimi i ngjyrave të butonave është një efekt i njohur dhe efektiv i pezullimit. Për shembull, ne mund të ndryshojmë ngjyrën e sfondit dhe ngjyrën e ikonës në të njëjtën kohë kur përdoruesi rri pezull mbi butonin.
Për ta bërë këtë, hapni cilësimet e modulit të ikonës dhe aktivizoni opsionet e pezullimit për ngjyrën e sfondit dhe zgjidhni një ngjyrë të ndryshme për gjendjen e pezullimit. Pastaj mund të bëni të njëjtën gjë për ikonën.
Në këtë shembull, ne ndryshojmë ngjyrën e sfondit nga e bardha në blu dhe ikonën nga blu në të bardhë.
Ndrysho ikonën në lëvizje
Një tjetër efekt pezullimi që mund t'ju pëlqejë është të ndryshoni plotësisht ikonën. Për ta bërë këtë, mund të zgjidhni një ikonë tjetër për gjendjen e pezullimit kur zgjidhni një ikonë në cilësimet e ikonës.
Shkalla e butonit të ikonës në lëvizje
Një efekt pezullimi i vështirë për t'u injoruar është efekti i shkallëzimit të pezullimit. Kjo zmadhon ose zmadhon butonin e ikonës. Mënyra më e mirë për të shtuar këtë lloj efekti hover është përdorimi i opsioneve të transformimit të Divi. Kjo do të lejojë që butoni të rritet pa ndikuar në elementët rreth tij.
Për të shtuar një efekt të lëvizjes së shkallës te butoni i ikonës, hapni cilësimet e ikonës dhe nën skedën e Projektimi, shikoni për opsionet e transformimit. Aktivizo opsionet e pezullimit dhe më pas cakto shkallën e mëposhtme të transformimit në gjendjen e pezullimit:
- Transformimi Y: 118%
- Transformimi X: 118%
Kjo do të rrisë madhësinë e butonit të ikonës me 18% kur përdoruesi rri pezull mbi të.
Rrotulloje butonin e ikonës kur rri pezull
Rrotullimi i objekteve që rri pezull është gjithmonë një mikro-ndërveprim argëtues. Për të rrotulluar një buton ikonë në hover, mund të përdorim opsionin e rrotullimit të transformimit. Por para kësaj, le ta bëjmë butonin rrethor në mënyrë që vetëm ikona të duket se rrotullohet.
Për ta bërë ikonën rrethore, duke supozuar se butoni është katror, thjesht përditësoni cilësimin e këndeve të rrumbullakosura në 50% në të katër qoshet.
Më pas përditësoni opsionet e transformimit për të përfshirë vlerën e mëposhtme të rrotullimit të transformimit në gjendjen e pezullimit:
- Rrotullimi i transformimit Z: 180 gradë
Le të hedhim një vështrim në 4 efektet tona të pezullimit në veprim.
Rezultati përfundimtar
Le të hedhim një vështrim në rezultatet përfundimtare të tutorialit tonë.
Lexo gjithashtu: Divi: Si të nënvizoni një modul "Blurb" në rri pezull dhe të turbulloni të tjerët
Këtu janë tre butonat tanë të ikonave (standarde, katrore dhe rrethore).
Dhe këtu është menyja e butonit të ikonës horizontale me efekte të pezullimit.
Shkarkoni DIVI Tani!!!
Përfundim
Të dini se si të dizajnoni butonat e ikonave për një Site Web është thelbësore. Dhe, siç e kemi parë në këtë tutorial, nuk është aq e vështirë me Divi. Moduli i ikonave Divi ka një sërë opsionesh të integruara që hapin derën për dizajne krijuese të butonave të ikonave.
Shpresojmë se teknikat në këtë artikull do t'ju ndihmojnë të zhbllokoni disa nga magjitë e modeleve tuaja të butonave të ikonave.
Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.
Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.
...
