Mensen voelen zich van nature aangetrokken tot het uiterlijk van een Site web van WordPress, hoezeer ze zich ook aangetrokken voelen tot de geschreven inhoud die u deelt. In feite, volgens Jeff Bullas ", Artikelen met afbeeldingen hebben 94% meer weergaven dan artikelen zonder afbeeldingen.

Dat is een enorme toename in paginaweergaves als je het mij vraagt.

En wat is de reden hiervoor?

Voeg gewoon een paar artikelrelevante afbeeldingen van hoge kwaliteit toe aan uw inhoud.

Maar hoe zit het met de foto's op je? Site web die verder gaan dan screenshots en foto's? Hoe zit het met afbeeldingen die niet alleen de aandacht trekken, maar ook een nuttige functie hebben?

Ja, ik heb het over pictogrammen. U kent die kleine afbeeldingen die op websites worden gevonden om het delen op sociale media aan te moedigen, om contactpagina's van bedrijfseigenaren te illustreren, om maar een paar gevallen te noemen bruikbaar.

Aangezien het idee van deze site is gehaald, is de bezoekers werden niet alleen aangetrokken door afbeeldingen op websites, maar waren ook geneigd om ermee te communiceren, mensen begonnen ze toe te voegen aan hun websites.

Maar naarmate de technologie vordert, beginnen traditionele afbeeldingspictogrammen zoals altijd te haperen als afbeeldingsoplossing voor websites. Dit komt doordat ze de pagina's veel zwaarder en dus langzamer maken, maar vooral deze oplossing was niet altijd geschikt voor gsm's.

Maar er is een oplossing: pictogramlettertypen.

Vandaag ga ik je vertellen wat pictogramlettertypen zijn en de voordelen van het gebruik ervan op je WordPress-site. Daarnaast laat ik je zien hoe je pictogramlettertypen aan je WordPress-site kunt toevoegen met de populaire plug-in " Beter lettertype geweldig .

Laten we beginnen.

Wat zijn pictogramlettertypen en waarom zou u ze gebruiken?

Pictogramlettertypen zijn precies wat ze zeggen: lettertypen die volledig in pictogrammen zijn ingebouwd. Pictogramlettertypen of " make-icoon "Kan worden beschreven als een lettertype dat alleen tekens of symbolen weergeeft, niet de letters en cijfers waaraan traditionele lettertypen en tekst zijn gekoppeld.

Wordpress pictogrammen lettertypePictogramlettertypen worden gebruikt om veelgebruikte symbolen op uw site weer te geven. Socialmediaknoppen, uw winkelwagentje, downloadknoppen en navigatieknoppen zijn bijvoorbeeld voorbeelden van pictogrammen die kleine, interactieve afbeeldingen op uw site weergeven.

Fonticone op een website

Waarom pictogramlettertypen gebruiken?

Afbeeldingspictogrammen hebben in het verleden goed gewerkt voor veel site-eigenaren. Naarmate de navigatieregels, bruikbaarheid en ontwerp echter zijn geëvolueerd, zijn pictogramlettertypen de beste oplossing geworden voor het weergeven van interactieve afbeeldingen op een computer. website.

Hier volgt een overzicht van enkele dwingende redenen waarom pictogramlettertypen de beste keuze zijn:

  • Gemakkelijk uitbreidbaar zonder kwaliteitsverlies
  • Aanpasbaar qua kleur en tint
  • 100% responsieve
  • Werkt als CSS-afbeeldingsprites, maar gedraagt ​​zich als tekst
  • Gebruiksvriendelijk
  • compatibele browsers
  • Pas dekking, rotatie en meer aan
  • Kleiner bestandsgrootte
  • Geef de snelheid of prestaties van uw website niet op

Zoals u kunt zien, zijn er verschillende redenen waarom u een pictogramlettertype op uw website zou willen gebruiken in plaats van een afbeeldingspictogram.

Lettertypepictogrammen op uw site installeren met behulp van een plug-in

Beter lettertype Awesome is een WordPress Plugin freeware waarmee u automatisch de nieuwste versie van Font Awesome kunt integreren in uw WordPress-project. Bovendien wordt het geleverd met CSS, shortcodes en TinyMCE shortcode-generator.

Deze plug-in heeft verschillende handige functies voor site-eigenaren:

  • Routine-update van de nieuwste versie
  • Mogelijkheid om te schakelen tussen versies van Font Awesome zonder de korte codes te wijzigen
  • Ondersteuning voor andere populaire plug-ins voor lettertypen, inclusief hun shortcodes
  • Uitgegeven door jsDelivr CDN

1 Stap: Beter lettertype installeren en activeren Awesome

Om te beginnen, installeert en activeert u de plug-in "Better Font Awesome" via uw WordPress-dashboard, net zoals u zou doen met elke andere plug-in.

Navigeer eerst naar ' Plug-ins> Nieuw toevoegen En zoek naar " Beter lettertype geweldig .

Beter lettertype geweldige plug-in installeren en activeren

Selecteer vervolgens ' Installeer nu Â»En klik op« activeren .

Na activering voegt de plug-in een link toeBeter lettertype geweldigOnder het menu Instellingen van uw WordPress-dashboard.

Beter lettertype geweldige plug-in nieuw menu-item

Stap 2: Plugininstellingen configureren

De plug-in configureren « Beter lettertype geweldig ", Begin door op het menu-item te klikken" Beter lettertype geweldig Onder Instellingen. Zodra u dat doet, ziet u een scherm als dit:

Betere configuratie-instellingen voor geweldige plug-insHier kunt u het volgende doen:

  • Versie: Selecteer de versie van "Better Font Awesome" die u wilt gebruiken.
  • Gebruik Minified CSS: Vink dit vakje aan als u de verkleinde versie van CSS wilt gebruiken.
  • Verwijder het bestaande afdruklettertype: selecteer dit vak om te proberen gecodeerde fragmenten en shortcodes te verwijderen die zijn toegevoegd door andere plug-ins en thema's.
  • Verberg admin beoordelingen: Verberg de standaard beheerderswaarschuwingen die verschijnen wanneer API- en CDN-fouten optreden.

Naast het minimale aantal Better Font Awesome-opties, is er een kleine "Usage" -sectie waarin wordt uitgelegd hoe u pictogrammen aan uw site kunt toevoegen.

Met behulp van de betere plug-in voor lettertypen

Stap 3: pictogrammen aan uw website toevoegen

Er zijn drie eenvoudige manieren om pictogrammen aan uw website toe te voegen met "Better Font Awesome" - via shortcode, HTML of TinyMCE.

# 1. Pictogrammen toevoegen met behulp van shortcode

Om pictogrammen aan uw website toe te voegen met een shortcode, gaat u eerst naar de " Font Awesome Voor een volledige lijst met beschikbare pictogrammen die kunnen worden gebruikt.

Hier kunt u het gewenste pictogram zoeken. Als u bijvoorbeeld een "e-mail" -pictogram wilt, zoekt u gewoon naar dat trefwoord en selecteert u het pictogram dat u wilt gebruiken door erop te klikken.

Zoek naar een pictogram op fontawesomeNadat u op het pictogram heeft geklikt dat u wilt toevoegen, ziet u een scherm met de afbeelding van het pictogram met zijn verschillende formaten en een klein codeblok:

Lettertype-pictogram met al zijn formatenKopieer het codeblok en plak het ergens op uw website met behulp van het tabblad "Teksteditor". Zo ziet de editor eruit op uw website:

Code-editor met pictogrammen op wordpressCode-editor met pictogrammen op wordpressUiteindelijk is hier wat de bezoekers zien wanneer ze uw site bezoeken:

Wordpress pictogram poster resultaat
# 2. Pictogrammen toevoegen met HTML-code

Zoals we zagen in de sectie ' Gebruik U heeft de mogelijkheid om HTML-code te gebruiken om pictogrammen op uw website in te voegen. Ontwikkelaars van plug-ins houden er echter rekening mee dat het gebruik van HTML versiespecifieke voorvoegsels vereist.

Daarom raden ze je aan om in plaats daarvan shortcodes te gebruiken. Als u echter HTML-code wilt gebruiken, heeft Font Awesome nuttige informatie hier.

# 3. Pictogrammen toevoegen met TinyMCE

Dit is waarschijnlijk de gemakkelijkste manier om pictogrammen aan uw site toe te voegen. Klik in de modus "Visuele editor" op het pictogram Invoegen. Van daaruit kunt u door de beschikbare pictogramopties bladeren of uw resultaten verfijnen met de zoekfunctie.

Wordpress visuele editor pictogram zoekknop

Zodra u het gewenste pictogram heeft gevonden, klikt u erop. De shortcode-generator voert automatisch de vereiste informatie in uw bericht of pagina in.

Als u wilt leren hoe u de pictogrammen op uw site kunt aanpassen, raadpleegt u de voorbeelden van ' Font Awesome .