Een prijstabel met lint toevoegen in WordPress

Een prijstabel met lint toevoegen in WordPress

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 (+).

Voeg het TableBerg-blok toe aan uw Gutenberg-editor

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.

Stel het aantal rijen en kolommen in

Je ziet dat de basislay-out voor de prijstabel is gemaakt met kolommen en een rij.

Kolommen en rijen worden toegevoegd aan de editor

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).

Voeg het alineablok toe aan de prijstabel

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.

Schrijf de naam van het product en pas het aan

De productafbeelding toevoegen

Voeg het blok Afbeelding toe aan de prijstabel.

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.

Upload de productafbeelding

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.

Schrijf de vorige prijs op

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.

Het doorgehaalde effect aan de prijs 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.

Voeg de huidige prijs van het product toe

Een CTA-knop toevoegen

Voeg aan het einde van alle inhoud de Knopblok.

Voeg het knoppenblok toe aan de prijstabel

Wijzig de achtergrondkleur, tekstkleur, typografiegrootte en vulling van de knop. Voer deze wijzigingen naar wens uit.

Pas de CTA-knop van de prijstabel aan

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.

Spaties tussen de blokken toevoegen

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.

Vul de andere kolommen van de prijstabel

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.

Straal toevoegen aan de tabelkolommen

Je ziet de Table Border optie er net onder. Stel in uw gewenste Straalwaarde for zowel de binnenste als de buitenste rand.

Redius toevoegen aan de kolommen in de tabel

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.

Selecteer een kolom om een lint toe te voegen

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.

Het lint op de prijstabel aanpassen

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?.



Het Tableberg-team