Hoe je verbluffende infoboxen maakt in WordPress

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 de bibliotheek. Zodra je het hebt gevonden, klik je erop. 

Nu moet je het aantal kolommen en rijen voor je infobox selecteren. Hier maken we een box met één kolom; daarom hebben we geselecteerd 1 rij en 1 kolom

Stap 3: Inhoud aan de tabel toevoegen

Net als bij de eerste methode beginnen we met het toevoegen van afbeeldingen in onze infobox. Klik op de + pictogramzoek naar de Beeldbloken voeg het toe aan je berichten. Upload de afbeelding vervolgens vanaf je apparaat of mediabibliotheek. 

Nogmaals, als je aanpassingen nodig hebt in de uitlijning en grootte, doe dan hetzelfde als in de afbeelding hieronder. 

Vervolgens plaatsen we de tekst achter de afbeelding door een Paragraaf blok. Klik op het + teken, zoek het alineablok en voeg het toe. Als je denkt dat je de uitlijning moet veranderen, doe dat dan. 

De laatste taak is het toevoegen van knoppen. Selecteer de ouderblokvind de + pictogramzoeken naar knoppenen voeg het toe aan de editor. 

Zodra je dit hebt gedaan, tekst toevoegen naar uw knoppen, controleer dan de uitlijningen van je knop en links toevoegen aan. 

Stap 4: Pas uw tabel aan

Na het instellen van de Tableberg box met je inhoud, kun je verder gaan met het aanpassen en stylen van de box als geheel. Maar vergeet niet dat je ook elk afzonderlijk blok dat we hier hebben gebruikt, kunt aanpassen. Voor nu houden we het bij de hele tabel. 

Klik eerst op de Tableberg pictogram in de werkbalk om het hele vak te selecteren. Schuif vervolgens naar de Tabblad Instellingen en pas de breedte van het vak zodat het past bij de opmaak van je pagina of bericht. 

Ga vervolgens naar de Tabblad Stijlen om de doos aan te passen'.achtergrondkleur, opvulling, marge en spatie. 

Als je verder naar beneden scrollt, vind je meer opties om de tabel, binnen- en kolomrand, globale letterkleur en meer. 

Zo maak je een perfecte infobox. Als je meer dan één infobox nodig hebt, pas je gewoon het aantal kolommen en rijen aan en volg je dezelfde procedure.

Conclusie

En daar heb je het, je Tableberg infobox gestyled tot in de perfectie. Met slechts een paar aanpassingen, kan uw inhoud veranderen van gewoon naar in het oog springende, trekken de aandacht precies waar het telt. De aanpassingsmogelijkheden zijn eindeloos, dus laat je fantasie de vrije loop. Experimenteer met kleuren, speel met randen en voeg afwerkingen toe die van elke box een visueel genot maken. Laat je infovakken niet alleen informatie overbrengen, maar ook een vleugje flair toevoegen aan je hele website.



Het Tableberg-team