Infovakken zijn tegenwoordig een veelgebruikt hulpmiddel voor websites die belangrijke informatie duidelijk en aantrekkelijk moeten delen. Als je de aandacht wilt vestigen op een bepaalde promotie, de aandacht van je kijkers wilt vestigen op belangrijke details en belangrijke mededelingen of je gebruikers wilt aanmoedigen tot vruchtbare CTA's, bieden infovakken een eenvoudige oplossing om je berichten te laten opvallen.
Infovakken splitsen belangrijke informatie niet alleen op in kleinere, gemakkelijk te lezen delen, maar spelen ook een belangrijke rol bij het begeleiden van de gebruikersnavigatie. Met de toevoeging van infovakken wordt het makkelijker voor je om je bezoekers door essentiële punten te leiden zonder ze te overweldigen en in een georganiseerd, schoon en vriendelijk formaat.
Als je hier bent om dit artikel te lezen, betekent dit dat je al bekend bent met het concept van infoboxen of dat je er voor het eerst over leert. Er kan echter nog steeds één vraag door je hoofd spoken en dat is hoe je een infobox maakt. Daarom hebben we een stap-voor-stap handleiding gemaakt om je door de basisbeginselen van het maken van infoboxen in WordPress te leiden. Hier geven we je twee verschillende benaderingen om je te helpen de meest geschikte optie te kiezen. Dus waarom wachten? Laten we er meteen mee beginnen.
Methode 1: De kolomblokken gebruiken
Het Kolomblok in de Gutenberg-editor is een eenvoudige manier om infovakken te maken als je dat zonder hulp van plugins wilt doen. Hiermee kun je basisinhoud op een gestructureerde manier rangschikken. Hier lees je hoe je een infobox kunt maken met deze aanpak:
Stap 1: Een kolomblok toevoegen aan de editor
Maak een nieuwe post of pagina in WordPress en open deze in de Gutenberg editor. Ga verder met het toevoegen van een Kolomblok door te klikken op de knop "+"-pictogram en selecteer vervolgens "Kolommen" uit de blokopties.
Kies nu een indeling met een enkele kolom of meerdere kolommen, afhankelijk van hoe je het infovak wilt weergeven. Voor het gemak van de beginner hebben we gekozen voor een enkele kolom om onze infobox te maken.
Stap 2: Verschillende blokken toevoegen om inhoud toe te voegen
Voeg vervolgens inhoud toe aan het kolomblok om een visueel onderscheidende infobox te maken. Klik op de "+"-pictogram om uw voorkeursblok toe te voegen. Dit leidt u op zijn beurt naar de Gutenberg-blokbibliotheek. We beginnen bijvoorbeeld met een afbeelding bovenaan onze infobox. Dus zoek naar de Afbeelding blok in de bibliotheek en selecteer het. Ga verder met het uploaden van je afbeelding vanuit de mediabibliotheek of upload deze vanaf je apparaat.
Zodra je je afbeelding hebt geüpload, kun je de uitlijning van je afbeelding en pas de maat ervan. Je kunt de afbeelding links, in het midden of rechts uitlijnen. Hier hebben we de afbeelding in het midden uitgelijnd, maar de grootte hetzelfde gehouden.
Nu hebben we een goede koptekst nodig om onze afbeelding te markeren. Om een Rubriek blok, begin met het selecteren van de afbeelding, waardoor de werkbalk wordt geopend, en selecteer van daaruit het bovenliggende blok.
Als je het bovenliggende blok hebt geselecteerd, wordt het + pictogram verschijnen. Klik dus op het +-pictogram en zoek naar de Rubriek blok en klik erop. Ga verder met het toevoegen van de teksten in het Kopblok en lijn ze uit zoals jij dat wilt.
Als u klaar bent, herhaalt u de vorige procedure voor het toevoegen van blokken. Hier hebben we een paragraaf blok en een toetsblok de een na de ander. Kies eerst de paragraaf blok en voeg de nodige tekst toe. Lijn deze teksten uit op de manier die jij nodig acht.
De volgende taak is knoppen. Zoek de Button-blokken in de bibliotheek, selecteer het blok en voeg teksten toe voor die knop.
Als je klaar bent, je knoppen uitlijnen zoals jij het wilt en dan links toevoegen naar je knop.
Stap 3: Het hele blok aanpassen
Met de aanpassingsopties kun je verschillende aspecten aanpassen voor een gepolijste look. Selecteer je volledige kolomsectie door op het kolompictogram op de werkbalk te klikken. Nu kun je beginnen met het aanpassen door de breedte van de kolom om ervoor te zorgen dat deze goed past binnen de lay-out van je pagina.
Ga vervolgens naar de Tabblad Stijlen. Van hieruit kunt u de kleur van de teksten, links en achtergronden; u kunt typografie en pas de afmetingen.
Als je verder naar beneden scrollt, vind je de instellingen om het volgende toe te voegen Afstand tussen blokken en Grens en Schaduwen.
We hebben de tekst en achtergrondkleur veranderd, de padding aangepast en wat randen en radius geïntroduceerd. Zodra de infobox is gepubliceerd, hebben we het eindresultaat.
Methode 2: De Tableberg-plugin gebruiken
De Tableberg plugin, die voornamelijk wordt gebruikt voor het maken van tabellen, kan ook worden gebruikt om infoboxen met een gestructureerd formaat te ontwerpen. Zo maak je een infobox met Tableberg:
Stap 1: Installeer en activeer de Tableberg-plugin
Ga naar je WordPress dashboard, navigeer naar Plugins > Nieuwe toevoegen, zoeken naar "Tafelbergen klik op Nu installeren. Klik na de installatie op Activeer om de plugin in te schakelen.
Stap 2: Een nieuwe tabel maken
Klik op de + pictogram van uw editor en zoek naar de Tafelberg plugin uit