Knoppen met iconische lettertypen hebben veel toepassingen in de wereld van webdesign. Omdat iconische lettertypen helder blijven qua kleuren en ontwerp terwijl ze worden geschaald naar verschillende formaten, is het een goed idee om ze in knoppen te gebruiken. En het maken van een knop met iconische lettertypen op Divi is eigenlijk vrij eenvoudig met de lettertypen uit de bibliotheek " ElegantIcons". In deze tutorial laat ik je zien hoe je pictogramlettertypen kunt gebruiken met de Divi-knopmodule om een ​​enkele pictogramknop te maken.

Enkele van de hoogtepunten van deze tutorial zijn:

  • Hoe te gebruiken ElegantIcons om een ​​pictogram als knoptekst toe te voegen
  • Hoe u opvulling en randradius toevoegt om de knop eruit te laten zien als een perfect vierkant of cirkel
  • Het knoppictogram vervangen door een ander pictogram tijdens het zweven
  • Een knoppictogram plaatsen om een ​​afbeelding te bedekken
  • en meer ...

overzicht

Hier is een voorbeeld van wat eraan komt ...

pictogram lettertype knoppen

verander de grootte van een diviknop image.gif

demonstratieknop divi list delements.png

Wat heb je nodig?

Voor deze tutorial gebruik ik het volgende:

  • Divi-thema (natuurlijk)
  • Stijlvolle lettertypepictogrammen, een zelfstudie over Elegant thema is veel nauwkeuriger. Zodra je het zip-bestand van de blogpost hebt gedownload, slepen we het naar het eleganticons.ttf-lettertypebestand om als een aangepast lettertype voor onze knoppenmodule te gebruiken.
  • De startpagina van Bed & Breakfast (gratis verkrijgbaar bij Divi Builder)

Laten we beginnen!

Voeg het lettertype Elegante pictogrammen toe aan uw knopmodule

Voeg een knopmodule toe

Maak om te beginnen een nieuwe pagina en implementeer de visuele builder. Kies "Build from Scratch" en voeg, nadat de visuele builder is geïmplementeerd, een kolomrij toe aan de sectie en voeg vervolgens een knopmodule toe aan de rij.

voeg een knop toe divi builder.jpg

Sleep Stijlvol pictogramlettertype

Om het kleuren spel te krijgen ElegantFontsu kunt downloaden dit letterpakket via deze link. Pak het uit inhoud uit het zipbestand en zoek de elegante pictogramlettertypebestanden door naar elegant_font > HTML CSS > class te navigeren. Sleep vervolgens het bestand “ElegantIcons.ttf” naar uw computer en zet het neer in de visuele bouwer.

pak het zipbestand uit divi.jpg

Dit zal de modus Lettertype automatisch downloaden openen. Klik gewoon op de downloadknop om het lettertype naar Divi Builder te downloaden.

zet online divi.jpg

Nu heb je toegang tot het stijlvolle pictogramlettertype bij het aanpassen van een mod-lettertype in de visuele builder.

Ga naar de instellingen van de knopmodule en werk het lettertype van de knop bij met het nieuwe Elegant Icon-lettertype dat je zojuist hebt gedownload. Het verschijnt in de lijst met pictogrammen onder "Aangepaste lettertypen".

knop lettertype divi.jpg

U merkt misschien dat uw knoptekst is veranderd in een aantal pictogrammen. Inderdaad, elk teken dat in het tekstinvoergebied van de knop wordt ingevoerd, heeft nu een pictogram dat overeenkomt met de letter / het teken dat momenteel wordt gebruikt.

gebruik van icon button.jpg

Omdat we maar één pictogram voor onze knop nodig hebben, kunt u elk teken op het toetsenbord selecteren om het pictogram te genereren dat aan dat teken is gekoppeld. Voer bijvoorbeeld het cijfer 5 in voor uw knoptekst om een ​​rechter chevronpijl te krijgen.

pictogramknop divi 5.jpg

Exchange-knoppictogrammen bij zweven

Zoals u weet, bevat de knopmodule de optie om pictogrammen toe te voegen tijdens het zweven. We kunnen deze functie gebruiken om het pictogramlettertype te vervangen door het hover-pictogram voor een mooi hover-effect. Het enige dat we hoeven te doen, is de knopinstellingen als volgt wijzigen:

Knoptekstgrootte: 30px Knoppictogram: zie screenshot (dit is het pictogram dat het lettertype-pictogram dat voor de knop wordt gebruikt zal vervangen) Pictogram Knopkleur: # 0c71c3 (die moet overeenkomen met de kleur die wordt gebruikt voor de knoptekst ) Plaatsing van knoppictogram: Tekstkleur linkerknop: rgba (255,255,255,0) (dit is volledig transparant om het lettertype van het pictogram van de zweefknop te verbergen). Aangepaste vulling: 1e links, 1e rechts (deze vulling vervangt het uitvouwen tijdens het zweven)

aanpassingsknop divi.jpg

Nu hoeven we alleen nog maar de marge voor het frontelement in de aangepaste css te vervangen. Ga naar het tabblad Geavanceerd en voer de volgende CSS-code in het voorste vak in:

margin-left0 !important;

voeg een knopmarge toe diiv.png

Nu wordt uw knoppictogram vervangen door het pictogram waarmee u over de muis beweegt.

demonstratieknop vervangen op hover.gif

Creatieve pictogramknoppen met cirkel geschaald met knoptekstgrootte

Cirkelvormige knoppen werken uitstekend voor knoppen met één pictogram. En als u de interne werking van de afstand tussen knoppenmodule begrijpt, kunt u perfect ronde knoppen maken die aangepast zijn aan de grootte van de knoptekst.

De truc is om je knop uit elkaar te houden met de lengte-eenheid "em". Deze lengte-eenheid is relatief aan de grootte van de tekst op uw knop. Dus als de tekstgrootte van de knop 30px is, is 1em ook 30px (2em wordt 60px enzovoort ...). Dit wetende, moeten we er alleen voor zorgen dat onze opvulling rond onze knop aan alle vier de zijden hetzelfde is. Maar wat u misschien niet hebt overwogen, is dat de tekstregelhoogte van de knop standaard 4em is. Dit betekent dat we hiermee rekening moeten houden wanneer we onze bovenste en onderste opvulwaarden optellen.

Voor degenen onder u die de wiskunde willen weten achter de opvulwaarden die nodig zijn om cirkelknoppen te maken, hier is:

Stel voor linker en rechter vulling beide in op 1em. Dit betekent dat de totale breedte van uw knop 90px (of 3em) zal zijn omdat ...

30px padding links + 30px voor lettertype-pictogram + 30px padding rechts = 90px totaal

De hoogte van de knoptekstregel is 1.7em, wat overeenkomt met 170% van de knoptekstgrootte (30px), wat 51px is.

Stel voor opvulling boven en onder beide in op 0,65em. 0.65em is het equivalent van 65% van de tekstgrootte van de knop (30px), wat overeenkomt met 19.5px.

Dus…

19.5px bovenste vulling + 51px lijnhoogte + 19.5px onderste vulling = 90px totaal

Dit betekent dat wanneer de knoptekst is ingesteld op 30px, de totale grootte van de knop 90px bij 90px (een perfect vierkant) zal zijn. In feite kun je het zo zien. Ongeacht de tekstgrootte van de knop is de totale knopgrootte 3 keer de waarde. Dus, 40px knoptekst zal een 120px bij 120px knop creëren, enz.

Op dit moment heeft de knop de juiste afmetingen, maar hij is nog steeds vierkant. Het enige wat we hoeven te doen is een randstraal van 50% toevoegen om de vierkante knop te veranderen in een perfecte cirkelknop.

Dit is wat je nodig hebt om je knop in een cirkelknop te veranderen:

Knop Randstraal: 50%
Aangepaste bekleding: 0.65em Top, 0.65em Bottom, 1em Straight, 1em Left

wijzig een button.png

Onthoud dat u de tekstgrootte van de knop kunt aanpassen en dat de knop in een cirkel blijft, net als de vulling van de tekstgrootte.

pas de grootte van de button.gif aan

Knoppen toevoegen op Divi

Divi maakt het gemakkelijk om unieke pictogramknoppen toe te voegen en aan te passen aan het ontwerp van elke vooraf gedefinieerde lay-out.

Voor dit voorbeeld laat ik u zien hoe u een enkele pictogramknop toevoegt aan de lay-out van de Bed & Breakfast-startpagina.

Om de lay-out aan uw pagina toe te voegen, opent u het instellingenmenu door op het paarse pictogram onder aan de pagina te klikken (zorg ervoor dat de visuele generator is ingeschakeld). Klik vervolgens op het pictogram Laden uit bibliotheek. Selecteer de indeling van de Bed & Breakfast-homepagina en klik op de knop "Gebruik deze indeling" om de indeling op de pagina te implementeren.

selecteer een lay-out divi.png

Een pictogramknop aan een afbeelding toevoegen

Stel dat u een kleine pictogramknop wilt toevoegen om de hoek van een afbeelding te bedekken met een aanvullende CTA die betrekking heeft op een bepaald product of een bepaalde dienst. Het enige dat u hoeft te doen, is een knopmodule onder de afbeelding toevoegen en deze aanpassen om het lettertype van het pictogram op te nemen en het pictogram de afbeelding te laten overlappen met een aangepaste spatiëring.

Zoek het gedeelte "Over ons" op de startpagina. Voeg vervolgens een knopmodule toe direct onder een van de afbeeldingen die worden gebruikt om de "Double Room" te presenteren (de eerste in de eerste kolom van de rij van drie kolommen).

divi.png-knop

Open vervolgens de knopinstellingen en plaats een hoofdletter "P" in het tekstvak van de knop. Dit verandert in ons pictogram zodra je de geweldige achtergrondsets hebt geselecteerd, zoals het lettertype van de knop.

divi.png knop tekst

Om snel te beginnen met het matchen van het knopontwerp met de lay-out, slaat u uw knopinstellingen op en zoekt u de knop "Nu boeken" bovenaan de lay-out. Open knopinstellingen en kopieer knopstijlen door met de rechtermuisknop op de knopopties te klikken om de titel te wijzigen en de optie 'Knopstijlen kopiëren' uit de lijst te selecteren.

Klik nu met de rechtermuisknop op de module die u onder de afbeelding hebt toegevoegd en selecteer "Knopstijl plakken".

plak de style.jpg module

Werk vervolgens de knopinstellingen als volgt bij:

Lettertype-knop: geweldig lettertype
lettertypeknop Randbreedte: 0px
Knoppictogram weergeven: NEE

Voeg vervolgens onze slimme aangepaste vulling toe zodat de knop een perfect vierkant is:

Aangepaste opvulling: 0.65em Top, 0.65em Bottom, 1em Left, 1em Right

pictogram lettertype knoppen

Om de knop zo te plaatsen dat deze de rechter benedenhoek van de afbeelding bedekt, moet u eerst de ondermarge van de bovenstaande afbeeldingsmodule verwijderen. Open de instellingen van de Image Image Module direct boven de knop en stel de ondermarge in op 0px.

aanpassing van de button.png

Nu moeten we de knop over de afbeelding slepen met een aangepaste negatieve margewaarde die gelijk is aan de hoogte van de knop. Om dit te doen, moeten we de hoogte van onze knop bepalen.

Zoals eerder in dit artikel vermeld, kunnen we met de aangepaste vulling de exacte grootte van onze knop weten op basis van de huidige grootte van de knoptekst. Omdat de tekstgrootte van de knop 20px is, weten we dat onze knophoogte 3em is (3 keer de tekstgrootte van de knop), wat 60px is. Daarom moeten we als volgt een aangepaste marge voor onze knop instellen:

Aangepaste marge: -60px Top

En dan kunnen we onze knop aan de rechterkant plaatsen door de uitlijning van de knop aan de rechterkant aan te passen.

verander de uitlijning van een divi.png-knop

Nu we een werkend ontwerp hebben voor onze afbeelding en onze knop. Het enige wat we hoeven te doen is dezelfde knop aan alle afbeeldingen in de sectie toe te voegen.

Omdat we de ondermarge van de afbeelding hebben verwijderd, kunnen we deze wijziging eenvoudig toepassen op alle afbeeldingen in de sectie met de optie Stijlen uitbreiden. Klik met de rechtermuisknop op de afbeelding en selecteer "Afbeeldingsstijlen uitbreiden".

extend image style.jpg

Selecteer in het dialoogvenster Stijlen uitbreiden "Deze sectie" voor de optie Over en klik op de knop Uitbreiden. Nu hebben alle afbeeldingen een ondermarge van 0px.

De laatste stap is simpelweg het kopiëren en plakken van de knopmodules onder elke afbeelding.

Hier is het definitieve ontwerp.

laatste ontwerpknop divi.png

En omdat we de juiste afstandstechnieken hebben gebruikt, blijft de knop ook op de mobiele telefoon ...

voorbeeldknop op mobile.png

Pictogrammen beschikbaar via de knopmodule

Aangezien de knoptekst van de knopmodule beperkt is tot de tekens die beschikbaar zijn op het toetsenbord, moet u deze toetsen verkennen om de beschikbare pictogrammen te vinden die bij elke toets horen. Een eenvoudige manier om dit te doen, is door een knopmodule te maken met het knoplettertype ingesteld op een elegant lettertype en de tekens in het tekstvak van de knop te typen.

Hier is een screenshot van de karakters met hun corresponderende lettertypepictogram:

lijst met beschikbare pictogrammen divi.png

Als u deze lijst enigszins uitputtend vindt, kunt u altijd een tekstmodule gebruiken om pictogramkoppelingen te maken met behulp van de vermelde Unic-codes. hier .

Final gedachten

Het gebruik van elegante pictogrammen met Divi's Button Module is een handige manier om unieke knoppen voor uw Site web. Dit opent de deur naar creativiteit met module-instellingen om je knop aan te passen met unieke tekststijlen, zweefeffecten en meer. Ik hou vooral van de aangepaste knopafstandswaarden die ervoor zorgen dat de knoppen de vorm aannemen van een perfect vierkant of cirkel.

Er zijn talloze toepassingen voor pictogramknoppen. Hopelijk voegt het gebruiksvoorbeeld in deze tutorial wat inspiratie toe aan je eigen projecten.