Een icoonbox bestaat meestal uit een kleine afbeelding in combinatie met een kort stukje tekst. Met icoonvakken kun je zaken als belangrijke functies, diensten, voordelen en aanbiedingen op een visueel aantrekkelijke en zinvolle manier onder de aandacht brengen.
Je kunt ook pictogramvakken gebruiken om getuigenissen, oproepen tot actie, processtappen en meer te laten zien. Tafelberg is een veelzijdige plugin voor het maken van tabellen. Met de plugin kun je eenvoudig prachtige en aantrekkelijke icoonboxen maken.
In de volgende delen van dit artikel leggen we je uit hoe je icoonvakjes kunt toevoegen in WordPress met de plugin. Download de plugin door op de onderstaande links te klikken.
Maak prachtige tafels
Met blok-editor
Stap 01: Voeg het Tableberg-blok toe aan de editor
Voeg de Tafelberg blok naar uw editor zoals u dat met elk Gutenberg-blok zou doen.
Stel de aantal rijen en kolommen afhankelijk van het aantal icoonvakjes dat je wilt maken.
In deze tutorial maken we bijvoorbeeld drie icon boxes. We stellen dus 3 kolommen en 1 rij in.
Je kunt zien hoeveel vakjes er zijn gemaakt. Vervolgens voegen we inhoud toe om icoonvakjes te maken.
Stap 02: Een pictogram toevoegen aan een vakje/cel
Met Tableber kun je verschillende elementen aan de cellen toevoegen waarmee je de tabelcellen super aantrekkelijk kunt maken. We leggen ze uit in deze sectie.
Een achtergrondkleur toevoegen aan de cellen
Selecteer de volledige tabel door door te klikken op de Tableberg pictogram op de werkbalk. Ga vervolgens naar de Tabblad Stijlen. Onder het tabblad zie je de kleuropties. Stel met de geschikte optie een achtergrond in voor de tabelcellen.
Opmerking: Je moet de achtergrondkleur aan het begin instellen, omdat alle elementen van de tabelbox hierop worden gebaseerd.
Een pictogram aan een kader/cel toevoegen
Je kunt blokken toevoegen in de tabelcellen zoals de Gutenberg blokeditor. Klik op het pluspictogram (+) op een cel. Zoek en voeg de Pictogrammenblok naar de cel.
Een pictogram wijzigen en selecteren
Ga naar de Tabblad Instellingen op de rechterzijbalk terwijl het blok Pictogram geselecteerd blijft. Onder dit tabblad krijg je opties om het pictogram groter maken, rotatie instellenen het pictogram wijzigen.
U kunt een pictogram selecteren uit de bestaande pictogrammenbibliotheek of er een importeren van uw lokale schijf.
Het pictogram een kleur geven
Ga naar de Tabblad Stijlen. Stel de Kleur pictogram en de Achtergrondkleur.
Inderdaad, de lay-out van de achtergrondkleur ziet er niet goed uit, toch? We hebben het voor je geregeld.
Scroll iets naar beneden onder het tabblad Stijlen. Je ziet de opvulling, marge, en radius opties.
Je kunt een opmaak maken voor de achtergrondkleur door geschikte waarden te plaatsen, zoals in de onderstaande afbeelding.
Stap 03: Tekst toevoegen aan de cel/kader
Geen enkel icoontje heeft zin zonder tekstinhoud. Alinea toevoegen onder het pictogram op de cel.
Een titel toevoegen over de icoonbox. Volgende, uitlijnen centraal, selecteer een kleuren een grootte instellen voor de tekst.
Voeg op dezelfde manier een beschrijving van het pictogramvak toe met de optie Paragraaf blok.
Stap 04: Voeg een knop toe aan de cel/kader
Je kunt gebruikers naar een andere pagina, documentatie of bron leiden door een knop toe te voegen. Voeg de Knopblok naar de cel.
Na het toevoegen van de knop, een CTA-kopie toevoegenveranderen tekst en achtergrondkleuren de kopieergrootte vergroten.
Stap 05: Spaties tussen de blokken toevoegen
De cel ziet er overvol uit, toch? Dat komt omdat er niet genoeg ruimte is tussen de blokken in de cel. Maar je kunt dit probleem eenvoudig oplossen.
Selecteer de hele cel. Ga naar de Tabblad Stijlen. Scroll hieronder een stukje naar beneden.
Je krijgt Cel opvulling en Afstand tussen blokken opties. Met deze opties kunt u de nodige spaties tussen deze blokken maken.
Zo, je doos met één pictogram is klaar.
Stap 06: Dupliceer het pictogrammenvakje
U kunt handmatig andere pictogramvakken maken op dezelfde manier, of u kunt het vak dupliceren. Tableberg heeft een interessante functie voor het dupliceren van rijen en kolommen.
Klik op de [Pro] Tabel bewerken optie op de werkbalk. De rest kun je zelf doen. Voor een gedetailleerde handleiding, bekijk deze post op hoe serviceboxen toevoegen in WordPress. We hebben uitgelegd hoe je deze functie kunt gebruiken in het volgende deel van deze post.
Je kunt in de onderstaande afbeelding zien dat we het vak met pictogrammen hebben gedupliceerd en de inhoud ervan hebben gewijzigd.
Stap 07: Spaties tussen de cellen toevoegen
Ga naar de Tabblad Stijlen. Scroll naar beneden naar Afstand tussen cellen. Met deze optie kun je ruimte tussen de cellen toevoegen, zoals in de afbeelding hieronder.
Stap 08: Verwijder de celrand
Op het tabblad Stijlen zie je de Table Border en Inner Border opties. Stel de grenswaarde op 0 op beide plaatsen. Hierdoor worden de randen van de cellen verwijderd.
Zo kun je een pictogrammenbox maken in WordPress.
Afsluiten!
Ik hoop dat je van deze handleiding hebt genoten. Als je de stappen in deze handleiding volgt, kun je gemakkelijk pictogramvakken toevoegen en aanpassen zodat ze bij je merk passen en belangrijke informatie effectief markeren.
Neem voordat je weggaat nog een paar minuten de tijd om te leren hoe tabellen opmaken in WordPress.
