Zoals we al herhaaldelijk hebben gezegd in veel van onze blogposts, Tafelberg is een veelzijdige plugin. Het is niet alleen een plugin voor het maken van tabellen; je kunt het ook gebruiken voor multifunctionele webdesignprojecten. Bijvoorbeeld voor feature boxes, call-to-action secties, infographics, stap-voor-stap processen en meer.
In deze tutorial laten we je zien hoe je processtappen kunt weergeven in WordPress, zodat je stapsgewijze gidsen kunt laten zien aan je bezoekers. Aan de slag!
- Stap 01: Voeg het Tableberg-blok toe aan de editor
- Stap 02: Achtergrondkleur instellen voor afzonderlijke rijen
- Stap 03: Vermeld de stapnummers in het proces
- Stap 04: Schrijf de staptitels en hun beschrijvingen
- Stap 05: Afbeeldingen toevoegen aan de respectievelijke cellen
- Stap 06: Uw contactgegevens toevoegen
- Stap 07: Pas de tabelrand aan
- Stap 08: Een voorbeeld van de processtappen
- Conclusie
Stap 01: Voeg het Tableberg-blok toe aan de editor
De Tableberg plugin voegt een blok toe met de naam Tafelberg aan de blokkenbibliotheek. Voeg het toe aan de editor door op de knop plus (+) pictogram.
Stel het aantal rijen en kolommen in dat je nodig hebt om het proces te laten zien. Voor deze tutorial stellen we 3*9 in voor kolommen en rijen.
De tabel is klaar. Vervolgens voegen we inhoud toe aan de rijen en kolommen om de processtappen te laten zien.
Stap 02: Achtergrondkleur instellen voor afzonderlijke rijen
Met Tableberg kun je de kleur van de rij afzonderlijk instellen. Om dit te doen, een rij selecteren en ga naar de tabblad stijlen. Klik vervolgens op [PRO] Rij Achtergrondkleur. Ik hoop dat je de rest kunt doen.
Je kunt zien dat we verschillende kleuren hebben ingesteld voor de rijen afzonderlijk. Omdat de kleuren en stilering van alle andere elementen afhankelijk zijn van de achtergrond, hebben we de kleuren van de rijen van tevoren ingesteld.
Stap 03: Vermeld de stapnummers in het proces
Maak een lijst met de stapnummers die je in het proces zult behandelen. Maak de tekst vetgedrukt, ze centraal uitlijnenstel een tekstkleuren hun omvang vergroten.
Stap 04: Schrijf de staptitels en hun beschrijvingen
Begin nu met het schrijven van de staptitels en beschrijvingen in elke kolom. Je kunt twee alineablokken gebruiken, één voor de titel en één voor de beschrijving. Stel vervolgens de tekstkleur in op wit.
Je kunt het formaat van de titeltekst iets groter maken dan dat van de beschrijvingstekst, zodat het gemakkelijk wordt om ze van elkaar te onderscheiden.
Stap 05: Afbeeldingen toevoegen aan de respectievelijke cellen
De laatste kolom is gereserveerd voor het toevoegen van afbeeldingen. Laten we afbeeldingen toevoegen aan de cellen van de kolom die overeenkomt met de tabelrijen.
Voeg dus de beeldblok door te klikken op de plus (+) pictogram naar de respectieve cel. Je kunt afbeeldingen uploaden vanaf de lokale schijf of je mediabibliotheek.
Je ziet dat we een afbeelding aan de cel hebben toegevoegd. Je kunt de afbeelding groter maken door het cirkelvormige pictogram te verslepen terwijl je het tegelijkertijd ingedrukt houdt.
Voltooi op dezelfde manier het toevoegen van afbeeldingen aan alle andere cellen van de laatste kolom en houd ze relevant voor de inhoud.
Stap 06: Uw contactgegevens toevoegen
Voeg op dezelfde manier contactinformatie toe in het blok met alinea's, zodat bezoekers en gebruikers je kunnen bereiken voor hulp.
Voeg nu de Gestileerde lijst blok naar de laatste rij van de tabel.
Selecteer een pictogram dat de website voorstelt. Schrijf het adres van je website naast het pictogram.
Stap 07: Pas de tabelrand aan
Met Tableberg kun je de binnenste en buitenste rand van de tabel verwijderen, kleuren en de breedte aanpassen. Door deze opties goed te configureren, kun je je tabel verder verfraaien.
Ga naar de Tabblad Stijlen. Scroll naar beneden op het tabblad en kom bij de Grensgedeelte. In de zelfstudie van vandaag hebben we de buitenste en kolomranden verwijderd, behalve de rijrand. We hebben de witte kleur en 1 px breedte ingesteld voor de rijranden.
Stap 08: Een voorbeeld van de processtappen
Ga naar de voorbeeldpagina. Kijk of je ontwerp perfect wordt weergegeven. We hebben zoveel mogelijk van de afbeelding weergegeven als op het onderstaande scherm te zien is.
Conclusie
Tableberg is een spannende en veelbelovende veelzijdige tabellen-bouwer plugin. Naast tabellen kun je met de plugin verschillende prachtige websecties maken. Je kunt bijvoorbeeld hoe functieboxen toevoegen in WordPress.
We zullen meer blogberichten plaatsen waarin we meer bijzondere dingen en ontwerpen laten zien die je met de plugin kunt maken. Blijf dus bij ons en blijf onze blogs verkennen om je kennis te vergroten.
