Hoe Feature Boxes met pictogrammen in WordPress toevoegen

Laat, E.W.M. de (Erwin)

all rights reserved

DeLaatbusiness

Hoe Feature Boxes met pictogrammen in WordPress toevoegen

Wilt u een feature box met prachtige pictogrammen toevoegen op de startpagina van uw WordPress-site? Deze kenmerkende vakken tonen belangrijke verkoopargumenten van uw producten en diensten. Het is een zeer boeiende techniek gebleken bij het presenteren van functies aan nieuwe klanten. In dit artikel laten we u zien hoe u eenvoudig featureboxen kunt toevoegen met pictogrammen op uw WordPress-site.

Wat is kenmerkbox met pictogrammen?

De meeste mensen die websites bezoeken, lezen ze niet echt. Als mensen worden we professionele scanners.

Dit betekent dat u als eigenaar van een bedrijf belangrijke informatie moet presenteren in een gemakkelijk scanbare en zeer boeiende indeling.

Daarom hebben de meeste populaire zakelijke websites meestal een grote afbeelding of een schuifregelaar bovenaan met een call-to-action-knop.

Net daaronder kunt u een functiekast gebruiken waarmee u de belangrijke kenmerken van uw product of dienst kunt laten zien. Elke feature box kan zijn eigen call-to-action hebben, waardoor gebruikers meer te weten kunnen komen.

Hier is een voorbeeld van onze OptinMonster- website:

Video uitleg

Abonneer je op WPBeginner

Als je de video niet leuk vindt of meer instructies nodig hebt, ga dan door met lezen.

Functieboxen toevoegen met pictogrammen op uw WordPress-homepage

Het eerste wat u hoeft te doen is de Advanced WP Columns- plug-in installeren en activeren . Na activering moet je naar Instellingen »Geavanceerde WP-kolommen gaan om de plug-in te configureren.

Scrol gewoon omlaag naar de optie ‘ Kolomklasse ‘ en voer mijn kolommenernaast in. Vergeet niet op de knop Wijzigingen opslaan te klikken om uw instellingen op te slaan.

Vervolgens hebt u een plug-in nodig om prachtige SVG-pictogrammen in uw feature-boxes in te voegen. Installeer en activeer de plug-in WP SVG-pictogrammen .

U bent nu klaar om uw feature-boxes te maken.

Begin met het bewerken van de pagina waar u de feature-boxes wilt toevoegen.

U zult twee nieuwe knoppen opmerken op het berichtbewerkingsscherm. De eerste is de knop Pictogram toevoegen net boven de editor. De tweede knop bevindt zich als het laatste item in het visuele bewerkingsmenu.

Als uw visuele editor slechts één rij knoppen toont, moet u op de werkbalkknop van de schakelknop klikken om deze uit te vouwen.

Eerst moet u klikken op de knop Advanced WP Columns. Er verschijnt een pop-up waarin u op Leeg moet klikken en vervolgens het aantal kolommen wilt selecteren dat u wilt toevoegen.

Hierna moet u op elke kolom klikken om tekst toe te voegen. Als u nu geen tekst toevoegt, is het moeilijk om de kolommen in de berichteditor te zien. Als je klaar bent, klik je onderaan op de knop Kolommen toevoegen.

Je ziet nu de kolommen in je berichteditor. De volgende stap is het toevoegen van pictogrammen boven de tekst.

Ga met je muis naar het begin van het tekstgedeelte in de eerste kolom en klik op de knop Enter. Hiermee wordt de tekst naar beneden verplaatst en krijgt u ruimte om uw pictogrammen in te voegen.

Nu moet je klikken op de pictogramknop Toevoegen, die een leuke pop-up als deze zal weergeven:

Van daaruit kunt u het pictogram dat u wilt gebruiken selecteren door erop te klikken. Vervolgens moet u op de knop Bereik klikken, zodat uw pictogram zich in het <span> -element bevindt.

Klik ten slotte op de knop Invoegen. Je ziet nu de shortcode voor het SVG-pictogram in je berichteditor. Afhankelijk van de naam van het pictogram dat je hebt geselecteerd, ziet het er ongeveer zo uit:

[wp-svg-icons icon=”rocket” wrap=”span”]

Herhaal het proces om ook pictogrammen in andere feature-boxes toe te voegen.

Als u klaar bent, klikt u op de knop Bijwerken om uw pagina op te slaan.

U bent bijna klaar, maar als u een voorbeeld van uw pagina bekijkt, zult u merken dat pictogrammen te klein zijn en uw kenmerkende vakjes nauwelijks merkbaar zijn.

U moet een beetje CSS toevoegen om dit probleem op te lossen. Voeg dit CSS-fragment toe aan de stylesheet van uw thema of onderliggende thema .

Vergeet niet om de CSS aan te passen zodat deze overeenkomt met de namen van de pictogrammen die u gebruikt.

We hopen dat dit artikel je heeft geholpen om een ​​mooi vak met kenmerken aan je startpagina toe te voegen. Wellicht wilt u ook dat onze gids over 5 beste WordPress-paginabuilders sleept en neerzet, omdat veel van die paginabouwers deze feature-boxfunctie hebben ingebouwd.