Knapper med ikoniske skrifttyper har mange anvendelser i webdesignverdenen. Da ikoniske skrifttyper forbliver skarpe i farver og design, når de skaleres til forskellige størrelser, er det en god ide at bruge dem i knapper. Og det er faktisk ret nemt at oprette en knap med ikoniske skrifttyper på Divi ved hjælp af skrifttyperne fra biblioteket " ElegantIcons". I denne vejledning viser jeg dig, hvordan du kan bruge ikonskrifttyper med Divi-knapmodulet til at oprette en enkelt ikonknap.
Nogle af højderne i denne vejledning omfatter:
- Sådan bruges ElegantIcons for at tilføje et ikon som en knaptekst
- Sådan tilføjes polstring og kantradius for at få knappen til at ligne en perfekt firkant eller cirkel
- Sådan udskiftes knapikonet med et andet ikon, når du svæver
- Sådan placeres et knapikon for at overlejre et billede
- og mere ...
undersøgelse
Her er en forhåndsvisning af hvad der kommer ...
Hvad har du brug for?
Til denne tutorial vil jeg bruge følgende:
- Divi-tema (naturligvis)
- Stilfulde fontikoner, en tutorial på Elegant tema er meget mere præcis. Når du har downloadet zip-filen fra blogindlægget, trækker vi den ind i fonten eleganticons.ttf for at bruge den som en brugerdefineret skrifttype til vores knappemodul.
- Hjemmesiden til Bed & Breakfast (fås gratis hos Divi Builder)
Lad os starte!
Føj skrifttypen Elegant Icons til dit knapmodul
Tilføj et knapmodul
For at komme i gang skal du oprette en ny side og implementere den visuelle builder. Vælg "Byg fra bunden", og efter at den visuelle builder er implementeret, skal du tilføje en kolonnerække til sektionen og derefter tilføje et knapmodul til rækken.
Træk stilfuld ikonfont
For at få farvespillet ElegantFontsdu kan downloade denne skrifttypepakke via dette link. Uddrag det indhold fra zip-filen og find de elegante ikonskrifttyper ved at navigere til elegant_font > HTML CSS > class. Træk derefter filen "ElegantIcons.ttf" til din computer og slip den i den visuelle builder.
Dette bringer modaliteten til automatisk download af font op. Klik bare på download-knappen for at downloade skrifttypen til Divi Builder.
Nu har du adgang til den stilfulde ikonfont, når du tilpasser en mod-skrifttype i den visuelle builder.
Gå til knapmodulindstillingerne, og opdater knapefonten med den nye Elegant Icon-skrifttype, du lige har downloadet. Det vises på listen over ikoner under “Brugerdefinerede skrifttyper”.
Du bemærker muligvis, at din knaptekst er blevet til en masse ikoner. Faktisk har hvert tegn, der indtastes i knappens tekstindtastningsområde, nu et ikon, der svarer til det aktuelt anvendte bogstav / tegn.
Da vi kun har brug for et ikon til vores knap, kan du vælge et hvilket som helst tegn på tastaturet for at generere det ikon, der er knyttet til det tegn. Indtast f.eks. Tallet 5 for din knaptekst for at få en højre chevronpil.
Udveksle knapikoner på svæver
Som du ved, indeholder knapmodulet muligheden for at tilføje ikoner, når du holder markøren. Vi kan bruge denne funktion til at erstatte ikon skrifttypen med svæveikonet for en dejlig svæveeffekt. Alt vi skal gøre er at ændre knappens indstillinger som følger:
Knap Tekststørrelse: 30 pix Knapikon: se skærmbillede (dette vil være ikonet, der erstatter det skrifttypikon, der bruges til knappen) Ikon Knap Farve: # 0c71c3 (som skal matche den farve, der bruges til knapteksten ) Knapikonplacering: Venstre knap svæver tekstfarve: rgba (255,255,255,0) (dette er helt gennemsigtigt for at skjule skrifttypen for ikonet for svæveknappen). Tilpasset udfyldning: 1. venstre, 1. højre (denne udfyldning erstatter udvidelse, mens du svæver)
Nu er alt, hvad vi skal gøre, at erstatte margenen for det forreste element i den tilpassede css. Gå til fanen Avanceret, og indtast følgende CSS-kode i frontboksen:
margin-left : 0 !important ; |
Nu vil dit knapikon blive erstattet med ikonet med musen over.
Kreative ikonknapper med cirkel skaleret med knaptekststørrelse
Cirkelformede knapper fungerer godt til knapper med enkelt ikon. Og hvis du forstår de indre funktioner i knapmodulafstand, kan du oprette perfekt cirkulære knapper, der skaleres til størrelsen på knapteksten.
Tricket er at placere din knap ud ved hjælp af "em" -enheden. Denne længdeenhed er i forhold til størrelsen på teksten på din knap. Så hvis knappens tekststørrelse er 30 pixel, er 1 em også 30 pixel (2 em vil være 60 pixel og så videre ...). Når vi ved dette, skal vi bare sørge for, at vores polstring omkring vores knap vil være den samme på alle 4 sider. Men hvad du måske ikke har overvejet er, at knappens tekstlinjehøjde er 1.7 em som standard. Dette betyder, at vi skal tage dette i betragtning, når vi tilføjer vores top- og bundpolstringsværdier.
For de af jer, der ønsker at kende beregningen bag de polstringsværdier, der er nødvendige for at oprette cirkelknapper, er her:
For venstre og højre påfyldning skal du indstille begge til 1 em. Dette betyder, at den samlede bredde på din knap vil være 90 pixel (eller 3 em), fordi ...
30px polstring til venstre + 30px til font-ikon + 30px polstring til højre = 90px i alt
Højden på knaptekstlinjen er 1.7em, hvilket svarer til 170% af knaptekststørrelsen (30px), hvilket er 51px.
For top og bundpåfyldning skal du indstille begge til 0,65 em. 0.65 em svarer til 65% af knappens tekststørrelse (30 pixel), hvilket svarer til 19.5 pixel.
Så ...
19.5px øvre polstring + 51px liniehøjde + 19.5px nederste polstring = 90px i alt
Dette betyder, at når knappeteksten er indstillet til 30 pixel, vil den samlede knapstørrelse være 90 pixel med 90 pixel (en perfekt firkant). Faktisk kan du tænke på det på den måde. Uanset knappens tekststørrelse er den samlede knapstørrelse 3 gange værdien. Så 40px-knaptekst opretter en 120px-120px-knap osv.
I øjeblikket har knappen de rigtige dimensioner, men den er stadig firkantet. Alt, hvad vi skal gøre er at tilføje en kantradius på 50% for at ændre den firkantede knap til en perfekt cirkelknap.
Her er hvad du har brug for at ændre din knap til en cirkelknap:
Border Radius-knap: 50%
Custom Stoffet: 0.65em Top, 0.65em Bottom, 1em Straight, 1em Left
Husk, du kan justere knappens tekststørrelse, og knappen forbliver i en cirkel perfekt som tekststørrelsesudfyldningen.
Tilføjelse af knapper på Divi
Divi gør det let at tilføje og tilpasse unikke ikonknapper, så de passer til ethvert foruddefineret layout.
I dette eksempel viser jeg dig, hvordan du tilføjer en enkelt ikonknap til Bed & Breakfast-startsidens layout.
For at tilføje layoutet til din side skal du åbne indstillingsmenuen ved at klikke på det lilla ikon nederst på siden (sørg for at den visuelle generator er aktiveret). Klik derefter på ikonet Indlæs fra bibliotek. Vælg layoutet på Bed & Breakfast-startsiden, og klik på knappen "Brug dette layout" for at implementere layoutet på siden.
Tilføjelse af en ikonknap til et billede
Antag at du vil tilføje en lille ikonknap for at overlejre hjørnet af et billede med en ekstra CTA relateret til et bestemt produkt eller en bestemt tjeneste. Alt du skal gøre er at tilføje et knapmodul under billedet og tilpasse det til at inkludere ikonets skrifttype og lade det overlappe billedet med brugerdefineret afstand.
Se efter afsnittet "Om os" på hjemmesiden. Tilføj derefter et knapmodul direkte under et af de billeder, der bruges til at præsentere "Dobbeltværelse" (det første i den første kolonne i rækken med tre kolonner).
Åbn derefter knapindstillinger, og anbring et stort "P" i tekstfeltet på knappen. Dette vil ændre sig i vores ikon, når du vælger de fantastiske baggrundssæt som knappen skrifttype.
For hurtigt at begynde at matche knapdesignet med layoutet skal du gemme dine knapindstillinger og finde knappen "Book nu" øverst i layoutet. Åbn knapindstillinger og kopi knapformater ved at højreklikke på knappen Knapindstillinger for at skifte titel og vælge "Kopi knapformater" fra listen.
Højreklik nu på det modul, du tilføjede under billedet, og vælg "Indsæt knapstil".
Opdater derefter knapindstillingerne som følger:
Font-knap: Awesome skrifttype
font-knap Kantbredde: 0px
Vis knapikon: NEJ
Tilføj derefter vores smarte tilpassede polstring, så knappen er en perfekt firkant:
Custom Padding: 0.65em Top, 0.65em Bund, 1em Venstre, 1em Højre
For at placere knappen, så den dækker det nederste højre hjørne af billedet, skal du først fjerne bundmargenen fra billedmodulet ovenfor. Åbn indstillingerne for Image Image Module direkte over knappen, og indstil bundmargenen til 0px.
Nu skal vi trække knappen over billedet ved hjælp af en brugerdefineret negativ margenværdi svarende til højden på knappen. For at gøre dette skal vi bestemme højden på vores knap.
Som nævnt tidligere i denne artikel, med den brugerdefinerede udfyldning, kan vi kende den nøjagtige størrelse på vores knap baseret på den aktuelle størrelse på knapteksten. Da knappens tekststørrelse er 20 pixel, ved vi, at vores knaphøjde er 3 em (3 gange knappens tekststørrelse), hvilket er 60 pixel. Derfor er vi nødt til at indstille en brugerdefineret margen for vores knap som følger:
Brugerdefineret margen: -60px top
Og så kan vi placere vores knap til højre ved at justere justeringen af knappen til højre.
Nu hvor vi har et fungerende design til vores image og vores knap. Alt, hvad vi skal gøre, er at tilføje den samme knap til alle billeder i sektionen.
Da vi fjernede billedets nederste margen, kan vi nemt anvende denne ændring på alle billederne i sektionen ved hjælp af indstillingen Udvid stilarter. Højreklik på billedet, og vælg "Udvid billedformater".
I dialogboksen Udvid stilarter skal du vælge “Dette afsnit” for indstillingen på tværs og klikke på knappen Udvid. Nu har alle billeder 0 pixers nederste margen.
Det sidste trin er simpelthen at kopiere og indsætte knappemodulerne under hvert billede.
Her er det endelige design.
Og fordi vi brugte korrekte afstandsteknikker, forbliver knappen også på plads på mobilen ...
Ikoner til rådighed ved hjælp af knapmodulet
Da knappemodulets knaptekst er begrænset til de tilgængelige tegn på tastaturet, skal du udforske disse taster for at finde de tilgængelige ikoner, der er knyttet til hver tast. En nem måde at gøre dette på er at oprette et knapmodul med knappen skrifttype indstillet til elegant skrifttype og skrive tegnene i tekstfeltet på knappen.
Her er et skærmbillede af tegnene med deres tilsvarende fontikon:
Hvis du finder denne liste noget udtømmende, kan du altid bruge et tekstmodul til at oprette ikonlink ved hjælp af de anførte Unic-koder. HER .
endelige tanker
Brug af elegante ikoner med Divi's knapmodul er en praktisk måde at skabe unikke knapper til din Websted. Dette åbner døren til kreativitet med modulindstillinger for at tilpasse din knap med unikke tekststile, svæveeffekter og mere. Jeg kan især godt lide de tilpassede knapafstandsværdier, der sikrer, at knapperne tager form af en perfekt firkant eller cirkel.
Der er masser af anvendelser til ikonknapper. Forhåbentlig vil brugseksemplet, der er dækket af denne vejledning, tilføje lidt inspiration til dine egne projekter.