Knappar med ikoniska teckensnitt har många användningsområden i webbdesignvärlden. Eftersom ikoniska teckensnitt förblir skarpa i färger och design när de skalas till olika storlekar, är det en bra idé att använda dem i knappar. Och att skapa en knapp med ikoniska teckensnitt på Divi är faktiskt ganska enkelt att använda teckensnitt från biblioteket " ElegantIcons". I den här handledningen visar jag dig hur du kan använda ikonteckensnitt med Divi-knappmodulen för att skapa en enda ikonknapp.
Några av höjdpunkterna i denna handledning är:
- Hur man använder ElegantIcons för att lägga till en ikon som knapptext
- Hur man lägger till stoppning och kantradie så att knappen ser ut som en perfekt fyrkant eller cirkel
- Hur man byter ut knappikonen med en annan ikon när du svävar
- Hur man placerar en knappikon för att lägga över en bild
- och mer ...
undersökningen
Här är en förhandsgranskning av vad som kommer ...
Vad behöver du?
För denna självstudie kommer jag att använda följande:
- Divi Theme (självklart)
- Snygga teckensnittikoner, en tutorial på Elegant tema är mycket mer exakt. När du har laddat ner zip-filen från blogginlägget drar vi den till fontfilen eleganticons.ttf för att användas som ett anpassat teckensnitt för vår knappmodul.
- Bed & Breakfast-hemsidan (tillgängligt gratis från Divi Builder)
Låt oss börja!
Lägg till teckensnittet Elegant Icons i din knappmodul
Lägg till en knappmodul
För att komma igång, skapa en ny sida och distribuera den visuella byggaren. Välj "Bygg från grunden" och lägg sedan till en kolumnrad i avsnittet efter att den visuella byggaren har distribuerats och lägg sedan till en knappmodul i raden.
Dra stilfullt teckensnittsikon
För att få färgspelet ElegantFontsdu kan ladda ner denna typsnittspaket via denna länk. Extrahera det innehåll från zip-filen och hitta de eleganta ikontypsnittsfilerna genom att navigera till elegant_font > HTML CSS > class. Dra sedan filen "ElegantIcons.ttf" till din dator och släpp den i den visuella byggaren.
Detta kommer att visa Modal för automatisk nedladdning av teckensnitt. Klicka bara på nedladdningsknappen för att ladda ner teckensnittet till Divi Builder.
Nu har du tillgång till det snygga ikonteckensnittet när du anpassar ett modteckensnitt i den visuella byggaren.
Gå till knappmodulinställningarna och uppdatera knappteckensnittet med det nya Elegant Icon-teckensnittet som du just laddade ner. Den kommer att visas i listan med ikoner under ”Anpassade teckensnitt”.
Du kanske märker att din knapptext har förvandlats till en massa ikoner. Faktum är att varje tecken som matas in i knappinmatningsområdet nu har en ikon som motsvarar bokstaven / tecknet som för närvarande används.
Eftersom vi bara behöver en ikon för vår knapp kan du välja vilket tecken som helst på tangentbordet för att skapa ikonen som är associerad med den karaktären. Ange till exempel siffran 5 för din knapptext för att få en höger chevronpil.
Byt knappikoner på svävaren
Som du vet innehåller knappmodulen möjligheten att lägga till ikoner på svävaren. Vi kan använda den här funktionen för att ersätta ikonteckensnittet med svävarikonen för en fin svävareffekt. Allt vi behöver göra är att ändra knappinställningarna enligt följande:
Knapp Textstorlek: 30 pixlar Knappikon: se skärmdump (det här är ikonen som ersätter teckensnittsikonen som används för knappen) Ikon Knapp Färg: # 0c71c3 (som ska matcha färgen som används för knapptexten ) Knappikonplacering: Vänster knapp svävar textfärg: rgba (255,255,255,0) (detta är helt transparent för att dölja teckensnittet för svävknappsikonen). Anpassad fyllning: 1: a vänster, 1: a höger (denna fyllning ersätter expanderande medan du svävar)
Nu är allt vi behöver göra att ersätta marginalen för det främre elementet i den anpassade css. Gå till fliken Avancerat och ange följande CSS-kod i den främre rutan:
margin-left: 0 !important; |
Nu kommer din knappikon att ersättas med ikonen för muspekaren.
Kreativa ikonknappar med cirkel skalad med knapptextstorlek
Cirkelformade knappar fungerar bra för enstaka ikonknappar. Och om du förstår de inre funktionerna i knappmodulavstånd kan du skapa perfekt cirkulära knappar som skalas till storleken på knapptexten.
Tricket är att placera ut din knapp med hjälp av "em" -enheten. Denna längdenhet är relativt storleken på texten på din knapp. Så om knappens textstorlek är 30 pixlar är 1 em också 30 pixlar (2 em kommer att vara 60 pixlar och så vidare ...). Att veta detta, vi behöver bara se till att vår stoppning runt vår knapp kommer att vara densamma på alla fyra sidor. Men vad du kanske inte har tänkt på är att knappens textradhöjd är 4 em som standard. Det betyder att vi måste ta hänsyn till detta när vi lägger till våra topp- och bottenvaddningsvärden.
För dig som vill veta beräkningen bakom vadderingsvärdena som behövs för att skapa cirkelknappar, här är:
För vänster och höger fyllning, ställ in båda till 1 em. Det betyder att den totala bredden på din knapp blir 90 pixlar (eller 3 em) eftersom ...
30px stoppning vänster + 30px för font-ikonen + 30px stoppning höger = 90px totalt
Knapptextradens höjd är 1.7 em, vilket motsvarar 170% av knapptextstorleken (30 pixlar) vilket är 51 pixlar.
Ställ båda på 0,65 em för topp- och bottenpåfyllning. 0.65 em motsvarar 65% av knappens textstorlek (30 pixlar), vilket motsvarar 19.5 pixlar.
Så ...
19.5px övre stoppning + 51px linjehöjd + 19.5px nedre stoppning = 90px totalt
Det betyder att när knapptexten är satt till 30 pixlar blir den totala knappstorleken 90 pixlar 90 pixlar (en perfekt fyrkant). Faktum är att du kan tänka på det på det sättet. Oavsett storleken på knapptexten är knappens totala storlek 3 gånger värdet. Så, 40px-knapptext skapar en 120px-120px-knapp, etc.
För tillfället har knappen rätt dimensioner, men den är fortfarande fyrkantig. Allt vi behöver göra är att lägga till en 50% kantradie för att ändra fyrkantknappen till en perfekt cirkelknapp.
Här är vad du behöver ändra din knapp till en cirkelknapp:
Border Radius-knapp: 50%
Anpassad beklädnad: 0.65em Top, 0.65em Bottom, 1em Straight, 1em Left
Kom ihåg att du kan justera knappens textstorlek så kommer knappen att ligga kvar i en cirkel precis som textstorlekens fyllning.
Lägga till knappar på Divi
Divi gör det enkelt att lägga till och anpassa unika ikonknappar för att passa utformningen av alla fördefinierade layouter.
För det här exemplet visar jag dig hur du lägger till en enda ikonknapp i Bed & Breakfast-hemsidans layout.
För att lägga till layouten på din sida, öppna inställningsmenyn genom att klicka på den lila ikonen längst ner på sidan (se till att den visuella generatorn är aktiverad). Klicka sedan på ikonen Ladda från bibliotek. Välj layouten för Bed & Breakfast-hemsidan och klicka på knappen "Använd denna layout" för att distribuera layouten på sidan.
Lägga till en ikonknapp i en bild
Antag att du vill lägga till en liten ikonknapp för att lägga till hörnet på en bild med ytterligare en CTA relaterad till en viss produkt eller tjänst. Allt du behöver göra är att lägga till en knappmodul under bilden och anpassa den för att inkludera ikonens teckensnitt och låta den överlappa bilden med anpassat avstånd.
Leta efter avsnittet "Om oss" på startsidan. Lägg sedan till en knappmodul direkt under en av bilderna som används för att presentera "Dubbelrummet" (den första i den första kolumnen i raden med tre kolumner).
Öppna sedan knappinställningarna och lägg ett stort "P" i textrutan för knappar. Detta kommer att ändras i vår ikon när du väl har valt de fantastiska bakgrundsuppsättningarna som knappteckensnittet.
För att snabbt matcha knappdesignen med layouten, spara dina knappinställningar och hitta "Boka nu" -knappen högst upp i layouten. Öppna knappinställningar och kopiera knappstilarna genom att högerklicka på knappen Alternativ för att växla titeln och välja alternativet "Kopiera knappstilar" i listan.
Högerklicka nu på modulen du lagt till under bilden och välj "Klistra in knappen stil".
Uppdatera sedan knappinställningarna enligt följande:
Teckensnittsknapp: Awesome Font
font-knapp Kantbredd: 0px
Visa knappikon: NEJ
Lägg sedan till vår smarta anpassade polstring så att knappen är en perfekt fyrkant:
Anpassad padding: 0.65em Top, 0.65em Bottom, 1em vänster, 1em Right
För att placera knappen så att den täcker bildens nedre högra hörn måste du först ta bort den nedre marginalen från bildmodulen ovan. Öppna Image Image Module-inställningarna direkt ovanför knappen och ställ in Bottom Margin till 0px.
Nu måste vi dra knappen över bilden med ett anpassat negativt marginalvärde som är lika med knappens höjd. För att göra detta måste vi bestämma höjden på vår knapp.
Som nämnts tidigare i den här artikeln, med den anpassade fyllningen på plats, kan vi veta den exakta storleken på vår knapp baserat på den aktuella storleken på knapptexten. Eftersom knappens textstorlek är 20 pixlar vet vi att vår knapphöjd är 3 em (3 gånger knappens textstorlek), vilket är 60 pixlar. Därför måste vi ställa in en anpassad marginal för vår knapp enligt följande:
Anpassad marginal: -60px Topp
Och då kan vi placera vår knapp till höger genom att justera justeringen av knappen till höger.
Nu när vi har en fungerande design för vår bild och vår knapp. Allt vi behöver göra är att lägga till samma knapp i alla bilder i avsnittet.
Eftersom vi tog bort bildens nedre marginal kan vi enkelt tillämpa denna ändring på alla bilder i avsnittet med alternativet Förläng stilar. Högerklicka på bilden och välj "Förläng bildstilar".
I dialogrutan Utöka stilar väljer du "Detta avsnitt" för alternativet Över och klickar på Expand-knappen. Nu har alla bilder 0 pixlar nedre marginalen.
Det sista steget är helt enkelt att kopiera och klistra in knappmodulerna under varje bild.
Här är den slutliga designen.
Och eftersom vi använde korrekt avståndstekniker kommer knappen också att förbli på plats på mobilen ...
Ikoner tillgängliga med knappmodulen
Eftersom knappmodulens knapptext är begränsad till de tecken som är tillgängliga på tangentbordet, måste du utforska dessa tangenter för att hitta tillgängliga ikoner som är associerade med varje tangent. Ett enkelt sätt att göra detta är att skapa en knappmodul med knappteckensnittet inställt på elegant teckensnitt och skriva in tecknen i knapprutan.
Här är en skärmdump av karaktärerna med motsvarande teckensnittsikon:
Om du tycker att denna lista är något uttömmande kan du alltid använda en textmodul för att skapa ikonlänkar med de angivna Unic-koderna. ICI .
Avslutande tankar
Att använda eleganta ikoner med Divis knappmodul är ett bekvämt sätt att skapa unika knappar för din webbplats. Detta öppnar dörren till kreativitet med modulinställningar för att anpassa din knapp med unika textstilar, hovringseffekter och mer. Jag gillar särskilt de anpassade knappavståndsvärdena som säkerställer att knapparna tar formen av en perfekt kvadrat eller cirkel.
Det finns massor av användningsområden för ikonknappar. Förhoppningsvis kommer användningsexemplet i denna handledning att ge lite inspiration till dina egna projekt.
