De presentatie van je prijstabellen is belangrijk om klanten te beïnvloeden. Een krachtige manier om prijstabellen te verbeteren is door een lint te gebruiken. Dit is visueel een opvallende banner van labels die diagonaal over een tabel worden weergegeven om specifieke aanbiedingen, kortingen en functies te benadrukken.
Of je nu een limited-time korting, een speciale functie of hot-selling pakketten promoot, een goedgeplaatst lint kan potentiële klanten direct beïnvloeden om beslissingen te nemen. Tafelberg is een intuïtieve en krachtige plugin om dit te doen.
In dit artikel laten we je zien hoe je met Tableberg een prijstabel met lint toevoegt in WordPress.
Maak prachtige tafels
Met blok-editor
Zodra je de plugin op je site hebt geïnstalleerd, kun je de volgende tutorial volgen.
Stap 1: Voeg het Tableberg-blok toe aan de editor
De plugin voegt een blok toe met de naam Tafelberg aan de Gutenberg blokbibliotheek. Voeg het blok toe aan de editor door simpelweg op het pluspictogram (+).
Stel het aantal kolommen en rijen in dat je nodig hebt voor je tabel. Voor deze tutorial stellen we 3*1 voor kolommen en rijen.
Je ziet dat de basislay-out voor de prijstabel is gemaakt met kolommen en een rij.
Stap 2: Inhoud aan de tabel toevoegen
Een prijstabel bevat meestal productnamen, afbeeldingen, prijzen, kortingsprijzen en CTA-knoppen. Laten we eens kijken hoe je deze aan de tabel toevoegt.
De productnaam toevoegen
Met Tableberg kun je verschillende soorten blokken toevoegen aan de cellen, net als met de Gutenberg-blok-editor. Voeg de Paragraaf blok om de naam van het product te schrijven. (Standaard wordt het alineablok toegevoegd aan de tabelcellen).
Schrijf de naam van je product in de cel. Lijn de tekst centraal uit, maak hem vet, verander de kleur en pas de grootte aan met de opties in de onderstaande afbeelding.
De productafbeelding toevoegen
Voeg het blok Afbeelding toe aan de prijstabel.
In het blok Afbeelding kunt u de productafbeelding uploaden. Pas de grootte van de afbeelding aan naar wens en lijn hem goed uit.
Een vorige prijs toevoegen
Het verschil tonen tussen de vorige en huidige prijs is een geweldige manier om de korting te benadrukken. Dus laten we nu een vorige prijs toevoegen onder de productafbeelding.
Een doorgehaald effect toevoegen aan de vorige prijs kan de aandacht van mensen trekken. Om dit te doen, selecteer de prijs met je cursor. Klik op de Meer optie op de werkbalk.
Ga naar de Markeer en Doorstreepopties. Je kunt de kleur van de prijs wijzigen en een doorhaling toevoegen.
Voeg de huidige prijs van het product toe
Voeg nu de huidige prijs van het product toe in een relatief groter lettertype zodat het de aandacht trekt.
Een CTA-knop toevoegen
Voeg aan het einde van alle inhoud de Knopblok.
Wijzig de achtergrondkleur, tekstkleur, typografiegrootte en vulling van de knop. Voer deze wijzigingen naar wens uit.
Stap 3: Voeg spaties toe tussen de blokken
De kolominhoud is dus klaar. Maar zoals je kunt zien, zijn alle blokken te vol. We moeten ruimte tussen de blokken toevoegen voor een frisser uiterlijk.
Om dit te doen, selecteer de specifieke kolom. Ga vervolgens naar de Tabblad Stijlen. Kom naar de Afstand tussen blokken optie door de tab te verschuiven. Vergroot de ruimte door een waarde toe te voegen aan het vak.
Voeg op dezelfde manier inhoud toe aan de andere kolommen. Maar om tijd te besparen, kun je de kolom dupliceren en vervolgens de inhoud bijwerken. Hier is een handleiding voor hoe dupliceer ik een Tableberg kolom en rij.
Stap 4: Straal toevoegen aan de tabelkolommen
Je kunt de esthetiek verbeteren door een randradius toe te voegen aan de kolommen van de tabel. Selecteer de Tabelberg pictogram op de werkbalk. Ga naar de Tabblad Stijlen.
Scroll en komen naar Celafstand. Door de betreffende optie te slepen, kun je spaties toevoegen tussen de kolommen van de tabel.
Je ziet de Table Border optie er net onder. Stel in uw gewenste Straalwaarde for zowel de binnenste als de buitenste rand.
Zo kun je je prijstabel opstellen.
Stap 5: Een lint toevoegen aan de prijstabel
Selecteer de kolom waaraan je een lint wilt toevoegen. Klik op het plus (+) pictogram en zoek de Lint blok. Klik vervolgens op en het blok naar de kolom.
Het lint wordt toegevoegd aan de tabel. Vervolgens kunt u vanuit de Tabblad InstellingenSelecteer het linttype, de linttekst, de zijde en de afstand.
Pas daarna de tekst en achtergrondkleur aan vanuit de Tabblad Stijlen.
Zo, je prijzentabel is klaar met een lint eraan.
Afsluiten!
Hopelijk heb je genoten van deze tutorial. Maar er zijn een aantal punten die je moet onthouden. Zorg ervoor dat je tabel schoon en overzichtelijk is. Minimalistische prijstabelontwerpen hebben altijd een impact op potentiële klanten.
Ten tweede, gebruik een duidelijke en beknopte tekst die webbezoekers direct bindt. Voeg indien mogelijk enkele voordelen/functies van de producten toe in de tabel. Als je meerdere plannen in je prijstabellen wilt opnemen, kun je ze beter weergeven met een tuimelschakelaar.
Hier is een gids over Hoe maak je een prijstabel met de toggle switch in WordPress?.
