Vil du vite hvordan du bruker Icon-modulen til Divi lage egendefinerte ikoner?
Ikonknapper har blitt en stift i webdesignverdenen. Ikoner gir konsise visuelle oppfordringer til handling som fungerer utmerket for mobile enheter fordi de ikke tar opp mye plass. De fungerer også godt som veksle- eller popup-knapper som brukere intuitivt gjenkjenner uten behov for tekst.
I dagens veiledning skal vi vise deg hvordan du designer ikonknapper med Divi. Lag en ikonknapp i Divi er ganske enkel og morsom å gjøre.
Ved å bruke Icons-modulen kan vi velge blant hundrevis av ikoner og bruke utallige innebygde designalternativer fra Divi Builder for å lage omtrent hvilken som helst type ikonknapp du kan tenke deg.
Vi håper denne artikkelen hjelper deg med å komme i gang med å lage fantastiske ikonknapper for ditt neste prosjekt.
La oss begynne!
undersøkelsen
Her er en rask oversikt over ikonknappene vi skal lage i denne opplæringen.
Opprett en ny side med Divi Builder
Se også: Divi: Hvordan tilpasse kurven og søkeikonene til modulen "Fullbreddsmeny".
Fra WordPress-dashbordet, gå til Sider> Legg til nye for å opprette en ny side.
Gi den en tittel som gir mening for deg og klikk Bruk Divi Builder
deretter klikker du Begynn å bygge (Bygg fra bunnen av)
Etter det vil du ha et blankt lerret for å begynne å designe i Divi.
Lag ikonknapper med Divi Icons-modulen
Del 1: Lage en ikonknapp
For å starte, la oss legge til en rad med én kolonne til standard vanlige seksjon.
Legg deretter til en ny modul Ikon til kolonnen.
Ikon, lenke URL og bakgrunnsfarge
Under fanen Innhold ikonmodulinnstillinger, oppdater følgende:
- Ikon: Høyre pil (se skjermbilde)
- Ikon Link URL: # (bare et fyllstoff for nå)
- Bakgrunn: #3e22ff
Kant og kantradius
Under fanen utforming, oppdater følgende:
- Avrundede hjørner: 10px
- Kantbredde: 2px
- Kantfarge: #7272ff
Skyggekasse
- Box Shadow: Se skjermbilde
- Skyggefarge: rgba(62,34,255,0.48)
Matchende klikkbar plass med ikonknappstørrelse
For øyeblikket vil ikonmodulen spenne over hele bredden av den overordnede beholderen (eller kolonnen). Dette betyr at den klikkbare plassen er større enn den faktiske ikonknappen.
For å matche den klikkbare plassen med størrelsen på ikonknappen, kan vi gi modulen en maksimal bredde som er den samme som bredden på ikonknappen.
I dette eksemplet er den totale bredden på knappen 94 piksler.
Under Avansert-fanen legger du til følgende tilpassede CSS til hovedelementet:
max-width: 94px
Her er resultatet.
Del 2: Lag en firkantet ikonknapp
For å lage vår firkantede ikonknapp, dupliser raden som inneholder den første ikonknappen vi nettopp opprettet. Dette vil gi oss en duplikatknapp i raden å jobbe med.
Gi ikonet samme høyde og bredde mens du holder det sentrert
Den store samlingen av ikoner som er tilgjengelige for bruk i Icon-modulen inkluderer både Divi-ikoner og Fontawesome-ikoner. Imidlertid vil ikke alle ikoner ha samme høyde og bredde. Dette gjør det litt vanskeligere å bestemme den nøyaktige bredden og høyden på ikonknappen.
For å lage en perfekt firkantet knapp som engasjerer ikonet når du svever, kan vi legge til tilpasset CSS for å angi en høyde og bredde for ikonet, samt sentrere ikonet ved å bruke CSS Flex-egenskapen.
Slik gjør du det.
Først åpner du duplikatikoninnstillingene. Oppdater deretter ikonet med et nytt fra ikonvelgeren.
Fjern polstringen fra ikonmodulen. Dette vil ikke være nødvendig siden vi skal angi en høyde og en bredde for ikonet.
Under Avansert-fanen legger du til følgende egendefinerte CSS til Ikon Element :
height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
Nå vil ikonknappen ha høyde og bredde lik 90 piksler, noe som gjør den til en perfekt firkant. I tillegg justerer flex-egenskapen ikonet i midten av modulen. Dette lar deg enkelt oppdatere ikonstørrelsen i ikonmodulen.
For å fullføre denne knappen, la oss gi den en bakgrunnsgradient og en hvit kantfarge som følger:
- Gradientstopp:
- 0 %: #3e22ff
- 100 %: #ff2000
- Kantfarge: #fff
Her er det endelige resultatet.
Lag sirkulært ikonknapp
Når ikonknappen er en perfekt firkant, er det enkelt å gjøre den sirkulær. Men før vi viser deg dette enkle trikset, la oss duplisere forrige linje for å begynne å bygge vår sirkulære ikonknapp.
Åpne nå innstillingene for vårt nye duplikatikon og under fanen utforming, oppdater kantradiusen (eller avrundede hjørner) som følger:
- Avrundede hjørner: 50 %
Og akkurat som det har vi en sirkulær ikonknapp!
For å endre designet litt, la oss gi ikonmodulen et annet ikon og bakgrunnsfarge som følger:
- Ikon: se skjermbilde
- Bakgrunn: #121212
Her er resultatet.
Lag en horisontal meny med ikonknapp
En populær trend er å bruke ikoner til å lage en ikonmeny som vanligvis består av flere knapper plassert side ved side. For å gjøre dette kan vi bruke flex-eiendommen.
Slik gjør du det.
Først legger du til en ny rad i en kolonne på siden.
Åpne linjeinnstillingene og oppdater rennebredden til 1.
- Rennebredde: 1
Deretter åpner du kolonneinnstillingene inne i raden og legger til følgende tilpassede CSS til hovedkolonneelementet:
display:flex;
align-items:center;
Legg til en ny modul Ikon til kolonnen.
Under fanen Innhold ikoninnstillinger, velg et ikon og legg til ikonlink-URLen.
Under fanen utforming, oppdater følgende:
- Ikonfarge: #3e22ff
- Ikonstørrelse: 40px
- Marg (venstre og høyre): 10px
- Kantbredde: 2px
- Kantfarge: #3e22ff
MERKNAD: Marginen vil skape plass mellom tilstøtende knapper når vi legger til flere senere.
Under fanen Avansert, legg til følgende egendefinerte CSS i feltet Ikon Element (som vi gjorde tidligere for den firkantede ikonknappen):
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
Nå hver gang vi legger til nye ikonknapper, vil de vises side ved side. For å illustrere dette, la oss duplisere den eksisterende ikonknappen tre ganger for å lage totalt fire ikonknapper i den horisontale menyen.
Etter det kan vi gå tilbake og oppdatere ikonene etter behov.
Her er resultatet.
Lagt til sveveeffekter til ikonknappen
Det er vanskelig å snakke om ikonknappdesign uten å nevne sveveeffekter. De er bare for morsomme til å ignorere.
Endring av bakgrunnsfarge og ikonfarge ved sveving
Å endre knappefarger er en populær og effektiv sveveeffekt. For eksempel kan vi endre bakgrunnsfargen og ikonfargen samtidig når brukeren holder musepekeren over knappen.
For å gjøre dette, åpne ikonmodulinnstillingene og aktiver svevealternativene for bakgrunnsfargen og velg en annen farge for svevetilstanden. Deretter kan du gjøre det samme for ikonet.
I dette eksemplet endrer vi bakgrunnsfargen fra hvit til blå og ikonet fra blått til hvitt.
Endre ikon når du holder musepekeren
En annen sveveeffekt du kanskje liker er å endre ikonet fullstendig. For å gjøre dette kan du velge et annet ikon for svevetilstanden når du velger et ikon i ikoninnstillingene.
Ikonknappskala ved sveving
En sveveeffekt som er vanskelig å ignorere, er skaleringseffekten. Dette forstørrer eller forstørrer ikonknappen. Den beste måten å legge til denne typen sveveeffekt er å bruke Divis transformasjonsalternativer. Dette lar knappen vokse uten å påvirke elementene rundt den.
For å legge til en skalaeffekt til ikonknappen, åpne ikoninnstillingene og under fanen til utforming, se etter transformasjonsalternativer. Aktiver hover-alternativer, og tilordne deretter følgende transformasjonsskala til hover-tilstanden:
- Transform Y: 118 %
- Transform X: 118 %
Dette vil øke størrelsen på ikonknappen med 18 % når brukeren holder musepekeren over den.
Roter ikonknappen når du peker
Roterende svevende objekter er alltid en morsom mikro-interaksjon. For å rotere en ikonknapp når du holder musepekeren, kan vi bruke alternativet for transformering. Men før det, la oss gjøre knappen sirkulær slik at bare ikonet ser ut til å rotere.
For å gjøre ikonet sirkulært, forutsatt at knappen er en firkant, oppdaterer du bare innstillingen for avrundede hjørner til 50 % på alle fire hjørner.
Deretter oppdaterer transformeringsalternativene for å inkludere følgende transformasjonsrotasjonsverdi i svevetilstanden:
- Transform Roter Z: 180 grader
La oss ta en titt på våre 4 sveveeffekter i aksjon.
Endelig resultat
La oss ta en titt på de endelige resultatene av opplæringen vår.
Les også: Divi: Slik markerer du en "Blurb"-modul når du holder musepekeren og gjør de andre uskarpe
Her er våre tre ikonknapper (standard, firkantet og sirkulær).
Og her er den horisontale ikonknappmenyen med sveveeffekter.
Last ned DIVI nå!!!
konklusjonen
Vet hvordan du designer ikonknapper for en nettstedet Web er viktig. Og, som vi har sett i denne opplæringen, er det ikke så vanskelig med Divi. Divis ikonmodul har en haug med innebygde alternativer som åpner døren til kreative ikonknappdesign.
Forhåpentligvis vil teknikkene i denne artikkelen hjelpe deg med å låse opp noe av magien til dine egne ikonknappdesign.
Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.
Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
