Hoe Feature Boxes met pictogrammen in WordPress toevoegen

4 min


114

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

all rights reserved

DeLaatbusiness

Hoe Feature Boxes met pictogrammen in WordPress toevoegen

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.

Functievakken toevoegen in WordPress met pictogrammen

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:

Voorbeeld van feature-boxes op de startpagina van een WordPress-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.

CSS-klasse toevoegen voor uw kolommen

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.

Geavanceerde kolommen en svg pictogramknoppen in de berichteditor

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.

Kolommen met feature boxes maken

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:

Pictogrammen toevoegen aan kenmerkvakken in WordPress

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.

Functiedozen met kleine pictogrammen en geen styling

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 .

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

span.wp-svg-rocket.rocket {

font-size:100px;

}

 

span.wp-svg-cloud.cloud {

font-size:100px;

}

span.wp-svg-headphones.headphones {

font-size:100px;

}

.mycolumns {

border:1px solid #eee;

min-height:250px;

padding-top:20px !important;

}

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

voorzien van vakken met de juiste vormgeving en grote pictogrammen

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.


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format