Kunne du tænke dig at vide, hvordan du bruger Ikon-modulet til Divi at oprette brugerdefinerede ikoner?
Ikonknapper er blevet en fast bestanddel i webdesignverdenen. Ikoner giver kortfattede visuelle opfordringer til handling, der fungerer godt til mobile enheder, fordi de ikke fylder meget. De fungerer også godt som skifte- eller popup-knapper, som brugerne intuitivt genkender uden behov for tekst.
I dagens tutorial skal vi vise dig, hvordan du designer ikonknapper med Divi. Opret en ikonknap i Divi er ret simpelt og sjovt at lave.
Ved hjælp af Icons-modulet kan vi vælge mellem hundredvis af ikoner og bruge utallige indbyggede designmuligheder fra Divi Builder til at skabe næsten enhver type ikonknap, du kan tænke på.
Vi håber, at denne artikel hjælper dig med at komme i gang med at skabe fantastiske ikonknapper til dit næste projekt.
Lad os starte!
undersøgelse
Her er et hurtigt overblik over de ikonknapper, vi vil oprette i denne vejledning.
Opret en ny side med Divi Builder
Se også: Divi: Sådan tilpasser du kurven og søgeikonerne i modulet "Fuldbreddemenu".
Fra WordPress-dashboardet, gå til Sider> Tilføj nyt for at oprette en ny side.
Giv den en titel, der giver mening for dig, og klik Brug Divi Builder
klik derefter på Begynd at bygge (Byg fra skrammer)
Derefter har du et tomt lærred til at begynde at designe i Divi.
Opret ikonknapper med Divi Icons-modulet
Del 1: Oprettelse af en ikonknap
Lad os for at starte med at tilføje en række med én kolonne til den almindelige standardsektion.
Tilføj derefter et nyt modul ikon til kolonnen.
Ikon, link URL og baggrundsfarve
Under fanen Indhold ikonmodulindstillinger, skal du opdatere følgende:
- Ikon: Højre pil (se skærmbillede)
- Ikon Link URL: # (bare et fyldstof for nu)
- Baggrund: #3e22ff
Kant og kantradius
Under fanen Design, opdater følgende:
- Afrundede hjørner: 10px
- Kantbredde: 2px
- Kantfarve: #7272ff
Skyggeæske
- Box Shadow: Se skærmbillede
- Skyggefarve: rgba(62,34,255,0.48)
Matchende klikbar plads med ikonknapstørrelse
I øjeblikket vil ikonmodulet spænde over hele bredden af den overordnede container (eller kolonne). Dette betyder, at den klikbare plads er større end den faktiske ikonknap.
For at matche det klikbare rum med størrelsen på ikonknappen, kan vi give modulet en maksimal bredde, som er den samme som ikonknappens bredde.
I dette eksempel er knappens samlede bredde 94 pixels.
Under fanen avanceret skal du tilføje følgende tilpassede CSS til hovedelementet:
max-width: 94px
Her er resultatet.
Del 2: Opret en firkantet ikonknap
For at oprette vores firkantede ikonknap skal du duplikere rækken, der indeholder den første ikonknap, vi lige har oprettet. Dette vil give os en dubletknap i rækken at arbejde med.
Giv ikonet samme højde og bredde, mens du holder det centreret
Den store samling af ikoner, der er tilgængelige til brug i Icon-modulet, omfatter både Divi-ikoner og Fontawesome-ikoner. Det er dog ikke alle ikoner, der har samme højde og bredde. Dette gør det lidt sværere at bestemme den nøjagtige bredde og højde af ikonknappen.
For at skabe en perfekt firkantet knap, der engagerer ikonet ved at svæve, kan vi tilføje tilpasset CSS for at indstille en højde og bredde for ikonet samt centrere ikonet ved hjælp af CSS Flex-egenskaben.
Sådan gør du.
Åbn først indstillingerne for dublerede ikoner. Opdater derefter ikonet med et nyt fra ikonvælgeren.
Fjern polstringen fra ikonmodulet. Dette vil ikke være nødvendigt, da vi skal indstille en højde og en bredde for ikonet.
Under fanen Avanceret skal du tilføje følgende tilpassede CSS til Ikon Element :
height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
Nu vil ikonknappen have en højde og bredde på 90 pixels, hvilket gør den til en perfekt firkant. Desuden justerer flex-egenskaben ikonet til midten af modulet. Dette giver dig mulighed for nemt at opdatere ikonstørrelsen i ikonmodulet.
For at fuldføre denne knap, lad os give den en baggrundsgradient og en hvid kantfarve som følger:
- Gradientstop:
- 0 %: #3e22ff
- 100 %: #ff2000
- Kantfarve: #fff
Her er det endelige resultat.
Opret cirkulær ikonknap
Når først ikonknappen er en perfekt firkant, er det nemt at gøre den cirkulær. Men før vi viser dig dette enkle trick, lad os duplikere den forrige linje for at begynde at bygge vores cirkulære ikonknap.
Åbn nu indstillingerne for vores nye dubletikon og under fanen Design, opdater kantradius (eller afrundede hjørner) som følger:
- Afrundede hjørner: 50 %
Og ligesom det har vi en cirkulær ikonknap!
For at ændre designet lidt, lad os give ikonmodulet et andet ikon og baggrundsfarve som følger:
- Ikon: se skærmbillede
- Baggrund: #121212
Her er resultatet.
Opret en vandret menu med ikonknap
En populær trend er at bruge ikoner til at lave en ikonmenu, som normalt består af flere knapper placeret side om side. Til dette kan vi bruge flex-ejendommen.
Sådan gør du det.
Først skal du tilføje en ny række til en kolonne på siden.
Åbn linjeindstillingerne og opdater rendebredden til 1.
- Rendebredde: 1
Åbn derefter kolonneindstillingerne inde i rækken og tilføj følgende tilpassede CSS til hovedkolonneelementet:
display:flex;
align-items:center;
Tilføj et nyt modul ikon til kolonnen.
Under fanen Indhold ikonindstillinger, vælg et ikon og tilføj ikonlinkets URL.
Under fanen Design, opdater følgende:
- Ikonfarve: #3e22ff
- Ikonstørrelse: 40px
- Margen (venstre og højre): 10px
- Kantbredde: 2px
- Kantfarve: #3e22ff
BEMÆRKNING: Margenen vil skabe plads mellem tilstødende knapper, når vi tilføjer flere senere.
Under fanen Avanceret, tilføj følgende tilpassede CSS i feltet Ikon Element (som vi gjorde tidligere for den firkantede ikonknap):
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
Når vi nu tilføjer nye ikonknapper, vises de side om side. For at illustrere dette, lad os duplikere den eksisterende ikonknap tre gange for at skabe i alt fire ikonknapper i den vandrette menu.
Derefter kan vi gå tilbage og opdatere ikonerne efter behov.
Her er resultatet.
Tilføjet svæveeffekter til ikonknappen
Det er svært at tale om design af ikonknapper uden at nævne svæveeffekter. De er bare for sjove til at ignorere.
Ændring af baggrundsfarve og ikonfarve ved svæv
Ændring af knapfarver er en populær og effektiv svæveeffekt. For eksempel kan vi ændre baggrundsfarven og ikonfarven samtidigt, når brugeren svæver over knappen.
For at gøre dette skal du åbne ikonmodulets indstillinger og aktivere svæveindstillingerne for baggrundsfarven og vælge en anden farve til svævetilstanden. Så kan du gøre det samme for ikonet.
I dette eksempel ændrer vi baggrundsfarven fra hvid til blå og ikonet fra blå til hvid.
Skift ikon, når du svæver
En anden svæveeffekt, du måske kunne lide, er at ændre ikonet fuldstændigt. For at gøre dette kan du vælge et andet ikon for svævetilstanden, når du vælger et ikon i ikonindstillingerne.
Ikonknapskala ved svævning
En svæveeffekt, der er svær at ignorere, er den skalerende hover-effekt. Dette forstørrer eller forstørrer ikonknappen. Den bedste måde at tilføje denne type svæveeffekt på er at bruge Divis transformationsmuligheder. Dette vil tillade knappen at vokse uden at påvirke elementerne omkring den.
For at tilføje en skalaeffekt til ikonknappen skal du åbne ikonindstillingerne og under fanen til Design, se efter transformationsmuligheder. Aktiver svæveindstillinger, og tildel derefter følgende transformationsskala til svævetilstanden:
- Transform Y: 118 %
- Transform X: 118 %
Dette vil øge størrelsen af ikonknappen med 18 %, når brugeren holder markøren over den.
Roter ikonknap, når du svæver
Roterende svævende objekter er altid en sjov mikro-interaktion. For at rotere en ikonknap, når du svæver, kan vi bruge indstillingen transformer rotation. Men før det, lad os gøre knappen cirkulær, så kun ikonet ser ud til at rotere.
For at gøre ikonet cirkulært, forudsat at knappen er en firkant, skal du blot opdatere indstillingen for afrundede hjørner til 50 % på alle fire hjørner.
Opdater derefter transformationsindstillingerne for at inkludere følgende transformationsrotationsværdi i svævetilstanden:
- Transform Roter Z: 180 grader
Lad os tage et kig på vores 4 svæveeffekter i aktion.
Endelig resultat
Lad os tage et kig på de endelige resultater af vores tutorial.
Læs også: Divi: Sådan fremhæver du et "Blurb"-modul, når du svæver og slører de andre
Her er vores tre ikonknapper (standard, firkantet og cirkulær).
Og her er den vandrette ikonknapmenu med svæveeffekter.
Download DIVI nu!!!
Konklusion
Ved, hvordan man designer ikonknapper til en Websted er vigtigt. Og som vi har set i denne tutorial, er det ikke så svært med Divi. Divi's Icon Module har en masse indbyggede muligheder, der åbner døren til kreative ikonknapper.
Forhåbentlig vil teknikkerne i denne artikel hjælpe dig med at låse op for noget af magien ved dine egne ikonknapper.
Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
