Heb je een lijst met prijzen op je website? Bijvoorbeeld voor diensten zoals tuinonderhoud of voor software? Van de tech-wereld tot yogastudio’s, de meeste bedrijven kunnen wel een prijstabel gebruiken om duidelijker te maken wat ze aanbieden. De belangrijkste manier om dat te doen is door naar de beste WordPress prijstabelplugins te kijken en er vervolgens één op je website te implementeren.
Maar nu vraag je je wellicht af: waarom is het zo belangrijk om een prijstabel te hebben?
Het antwoord is vrij logisch, (je wilt toch meer conversies?) maar het is zeker een goed idee om het waarom achter de prijstabel te begrijpen. Waarom is een prijstabelplugin effectiever om iets te verkopen dan een gewone opsomming, paragraaf of zelfs een illustratie?
- Een prijstabel biedt een overzichtelijke weergave en vergelijking van al je producten of pakketten.
- Je laat de belangrijkste features zien in een prijstabel, waarmee je alle details weglaat en bewaart voor een detailpagina.
- De prijstabel heeft ook duidelijke call-to-action-knoppen zodat mensen meteen zien hoe ze een product kunnen aanschaffen.
- De meeste prijstabellen gebruiken namen voor pakketten die het meteen duidelijk maken voor klanten waar het over gaat.
- Je kunt de nadruk leggen op bepaalde woorden, pakketten of features door grotere lettertypen of andere grafische elementen te gebruiken.
- Het is veel interessanter om een prijstabel met grafische elementen te lezen dan een tabel met alleen maar saaie tekst en nummertjes.
- Je kunt je conversies verder verbeteren door urgentie toe te toevoegen (zoals “de beste deal verloopt bijna”) of gratis proefperiodes.
- Prijstabellen nemen weinig ruimte in op een pagina, zodat je extra informatie kunt toevoegen, zoals een FAQ of een chatbox voor je verkopers.
Waar moet je op letten bij een prijstabelplugin voor WordPress
Nu we de voordelen van een prijstabel binnen je WordPress website begrijpen, kijken we naar enkele features die je daarbij graag zou willen zien:
- Gratis en premium opties – mijn favoriete prijstabelplugins bieden je simpelweg een tabel waardoor je prijzen er beter uitzien. Daarnaast zou een premium versie die extra features biedt, niet al te veel moeten kosten.
- Integraties met de populairste pagebuilders – Sommige pagebuilders hebben zelfs hun eigen ingebouwde prijstabellen. Enkele van de populairste pagebuilders zijn bijvoorbeeld Divi Builder, Elementor en WPBakery.
- Skins of thema’s voor het snel publiceren van prijstabellen. We zien ook graag aanpassingstools voor bijvoorbeeld kleuren, lettertypen en icoontjes.
- Een instelling voor het weergeven van ‘stempels’ op sommige pakketten, denk aan “Meest gekozen” of “Beste deal”.
- Diverse munteenheden zodat je de plugin overal ter wereld kunt gebruiken.
- Ondersteuning voor grote, aanpasbare knoppen bij elk pakket.
- Een builder met drag-and-drop-functie is ideaal.
- We willen ook graag toegang tot de CSS en HTML aangezien gevorderde developers graag de mogelijkheid hebben alles precies naar smaak te kunnen inrichten.
We kunnen verder nog tientallen features noemen, maar dit is alvast een goede basis.
Een vergelijking van de beste WordPress prijstabelplugins (en hoe je er zelf één kunt maken)
- Responsive Pricing Table by WP Darko
- Go Pricing
- Pricing Tables WordPress Plugin – Easy Pricing Tables
- Pricing Table van Supsystic
- CSS3 Responsive WordPress Compare Pricing Tables
- ARPrice – Responsive WordPress Pricing Table Plugin
- Pricing Table – Price list, Price Table, Easy Pricing Table
- WRC Pricing Tables
- Zo maak je zelf een prijstabel in WordPress
Zoals je nu al kunt zien is er geen gebrek aan keuze als het gaat om prijstabelplugin. Sommige, ook erg goede, zijn gratis om te gebruiken, terwijl andere alleen betaalde opties bieden. Dat gezegd hebbende, alle plugins hieronder hebben hun plekje op de lijst verdiend, en sommige hebben specifieke, unieke features die ze perfect maken voor bepaalde sectoren of bedrijven.
1. Responsive Pricing Table by WP Darko
De Responsive Pricing Table plugin is één van de meer gebruiksvriendelijke prijstabelplugins en zit boordevol features. Het biedt een uitstekende gratis versie zonder beperkingen op hoeveel pakketten je kunt aanbieden of hoeveel tabellen je op je website zet. Maar je kunt wel upgraden naar de premium versie als je toegang wilt tot betere features zoals skins en een “equalizer” die alle kolomhoogten precies hetzelfde maakt.
Je maakt de prijstabellen in deze plugin met eenvoudige velden en duidelijke knoppen aan de back-end. Enkele van de ingebouwde velden zijn bijvoorbeeld prijzen, omschrijvingen, titels en icoontjes. Sommige custom knoppen bieden ruimte voor links naar bijvoorbeeld Stripe en PayPal, terwijl de custom CSS-klassen erg handig zijn voor gevorderde developers.
Kosten
Er is een gratis pakket beschikbaar.
Je kunt ook de premium plugin krijgen voor $19 op één site of $49 voor een onbeperkt aantal sites.
De Darko ontwikkelaars verkopen ook andere plugins, en ze bieden een compleet pakket plugins voor $79. Dat kan zeker een goede keuze zijn voor sommige bedrijven.
Features waardoor de Responsive Pricing Table plugin een goede keus is
- Het gratis pakket biedt de benodigde tools voor de meeste kleinere bedrijven, doordat je een onbeperkt aantal tabellen en pakketten krijgt.
- De premium prijs is ook erg schappelijk.
- De skins zijn modern en standaard erg goed aan te passen, met allerlei knoppen en lettertypen die je kunt instellen.
- Je krijgt ook toegang tot icoontjes en andere visuele elementen.
- Je kunt zoveel (product)features noemen als je wilt.
- De call-to-action-knoppen kunnen linken naar betaalsites zoals PayPal.
- Er zijn allerlei valutatekens beschikbaar zodat je je prijstabel per land kunt aanpassen.
- Je kunt ook een badge toevoegen aan pakketten die je extra aan wil raden.
- Terugkerende pakketten (per maand of jaar) kun je laten zien met speciale instellingen.
2. Go Pricing
De Go Pricing app heeft geen gratis versie, maar is al wel duizenden keren verkocht en heeft geweldige beoordelingen op CodeCanyon. Daarnaast kost het slechts $27 om één van de beste prijstabelplugins van dit moment te krijgen.
Wat maakt de Go Pricing plugin zo bijzonder? Om te beginnen heeft het bijzonder strak vormgegeven tabellen, met moderne kleuren en een hoop witruimte zodat het er niet volgepropt uitziet. Je kunt verder kiezen uit een grote verzameling thema’s, waarvan sommige specifiek zijn ontworpen voor bepaalde sectoren. We vinden het ook erg prettig dat de plugin goed integreert met diverse pagebuilders en shortcodes heeft, zodat je geen volleerd programmeur hoeft te zijn om prijstabellen te maken.
Kosten
Een eenmalige prijs van $27 met de optie om een jaar langer ondersteuning te krijgen voor $8,25.
Features waardoor Go Pricing een goede keus is
- Elk deel van je prijsoverzicht wordt opgesplitst in een eigen deel met een visuele editor. Dat geldt ook voor de header, knoppen en het hoofddeel van de tabel.
- Je krijgt meer dan 250 demotabellen nadat je de plugin hebt gekocht. Dat zal voor verreweg de meeste bedrijven betekenen dat ze simpelweg een template kunnen pakken en een prijspagina in enkele minuten klaar hebben.
- Er zijn sleepbare elementen beschikbaar bij de pagebuilderintegraties. Go Pricing werkt vooral goed samen met Beaver Builder, Elementor en WPBakery.
- Het proces van het samenstellen van prijstabellen is erg eenvoudig, ook als je weinig ervaring hebt. De plugin heeft een prettige back-end interface, met opties voor shortcodes, importeren en instellingen.
- Bevat animaties om je prijsoverzichten nog aantrekkelijker te maken.
- Gebruik meer dan 2000 lettertype-icoontjes om je tabellen nog visueler te maken.
- Er is ook een custom CSS module beschikbaar als je verder dan de basisfeatures wil gaan.
- Je kunt unieke features toevoegen zoals media-elementen, PayPal knoppen en Google Maps.
3. Pricing Tables WordPress Plugin – Easy Pricing Tables
Als je op zoek bent naar strakke vergelijkingstabellen zonder toeters en bellen, dan is de Pricing Tables WordPress plugin waarschijnlijk een interessante optie voor je. Het heeft zowel gratis als premium versies, waarvan de betaalde versie begint bij $29 per jaar voor één website en eindigt bij $99 per jaar voor een onbeperkt aantal websites. Enkele van de premium features zijn echt heel cool, zoals een WooCommerce addon en een Google Analytics integratie.
Enkele van de andere integraties voor de premium versies zijn onder meer Easy Digital Downloads, Stripe en een Pricing Toggle addon. Verder kun je je ontwerpproces direct beginnen met wel 10 vooraf ingestelde ontwerpen. Zoals gezegd is het één van de eenvoudigere prijstabelplugins, dus vooral prettig als je niet op zoek bent naar animaties of fancy graphics.
Kosten
De basisplugin is gratis.
De premium plugin begint bij $29 per jaar voor één site, is $59 per jaar voor vijf sites, en $99 per jaar voor een onbeperkt aantal.
Features waardoor Easy Pricing Tables een goede keus is
- De prijstabellen zien er duidelijk en strak uit, waardoor je een moderne look krijgt zonder onnodige extra’s.
- Je kunt de kleuren en andere elementen van bijna elk elementen aanpassen. Dus ook kolommen, knoppen en lettertypen.
- Alle prijstabellen worden gemaakt met een eenvoudige lijst met visuele velden in de back-end. De setup daarvan heeft hetzelfde format als hoe de prijstabel er aan de voorkant uit zal zien.
- Je kunt specificeren dat één of meerdere pakketten extra uitgelicht worden.
- Je kunt kolommen in de goede volgorde slepen.
- Een custom CSS module is beschikbaar voor de meer geavanceerde customizations van je overzichten.
- Zelfs de gratis versie ondersteunt al een onbeperkt aantal regels voor de tabel.
- De premium versie biedt geweldige integraties met bijvoorbeeld WooCommerce, Google Analytics en Stripe.
4. Pricing Table by Supsystic
Het ontwikkelingsteam van Supsystic staat bekend om het maken van allerlei plugins voor fotogalerijen, popups, datatabellen en meer. We kijken nu echter alleen naar de Pricing Table plugin, die aangeboden wordt als een gratis oplossing met alsnog best wat features waarmee je zeker iets moois kunt neerzetten. Om precies te zijn, biedt de gratis versie features voor templates, animaties als je je muis eroverheen beweegt, en customizations van knoppen. Je kunt zelfs eenvoudig de informatie voor je overzicht importeren en exporteren.
We vinden de look van de premium plugin echt mooi, zeker aangezien het begint bij $39 voor één site en je daar een enorm pakket aan premium templates en rolverdelingen bij krijgt. In het algemeen zou ik zeggen dat dit één van de beste prijstabelplugins is om gewoon alleen de gratis basisplugin van te gebruiken, en de betaalde versie van te laten zitten. Maar tegelijk zijn de premium templates wel echt heel mooi, en ze kosten ook weer niet zo veel.
Kosten
Er is een gratis pakket beschikbaar.
Je kunt upgraden naar premium voor $39 voor één website. Of $69 voor ondersteuning op vijf sites. Of $149 voor een onbeperkt aantal websites.
Features waardoor de Pricing Table plugin van Supsystic een goede keus is
- De Pricing Table plugin komt het dichtst bij een volledige oplossing voor je prijstabel, zonder dat je hoeft te betalen. De enige echte upgrade die je bij de premium plugin krijgt is mooiere templates.
- Alle prijstabellen zien er mooi uit met responsieve elementen en heldere kleuren.
- De templates in de gratis versie zijn prima en in de premium templates echt geweldig.
- Je kunt kiezen of je een schakelaar wilt waarmee mensen speciale deals kunnen zien, zoals vooruitbetalen voor een heel jaar.
- Je kunt enkele pakketten uitlichten met visuele iconen.
- Je kunt tools zoals shortcodes, kleurensliders en visuele samenstelling gebruiken zodat je nooit ook maar een regel code hoeft te schrijven tijdens het maken.
- De plugin kan ook animaties laten zien als je bezoekers hun muis boven het overzicht laten zweven, zodat het nog meer aandacht trekt.
- De plugin ondersteunt ook afbeeldingen en video’s zodat je bepaalde features of diensten extra kunt benadrukken.
- Aan de back-end, in je WordPress dashboard, kun je een builder met sleepfunctie gebruiken.
5. CSS3 Responsive WordPress Compare Pricing Tables
Voor slechts $20 biedt de CSS3 Responsive prijstabelplugin echt waar voor je geld. Het wordt uitsluitend verkocht op CodeCanyon, maar onthoud wel dat er geen gratis versie beschikbaar is. Maar de meeste mensen zullen niet wakker liggen van het uitgeven van $20 voor een prijsplugin met geweldige beoordelingen en reviews. De plugin biedt prachtige templates, zodat je meteen kunt beginnen. Je kunt kleuren en lettertypen veranderen, en je beste pakketten benadrukken.
De meeste prijstabellen op deze lijst zijn (natuurlijk) responsive, maar deze ziet er echt bijzonder goed uit tijdens het testen op zowel mijn telefoon als tablet. Het lijkt erop dat ook de ontwikkelaars erg “responsive” zijn en graag nieuwe features maken en dan als updates publiceren. Tijdens het schrijven van dit artikel waren er bijvoorbeeld al drie grote featurereleases, met verschuivende kolommen, responsive mode, en importeren en exporteren van data.
Kosten
$20 voor alle features.
Je kunt nog $5,63 extra betalen om de ondersteuning met een jaar te verlengen. Er is geen gratis plugin beschikbaar.
Features waardoor CSS3 Pricing Tables Grids een goede keus is
- De prijs is verreweg het beste op de lijst, gezien de hoeveelheid features in de plugin.
- De grote verzameling aan tools voor customization betekent dat je duizenden unieke prijstabellen zou kunnen maken. Denk onder meer aan 20 kleurenversies, 60 ribbons, 42 kruisiconen, en twee algehele stijlen voor de tabel.
- Maak een onbeperkt aantal rijen en kolommen.
- Je hebt toegang tot de CSS en HTML modules voor extra aanpassingen.
- Je hebt mogelijkheden voor het aanpassen van zowel breedte als hoogte van alle kolommen en rijen.
- Multisite compatibiliteit.
- Shortcodes waarmee je prijstabellen overal op je websites kunt implementeren.
- Tools voor het importeren en exporteren van data zodat je makkelijk al je informatie naar een andere tabel of spreadsheet kunt halen.
- Ondersteuning van iconen zoals checkvinkjes en kruizen.
- Animaties en ondersteuning voor media zodat je nog meer visuals kunt toevoegen en je pakketten nog meer opvallen.
6. ARPrice – Responsive WordPress Pricing Table Plugin
De ARPrice plugin is ook via de CodeCanyon website te koop, voor de prijs van $23. Het begint ons op te vallen dat het voor veel bedrijven en mensen vaak een beter idee is om deze superlage prijzen te betalen voor plugins met alle features dan om voor gratis plugins te gaan die níet alle benodigde functies bieden. In ieder geval biedt deze prijstabelplugin enkele van de beste visuals binnen deze lijst, doordat het verschillende media-items ondersteunt, zoals achtergrondafbeeldingen en iconen.
Het ontwerpen doe je via een visuele editor die precies laat zien hoe je prijstabel er aan de voorkant uit zal gaan zien. Je kunt vervolgens kiezen of je prijzen zijn gebaseerd op bijvoorbeeld maandelijkse of jaarlijkse abonnementen. Je start het proces door een template te kiezen, en vervolgens kun je de data importeren, looks veranderen, en het lettertype kiezen. Kortgezegd, de ARPrice plugin biedt een prachtige interface met nog mooie resultaten aan de front-end.
Kosten
Een eenmalige prijs van $23, waarbij je nog $6,75 kunt betalen om je ondersteuning te verlengen met een jaar.
Features waardoor ARPrice een goede keus is
- Het is goed betaalbaar voor een premium plugin.
- Je krijgt meer dan 300 templates voor prijstabellen meegeleverd.
- De customizationtools zijn echt geweldig, met oneindig veel kleurkeuzes, volledig responsive templates, een prijsknop en meer dan 3000 iconen.
- De animaties helpen ook zeker om je prijstabellen aantrekkelijker te maken.
- Er is een CSS-module, met uitleg erbij voor nog meer customization.
- Je krijgt enkele unieke integraties met andere programma’s, zoals Google Maps.
- De realtime editor voor templates biedt een mooie visuele interface voor het aanpassen van items zoals kolommen, headers en achtergronden.
- Er is een extra “team showcase” feature, waardoor je op dezelfde manier in de back-end een tabel kunt maken over het team achter je website.
- De WordPress prijstabelplugin is compatibel met de meeste populaire pagebuilders zoals Elementor, Gutenberg en WPBakery.
7. Pricing Table – Price list, Price Table, Easy Pricing Table
De Pricing Table – Price List plugin is gemaakt door A WP Life. Het is een wat nieuwere, maar gerespecteerde oplossing. De gratis versie heeft opties voor customization, inclusief een aantal templates. Animaties worden ook meegeleverd, en je kunt items zoals icoontjes en featurelijsten toevoegen. Plaats verder “Nu kopen” knoppen bij de lijsten en gebruik tags zoals “Hot” of “Populair”.
De premium versie van de plugin geeft al die features, plus nog eens 19 templates. Het kost slechts $9,99 dus als je een template ziet dat bij je merk past, kun je je er geen buil aan vallen.
Kosten
Gratis voor de basisplugin en $9,99 voor de premium versie.
Features waardoor de Pricing Table een goede keus is
- Je krijgt alle goede features al in de gratis versie. De enige reden dat je zou willen upgraden is als je een specifiek template ziet dat niet bij de gratis versie zit.
- Overigens zitten er al wel een handvol goede templates bij de gratis versie. Als je de upgrade koopt krijg je er nog eens 20 bij.
- Alle tabellen bij deze plugin zijn volledig responsive.
- Door iconen te gebruiken maak je je tabellen visueel aantrekkelijker.
- De shortcodes helpen bij het plaatsen van je tabellen precies waar je ze op je website wilt hebben.
- Je kunt met één muisklik prijstabellen toevoegen of verwijderen.
- Je kunt de kleuren van zowel knoppen, headers en nog veel meer elementen precies naar smaak aanpassen.
- Je kunt ook custom CSS styling gebruiken via het dashboard.
- Het ontwerpen is niet volledig visueel, maar geeft wel goed weer hoe het eindresultaat eruit zal zien.
8. WRC Pricing Tables
De WRC Pricing Tables plugin wordt aangeboden als gratis plugin, maar er is ook een upgrade beschikbaar voor $10. De premium versie is iets geavanceerder, heeft meer dan 500 extra templates, een PayPal integratie en prijsschakelaars zodat gebruikers gemakkelijk kunnen schakelen tussen bijvoorbeeld maandelijkse en jaarlijkse pakketten. Bij het premium pakket komt nog een handjevol extra features, dus die is zeker het overwegen waard, zeker gezien de lage prijs.
De gratis plugin is prima voor het maken van eenvoudige prijstabellen en je kunt een onbeperkt aantal rijen en kolommen gebruiken. Al het ontwerpen doe je via een editor met sleepfunctie. Eén van onze favoriete dingen aan de WRC Pricing Tables plugin is dat je een kleurkiezer kunt gebruiken, waarbij je één kleur kiest en de plugin een random tabel voor je ontwerpt.
Kosten
Gratis. $10 voor de premium versie.
Features waardoor WRC Pricing Tables een goede keus is
- De WRC Pricing Tables plugin biedt prima features in de gratis versie, met een volledig oplossing voor slechts $10 (eenmalig).
- De plugin biedt shortcodes om je tabel precies daar te plaatsen waar je hem hebben wil. Een shortcode kan namelijk in principe overal geplaatst worden, op elke pagina, artikel of zelfs een widget.
- Door de icoontjes van Font Awesome wordt je ontwerp ook visueel interessanter.
- De plugin ondersteunt ook Google Fonts.
- De integratie met PayPal zorgt ervoor dat je klanten gemakkelijk via PayPal kunnen betalen.
- Er zitten vrij veel templates bij de plugin.
- Je kunt een onbeperkt aantal rijen en kolommen toevoegen en je kunt prijstabellen kopiëren en bewaren voor later.
- Gevorderde developers kunnen hun tabellen nog verder verbeteren via custom CSS.
Wat is nou de beste WordPress prijstabelplugin voor jou?
De plugins hierboven kun je allemaal meteen gaan testen. Maar ik zal wat aanbevelingen doen waardoor het hopelijk iets makkelijker wordt.
- Als je een gratis pakket met zoveel mogelijk features wilt kies dan voor de Responsive Pricing Table van WP Darko of Pricing Table by Supsystic.
- Als je graag een enorme verzameling van mooie tabeltemplates wilt overweeg dan de Go Pricing plugin of de ARPrice plugin.
- Voor een strakke, simpele tabel zonder bellen en toeters denk aan de Pricing Tables WordPress plugin – Easy Pricing Tables.
- Voor de beste waarde voor je geld met de meeste features in een premium plugin ga je voor CSS3 Responsive WordPress Compare Pricing Tables.
Alle andere plugins op deze lijst hebben ook hun voordelen. Maar dit zijn de plugins die ik het meest handig vind.
Maar wat nou als je niet een plugin wilt gebruiken maar je eigen prijstabel wilt coderen?
Dat doe je zo!
Zo maak je zelf een prijstabel in WordPress
Het maken van je eigen prijstabel doe je via HTML-code, waarmee je de structuur opzet, en dan CSS voor de styling.
Om te beginnen log je in bij je WordPress website, navigeer naar het dashboard en klik op Pagina’s → Nieuwe toevoegen. Je kunt ook de code toevoegen aan een al bestaande pagina waar je je prijstabel graag wilt laten zien.
Als de WordPress editor geladen is, ga je naar de tekstmodus en plak je de volgende code:
<div class="pricing-table">
<div class="one-third first">
<ul>
<li class="header">Basic</li>
<li class="grey-blue">$ 9.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
<li>List Item #4</li>
<li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a>
</div>
<div class="middle one-third">
<ul>
<li class="header-blue">Pro</li>
<li class="light-blue">$ 99.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
<li>List Item #4</li>
<li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a>
</div>
<div class="one-third">
<ul>
<li class="header">Business</li>
<li class="grey-blue">$ 199.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
<li>List Item #4</li>
<li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a>
</div>
</div>
De code is vrij eenvoudig: eerst maken we een ‘div’ om de code voor de prijstabel in te zetten en later makkelijk via de CSS te kunnen stijlen. Daarna, aangezien we drie tabellen gaan maken, stoppen we ze allemaal in een kolom van één derde. Het laatste deel is de tabel zelf, met toegevoegde klassen voor een header en prijspunt zodat dat extra opvalt.
Voordat je op Publiceren of Bijwerken klikt, let erop dat je alle tekst vervangen hebt tussen de [pre]<li> en </li>[/pre] tags met je eigen tekst en dat je de link naar je betalingsformulier hebt toegevoegd bij het href deel.
Als je eenmaal alle informatie hebt toegevoegd, kun je op Publiceren klikken als je een nieuwe pagina aan het maken bent of op Bijwerken als de pagina al bestond en je alleen een nieuwe tabel toevoegt.
Als je nu naar je pagina kijkt, zul je zien dat de tabel er vrij saai uitziet. Laten we dus wat styling toevoegen.
Als je een child-thema gebruikt zoals zou moeten, kun je de volgende code toevoegen aan het stylesheet van je child-thema, en anders aan de Custom CSS editor.
Het eerste deel van de code zorgt ervoor dat de prijstabel wordt weergegeven in drie kolommen. Als je er meer nodig hebt, dan kun je deze klassen ook eenvoudig vervangen:
/* ## Column Classes
--------------------------------------------- */
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
float: left;
margin-left: 2.564102564102564%;
}
.one-half,
.three-sixths,
.two-fourths {
width: 48.717948717948715%;
}
.one-third,
.two-sixths {
width: 31.623931623931625%;
}
.four-sixths,
.two-thirds {
width: 65.81196581196582%;
}
.one-fourth {
width: 23.076923076923077%;
}
.three-fourths {
width: 74.35897435897436%;
}
.one-sixth {
width: 14.52991452991453%;
}
.five-sixths {
width: 82.90598290598291%;
}
.first {
clear: both;
margin-left: 0;
}
Het tweede deel van de code voegt de daadwerkelijke styling toe aan de tabellen.
/* ## Pricing Table
--------------------------------------------- */
.pricing-table {
line-height: 1;
}
li.header {
background-color: #2f79a9;
color: #fff !important;
font-size: 25px;
border-bottom: 1px solid #2f79a9 !important;
margin-bottom: 0 !important;
}
li.grey-blue {
background-color: #569dcc;
color: #fff !important;
font-size: 20px;
}
li.header-blue {
background-color: #00b9eb;
color: #fff !important;
border-bottom: 1px solid #00b9eb !important;
font-size: 25px;
margin-bottom: 0 !important;
}
li.light-blue {
background-color: #72dffd;
color: #fff !important;
font-size: 20px;
}
.middle {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
.pricing-table .one-third {
background-color: #fff;
margin: 20px 5px;
padding: 40px;
width: 32.33%;
}
.pricing-table .one-third:nth-child(3n+1),
.pricing-table .one-third:nth-child(3n+2),
.pricing-table .one-third:nth-child(3n) {
border: 1px solid #ddd;
}
.pricing-table .one-third ul {
margin: 0;
}
.pricing-table ul li {
border-bottom: 1px solid #ddd;
color: #333;
margin-bottom: 10px;
padding: 10px;
text-align: center;
list-style-type: none;
}
.pricing-table a.pricing-button {
background-color: #00b9eb;
border: 3px solid #00b9eb;
color: #fff;
display: block;
text-align: center;
padding: 16px 24px;
}
.pricing-table a.pricing-button:hover {
background-color: #000;
border: 3px solid #000;
color: #fff;
}
/* Pricing Table - Media Queries for Mobile Devices
--------------------------------------------- */
@media only screen and (max-width: 1140px) {
.pricing-table .one-third {
width: 32%;
}
}
@media only screen and (max-width: 800px) {
.pricing-table .one-third {
width: 100%;
}
}
@media only screen and (max-width: 568px) {
.pricing-table .one-third {
width: 100%;
}
}
@media only screen and (max-width: 480px) {
.pricing-table .one-third {
width: 100%;
}
}
@media only screen and (max-width: 420px) {
.pricing-table .one-third {
width: 100%;
margin: 20px 0;
}
}
We hebben wat eenvoudige styling toegevoegd voor prijstabellen en de header en prijs wat opvallender gemaakt. We hebben ook een schaduw toegevoegd aan de middelste tabel om die extra te benadrukken. Als laatste hebben we wat mediaquery’s toegevoegd zodat de tabellen responsive zijn.
Als je de CSS fragmenten hebt geplakt, kun je op Bestand bijwerken klikken. Kijk nu naar je pagina of alles naar wens weergegeven wordt.
Als je nog vragen hebt over prijstabellen, of nog betere suggesties hebt, laat het ons weten in de reacties!
Hoofdredacteur bij Kinsta en content marketing consultant voor WordPress plugin-ontwikkelaars. Verbind met <a href="">Matteo op Twitter.
Laat een reactie achter