Vill du veta hur man använder Icon-modulen för Divi skapa anpassade ikoner?
Ikonknappar har blivit en stapelvara i webbdesignens värld. Ikoner ger kortfattade visuella uppmaningar som fungerar utmärkt för mobila enheter eftersom de inte tar upp mycket utrymme. De fungerar också bra som växlings- eller popup-knappar som användarna intuitivt känner igen utan att behöva använda text.
I dagens handledning ska vi visa dig hur du designar ikonknappar med Divi. Skapa en ikonknapp i Divi är ganska enkelt och roligt att göra.
Med hjälp av Icons-modulen kan vi välja bland hundratals ikoner och använda otaliga inbyggda designalternativ från Divi Builder för att skapa nästan vilken typ av ikonknapp du kan tänka dig.
Vi hoppas att den här artikeln hjälper dig att komma igång med att skapa fantastiska ikonknappar för ditt nästa projekt.
Låt oss börja!
undersökningen
Här är en snabb översikt över ikonknapparna vi kommer att skapa i den här handledningen.
Skapa en ny sida med Divi Builder
Se även: Divi: Hur man anpassar korg- och sökikonerna i modulen "Fullwidth Menu".
Från WordPress-instrumentpanelen, gå till Sidor> Lägg till nytt för att skapa en ny sida.
Ge den en titel som är vettig för dig och klicka Använd Divi Builder
klicka sedan på Börja bygga (Bygg från grunden)
Efter det har du en tom duk för att börja designa i Divi.
Skapa ikonknappar med modulen Divi Icons
Del 1: Skapa en ikonknapp
Till att börja med, låt oss lägga till en rad med en kolumn till standardavsnittet.
Lägg sedan till en ny modul icon till kolumnen.
Ikon, länk URL och bakgrundsfärg
Under fliken Innehåll ikonmodulinställningar, uppdatera följande:
- Ikon: högerpil (se skärmdump)
- Ikonlänk-URL: # (bara ett fyllmedel för tillfället)
- Bakgrund: #3e22ff
Kant och kantradie
Under fliken Designa, uppdatera följande:
- Rundade hörn: 10px
- Kantbredd: 2px
- Kantfärg: #7272ff
Skugga låda
- Box Shadow: Se skärmdump
- Skuggfärg: rgba(62,34,255,0.48)
Matchande klickbart utrymme med ikonknappstorlek
För närvarande kommer ikonmodulen att sträcka sig över hela bredden av den överordnade behållaren (eller kolumnen). Detta innebär att det klickbara utrymmet är större än den faktiska ikonknappen.
För att matcha det klickbara utrymmet med storleken på ikonknappen kan vi ge modulen en maximal bredd som är densamma som ikonknappens bredd.
I det här exemplet är knappens totala bredd 94 pixlar.
På fliken Avancerat lägger du till följande anpassade CSS till huvudelementet:
max-width: 94px
Här är resultatet.
Del 2: Skapa en fyrkantig ikonknapp
För att skapa vår fyrkantiga ikonknapp, duplicera raden som innehåller den första ikonknappen vi just skapade. Detta ger oss en dubblettknapp i raden att arbeta med.
Ge ikonen samma höjd och bredd samtidigt som den hålls centrerad
Den stora samlingen av ikoner som är tillgängliga att använda i Icon-modulen inkluderar både Divi-ikoner och Fontawesome-ikoner. Alla ikoner kommer dock inte att ha samma höjd och bredd. Detta gör det lite svårare att bestämma den exakta bredden och höjden på ikonknappen.
För att skapa en perfekt fyrkantig knapp som engagerar ikonen vid hovring, kan vi lägga till anpassad CSS för att ställa in en höjd och bredd för ikonen samt centrera ikonen med CSS Flex-egenskapen.
Så här.
Öppna först inställningarna för duplikatikonen. Uppdatera sedan ikonen med en ny från ikonväljaren.
Ta bort stoppningen från ikonmodulen. Detta kommer inte att vara nödvändigt eftersom vi ska ställa in en höjd och en bredd för ikonen.
Lägg till följande anpassade CSS på fliken Avancerat Ikon Element :
height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
Nu kommer ikonknappen att ha höjd och bredd lika med 90 pixlar, vilket gör den till en perfekt fyrkant. Egenskapen flex justerar också ikonen i mitten av modulen. Detta gör att du enkelt kan uppdatera ikonstorleken i ikonmodulen.
För att slutföra den här knappen, låt oss ge den en bakgrundsgradient och en vit kantfärg enligt följande:
- Gradientstopp:
- 0%: #3e22ff
- 100 %: #ff2000
- Kantfärg: #fff
Här är det slutliga resultatet.
Skapa cirkulär ikonknapp
När ikonknappen är en perfekt fyrkant är det enkelt att göra den cirkulär. Men innan vi visar dig detta enkla trick, låt oss duplicera föregående rad för att börja bygga vår cirkulära ikonknapp.
Öppna nu inställningarna för vår nya dubblettikon och under fliken Designauppdatera gränsradien (eller rundade hörn) enligt följande:
- Rundade hörn: 50 %
Och precis så har vi en cirkulär ikonknapp!
För att ändra designen lite, låt oss ge ikonmodulen en annan ikon och bakgrundsfärg enligt följande:
- Ikon: se skärmdump
- Bakgrund: #121212
Här är resultatet.
Skapa en horisontell meny med ikonknapp
En populär trend är att använda ikoner för att skapa en ikonmeny som vanligtvis består av flera knappar placerade sida vid sida. För att göra detta kan vi använda flexegenskapen.
Så här gör du det.
Lägg först till en ny rad i en kolumn på sidan.
Öppna linjeinställningarna och uppdatera rännans bredd till 1.
- Rännans bredd: 1
Öppna sedan kolumninställningarna inuti raden och lägg till följande anpassade CSS till huvudkolumnelementet:
display:flex;
align-items:center;
Lägg till en ny modul icon till kolumnen.
Under fliken Innehåll ikoninställningar, välj en ikon och lägg till ikonlänkens URL.
Under fliken Designa, uppdatera följande:
- Ikonfärg: #3e22ff
- Ikonstorlek: 40px
- Marginal (vänster och höger): 10px
- Kantbredd: 2px
- Kantfärg: #3e22ff
ANMÄRKNING: Marginalen kommer att skapa utrymme mellan intilliggande knappar när vi lägger till fler senare.
Under fliken Advanced Open water, lägg till följande anpassade CSS i fältet Ikon Element (som vi gjorde tidigare för den fyrkantiga ikonknappen):
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
Nu när vi lägger till nya ikonknappar kommer de att dyka upp sida vid sida. För att illustrera detta, låt oss duplicera den befintliga ikonknappen tre gånger för att skapa totalt fyra ikonknappar i den horisontella menyn.
Efter det kan vi gå tillbaka och uppdatera ikonerna efter behov.
Här är resultatet.
Lade till svävningseffekter till ikonknappen
Det är svårt att prata om design av ikonknappar utan att nämna svävningseffekter. De är bara för roliga för att ignorera.
Ändra bakgrundsfärg och ikonfärg vid hovring
Att ändra knappfärger är en populär och effektiv svävningseffekt. Till exempel kan vi ändra bakgrundsfärgen och ikonfärgen samtidigt när användaren håller muspekaren över knappen.
För att göra detta öppnar du ikonmodulens inställningar och aktiverar hovringsalternativen för bakgrundsfärgen och väljer en annan färg för hovringstillståndet. Sedan kan du göra samma sak för ikonen.
I det här exemplet ändrar vi bakgrundsfärgen från vit till blå och ikonen från blå till vit.
Ändra ikon när du håller muspekaren
En annan svävningseffekt som du kanske gillar är att helt ändra ikonen. För att göra detta kan du välja en annan ikon för svävningsläget när du väljer en ikon i ikoninställningarna.
Ikonknappskala på svävaren
En svävningseffekt som är svår att ignorera är den skalande hovringseffekten. Detta förstorar eller förstorar ikonknappen. Det bästa sättet att lägga till den här typen av hovringseffekt är att använda Divis transformationsalternativ. Detta gör att knappen växer utan att påverka elementen runt den.
För att lägga till en skaleffekt på ikonknappen, öppna ikoninställningarna och under fliken för Designa, leta efter transformeringsalternativ. Aktivera hovringsalternativ och tilldela sedan följande transformeringsskala till hovringstillståndet:
- Transform Y: 118 %
- Transform X: 118 %
Detta kommer att öka storleken på ikonknappen med 18 % när användaren håller muspekaren över den.
Rotera ikonknappen när du håller muspekaren
Att rotera svävande föremål är alltid en rolig mikrointeraktion. För att rotera en ikonknapp när du håller muspekaren, kan vi använda alternativet transformera rotera. Men innan dess, låt oss göra knappen cirkulär så att endast ikonen ser ut att rotera.
För att göra ikonen cirkulär, förutsatt att knappen är en fyrkant, uppdaterar du helt enkelt inställningen för rundade hörn till 50 % på alla fyra hörnen.
Uppdatera sedan transformeringsalternativen för att inkludera följande transformationsrotationsvärde i hovringsläget:
- Transform Rotera Z: 180 grader
Låt oss ta en titt på våra fyra svävningseffekter i aktion.
Slutresultat
Låt oss ta en titt på de slutliga resultaten av vår handledning.
Läs också: Divi: Hur man markerar en "Blurb"-modul när du svävar och gör de andra suddiga
Här är våra tre ikonknappar (standard, fyrkantig och cirkulär).
Och här är den horisontella ikonknappmenyn med svävningseffekter.
Ladda ner DIVI nu!!!
Slutsats
Vet hur man designar ikonknappar för en webbplats är väsentligt. Och som vi har sett i den här handledningen är det inte så svårt med Divi. Divis ikonmodul har ett gäng inbyggda alternativ som öppnar dörren till kreativa ikonknappsdesigner.
Förhoppningsvis hjälper teknikerna i den här artikeln dig att låsa upp en del av magin med dina egna ikonknappsdesigner.
Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
