Har du en liste over priser på din hjemmeside? Disse priser kan være for tjenester som plænepleje eller de kan være til softwarepakker. Fra tech verden til yoga centre, kunne de fleste virksomheder bruge pristabeller for bedre repræsentation af, hvad de tilbyder. Den vigtigste måde at gøre dette på er at se på de bedste WordPress pristabel plugins og derefter implementere en på din hjemmeside.
Men det begærer spørgsmålet, hvorfor er det så vigtigt at have en pristabel?
Svaret på dette spørgsmål kan virke indlysende (du vil forbedre konverteringer, ikke?), Men det er rart at forstå det hvorfor, der er bag pristabellen. Hvorfor er et pristabel plugin mere effektivt til at lave et salg end en almindelig punktliste, afsnit eller endda et billede?
- En pristabel giver mulighed for en ryddelig oversigt og sammenligning af dine ydelser eller pakker.
- De vigtigste funktioner vises i en prissætningstabel, fjerner rod og forlader det til fordel en anden side.
- Prissætningstabellen har klare CTA knapper for at vise folk, hvordan man kan gå videre med købet.
- De fleste pristabeller bruger pakke / plannavne, der gør det meget lettere for kunderne at forstå.
- Du kan lægge vægt på bestemte ord, planer eller funktioner ved at bruge større skrifttyper eller grafik.
- Det er langt mere interessant at læse en grafikbaseret prissætningstabel end en med kun tekst i den.
- Du kan forbedre konverteringer med hastende karakter (dvs. “Tiden for en god handel er næsten udløbet”) eller gratis prøve.
- Pristabellerne tager lidt plads på hjemmesiden, så du kan tilføje yderligere oplysninger, som en FAQ eller en chatboks til dine forhandlere.
Hvad skal man se efter i et WordPress pristabel plugin
Nu hvor vi kender fordelene ved et WordPress pristabel plugin, lad os tage et kig på nogle af de funktioner, du skal have:
- Gratis og premium muligheder – Mine favorit pristabeller til prisbeller giver dig et standard board, der gør dine priser så flotte. Derefter bør premium-versionen med ekstra funktioner ikke være super dyr.
- Integrationer med de øverste sidebyggere – Nogle af sidebyggerne selv, kommer med deres egne pristabeller. Nogle af de mere populære sidebyggere omfatter Divi Builder, Elementor og WPBakery.
- Skins eller temaer til lancering af pristabeller inden for få sekunder. Vi kan også godt lide, at man kan se tilpasningsværktøjer til farver, skrifttyper og ikoner.
- En indstilling til at vise mærker på bestemte planer, som for “Bedste værdi” eller “Mest populære” planer.
- Flere valuta muligheder til brug over hele verden.
- Støtte til store, brugerdefinerede knapper på hvert prisplan.
- En drag og drop byggmester ville også være fremragende.
- Vi kan også se adgang til CSS og HTML, da mere avancerede udviklere vil have komplekse tweaking muligheder.
Vi kunne gennemgå dusinvis af funktioner, der giver mening om pristabeller, men det er en god start med det væsentlige.
De bedste WordPress pristabel plugins sammenlignet (og hvordan du koder dit EGET)
- Responsive Pricing Table af WP Darko
- Go Pricing
- Pricing Tables WordPress Plugin – Easy Pricing Tables
- Pricing Table af 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
- Hvordan man opbygger et pristabell i WordPress fra bunden
Der er ingen mangel på tilgængelige muligheder, når det drejer sig om pristabel plugins og WordPress-websteder. Nogle af de bedste kan bruges gratis, mens andre er premium uden nogen gratis muligheder. Når det er sagt, fortjener alle nedenstående plugins en plads på denne liste, og nogle af dem har unikke funktioner, der passer til nogle bestemte brancher eller virksomheder.
1. Responsive Pricing Table af WP Darko
Responsive Pricing Tabel er et af de mere brugervenlige plugins, pakket med muligheder, til at lave pristabeller. Det giver en fremragende gratis version uden begrænsninger på, hvor mange planer du indeholder, eller hvo rmange tabeller du laver til dine hjemmesider. Du kan dog opgradere til premium versionen for at få adgang til bedre funktioner som skind og en “udjævner” for at gøre alle kolonnehøjder nøjagtigt ens.
De pristabeller, du opbygger, er færdige med enkelt felter og backend-knapper. For eksempel kan nogle af de indbyggede felter du bruger, udnytte priser, beskrivelser, plan titler og ikonbokse. Nogle af de brugerdefinerede knapper giver mulighed for links til steder som Stripe og PayPal, mens de tilpassede CSS-klasser helt sikkert hjælper avancerede udviklere.
Pris
En gratis plan er tilgængelig.
Du kan få et premium-plugin til 19 USD på et websted eller 49 USD for ubegrænsede websteder.
Darko Developers sælger andre plugins, så du kan få dem alle til en pris på 79 USD. Dette kan være nyttigt for nogle virksomheder.
Funktioner, der gør Responsive Pricing Table et godt valg
- Den gratis plan giver de nødvendige værktøjer til en lang række små virksomheder, da du modtager ubegrænsede tabeller og planer.
- Premium prisen er også ret lav.
- Dens udseende er moderne og meget tilpassede fra start, med masser af knapper og skrifttyper til at justere.
- Ikoner og andre billeder er tilgængelige.
- Du kan inkludere så mange funktioner som du vil have til dine prisplaner.
- Knappen CTA kan linke til tredjeparts betalingssystemer som PayPal.
- En bred vifte af valutategn er til rådighed for at nå ud til forskellige lande.
- Du kan vise et badge for anbefalede planer.
- Tilbagevendende planer (pr. måned eller år) kan vises med specielle indstillinger.
2. Go Pricing
Go Pricing-appen har ikke en gratis version, men den kan prale af tusindvis af salg og nogle gode anmeldelser på CodeCanyon-markedet. For ikke at nævne, er det kun koster 27 USD at få et af de bedste pristabeller på markedet.
Hvad laver Go Pricing pluginet så specielt? Til at begynde med, har det utroligt slanke prisplaner med moderne farver og masser af hvide rum, så det ikke ser så rodet ud i. Du kan også vælge mellem en stor samling af temaer, hvoraf nogle er lavet kun for bestemte brancher. Vi elsker også, at pluginet integreres med flere sidebyggere og har kortkoder for at sikre, at ingen skal være et kodende geni for at lave pristabeller.
Pris
Et engangsgebyr på 27 USD med mulighed for at udvide support til et år for 8.25 USD.
Funktioner, der gør Go Pricing et godt valg
- Hver del af din pristabel er opdelt i sin egen sektion i en visuel editor. Dette omfatter overskrift, krop og knapområde.
- Der gives over 250 demo tabeller til dig, efter du har købt pluginet. Dette skal give de fleste virksomheder mulighed for at tage en skabelon og lancere en prisside inden for få minutter.
- Træk og slip elementer er mulige med sidebygger integrationer. Go Pricing fungerer godt med Beaver Builder, Elementor og WPBakery.
- Prisfastsættelsen bygnings proces er let for alle erfaringsniveauer. Pluginet har en stor backend-grænseflade med muligheder for kortkoder, import og indstillinger.
- Medtag animationer for at gøre dine pristabeller mere tiltalende.
- Brug over 2000 skrifttype ikoner til at gøre dine tabeller endnu mere visuelle.
- Et brugerdefineret CSS-modul er til rådighed for dem, der ønsker at gå ud over de grundlæggende funktioner.
- Tilføj unikke funktioner som medieelementer, PayPal-knapper og Google Maps.
3. Pricing Tables WordPress Plugin – Easy Pricing Tables
Hvis du er interesseret i rene sammenlignings- og pristabeller uden for mange avancerede funktioner, ser Pricing Table WordPress Plugin ud som en solid løsning for dig. Den kommer i både gratis og premium versioner, starter fra 29 USD pr år for en hjemmeside og går op til 99 USD om året for ubegrænsede websteder. Nogle af premium funktionerne begynder at blive rigtig cool, herunder en WooCommerce-tilføjelse og integration med Google Analytics.
Nogle af de andre integrationer til premium-versionerne omfatter Easy Digital Downloads, Stripe og en prissætning Toggle add-on. Desuden kan du forvente at starte designprocessen med 10 forudindstillede designs. Som nævnt er dette et af de enklere pristabel plugins, så vi finder det ideelt til dem, der ikke ønsker elementer som animationer og grafik.
Pris
Kernenpluginet er gratis.
Premium-plugin er 29 USD pr. år for et websted, 59 USD pr. år for fem websteder og 99 USD om året for ubegrænsede websteder.
Funktioner, der gør Easy Pricing Tables et godt valg
- Pristabels-designet er rene og enkle, hvilket giver et moderne udseende uden unødvendige effekter.
- Du kan justere farverne og andre elementer af stort set alle ting på pristabellen. Dette omfatter kolonner, knapper og skrifttyper.
- Alle pristabeller er konstrueret med en simpel liste over visuelle felter i backend. Opsætningen er formateret, hvordan pristabellen vil se på fronten.
- Du kan angive, at en eller flere planer vises over de andre.
- Du kan trække og slippe kolonnerne for at omrokere dem.
- Et tilpasset CSS-modul leveres til mere avancerede tilpasninger til dine pristabeller.
- Selv den gratis version understøtter et ubegrænset antal prissætningstabeller.
- Nogle af premiumversionerne har gode integrationer til ting som WooCommerce, Google Analytics og Stripe.
4. Pricing Table af Supsystic
Supsystic Development Team er kendt for at lave alle mulige plugins til fotogallerier, popups, datatabeller og meget mere. Men vi tager et kig på Pricing Table pluginet, som tilbydes som en gratis løsning med et par funktioner til at lege med. Faktisk har den gratis version af pluginet, funktioner til forudindstillede skabeloner, hover animationer og knap tilpasninger. Du kan endda importere og eksportere dine tabeloplysninger med lethed.
Vi kan også lide premium-pluginets udseende, da det starter med at koste 39 USD for et websted, og du modtager en stor pakke premium templates og rollebegrænsninger. Alt i alt vil jeg hævde, at dette er et af de bedste pristabel plugins til at bruge kernen, gratis plugin og for at springe ud på den betalte version. Om ikke andet, er premium skabeloner dog temmelig cool, og de koster dig ikke så meget.
Pris
En gratis plan tilbydes.
Opgrader til præmie for 39 USD på et websted. Eller 69 USD for support på fem websteder. Eller 149 USD på ubegrænsede websteder.
Funktioner, der gør Pricing Table fra Supsystic til et godt valg
- Prissætningstabellen fra Supsystic er tættest på den mest komplette pristabel løsning i den gratis version. Den eneste opgradering, du får i premium-plugin, er nogle bedre skabeloner.
- Alle pristabeller ser smukke ud, med responsive elementer og lyse farver.
- Skabelonerne i den gratis version er gode, og premium skabeloner er fantastiske.
- Vælg at have en knap, der viser folk specialtilbud- som at betale for et år i forvejen eller for at købe i dag.
- Fremvis nogle af dine planer med visuelle ikoner.
- Brug værktøjer som kortkoder, farveglidere og visuel bygning for at sikre, at du ikke rører en kodekode under oprettelsesprocessen.
- Pluginet har hover-animationer for at gøre dine planer mere tiltrækkende for de besøgende.
- Billeder og videoer understøttes også, så du kan vise visse funktioner eller dele af din virksomhed.
- En træk-og-slip-bygger er placeret i backend på dit WordPress dashboard.
5. CSS3 Responsive WordPress Sammenligning af pristabeller
Til prisen på 20 USD er CSS3 Responsive pricing table plugin en utrolig værdi. Den sælges kun på CodeCanyon markedspladsen, men du skal huske på, at der ikke er nogen gratis version tilgængelig. Når det er sagt, vil de fleste mennesker ikke glemme ideen om, at betale 20 USD for et højt vurderet og gennemgået pristabels plugin. Samlet set har pluginet nogle smukke skabeloner, så du kan komme i gang. Du kan ændre farver og skrifttyper, samtidig med at du fremhæver nogle af de bedste planer, du tilbyder.
De fleste af pristabellerne på denne liste er responsive, men denne ser godt ud efter testning på min telefon og tablet. Det ser ud til at udvikleren er responsiv og villig til at oprette nye funktioner og frigive dem som opdateringer. For eksempel ser jeg i øjeblikket på tre vigtige funktion-udgivelser, nemlig i glidende kolonner, responsiv tilstand og dataimport- og eksport.
Pris
20 USD for alle funktioner.
Du kan betale 5,63 USD for at udvide din kundesupport til et år. Ingen gratis plugin tilbydes.
Funktioner, der gør CSS3 Pricing Table Grids til et godt valg
- Prisfastsættelsen er simpelthen nogle af de bedste, vi har set for de funktioner, du får i pristabel-pluginnet.
- Den store samling af tilpasningsværktøjer giver mulighed for tusindvis af unikke pristabeller. Dette omfatter 20 farve versioner, 60 bånd, 42 kryds ikoner og to tabel stilarter.
- Opret et ubegrænset antal rækker og kolonner.
- Tryk let på CSS og HTML modulerne for ekstra tilpasning.
- Du får muligheder for at justere bredden og højden af alle kolonner og rækker.
- Flerside kompatibilitet.
- Kortkoder, der hjælper dig med at implementere dine pristabeller overalt på dine hjemmesider.
- Data importerer og eksporterer værktøjer, så du kan flytte dine data til en anden tabel eller importere fra et regneark.
- Ikonunderstøttelse til at inkludere visuelle billeder som markeringer og X’er.
- Animationer og medieunderstøttelse til at tilføje flere billeder og få dine planer til at skille sig ud.
6. ARPrice – Responsive WordPress Pricing Tabel Plugin
ARPrice-pluginet sælger også på CodeCanyons websted, men til en pris på 23mUSD. Vi begynder at lægge mærke til, at mange virksomheder og enkeltpersoner kan være bedre at betale disse super lave priser for at få alle de funktioner, de har brug for – i modsætning til at arbejde med et gratis plugins, der mangler nogle funktioner. Uanset om dette pristabel plugin indeholder nogle af de bedste billeder på denne liste, da det understøtter flere typer medieelementer, såsom baggrundsbilleder og ikoner.
Backend designeren er en visuel editor, der afslører præcis, hvordan din pristabel vil se ud online. Du kan derefter vælge, om dine prisplaner er baseret på årlige, månedlige eller de mange andre tidspunkter, der er tilgængelige. Du starter processen ved at vælge en skabelon, så du kan gå ind og importere data, ændre effekter og vælge dine skrifttyper. Samlet set tilbyder ARPrice-plugin en smuk brugergrænseflade med endnu bedre frontend-resultater.
Pris
Engangsgebyr på 23 USD med en gebyr på 6,75 USD for at forlænge din støtte i op til et år.
Funktioner, der gør ARPrice til et godt valg
- Det er ret overkommeligt for et premium plugin.
- Der er mere end 300 pristabel skabeloner til rådighed for at downloade med pluginet.
- Tilpasningsværktøjerne er fremragende, med ubegrænsede farveindstillinger, fuldt responsive skabeloner, en knap til prissætning og over 3.000 ikoner.
- Animationseffekterne er bundet til at hjælpe med ved at gøre dine pristabeller mere tiltalende.
- Der er et CSS-modul og CSS-styringssystem til avancerede tilpasninger.
- Du modtager nogle unikke integrationer med andre tredjepartsprogrammer som Google Maps.
- Realtids skabelon editor giver en smuk visuel grænseflade til justering af elementer som kolonner, overskrifter og baggrunde.
- Der er en ekstra “team fremvisnings” -funktion, som stort set tager samme kolonneformat og giver dig mulighed for at dele information om dine medarbejdere på hjemmesiden.
- WordPress pristabel pluginet er kompatibel med de mest populære sidebyggere som Elementor, Gutenberg og WPBakery.
7. Pricing Table – Price list, Price Table, Easy Pricing Table
Pricing Table – Price List plugin kommer fra folkene på A WP Life. Det er en noget nyere, men velovervejet løsning. Den gratis version har smukke muligheder for tilpasninger, herunder nogle få skabeloner, der følger med pluginet. Animationer leveres, og du kan indsætte emner som ikoner og funktionslister. Placer Køb nu knapper på listerne og lav tags til ting som “Hot” eller “Populære” elementer.
Premium-versionen af deTTe plugin giver dig alle de samme funktioner, sammen med yderligere 19 skabeloner. Det koster kun 9,99 USD, så hvis du finder en skabelon, der passer til dit brand, skal du gå efter det.
Pris
Gratis og 9,99 USD for premium versionen.
Funktioner, der gør pristabellen til et godt valg
- Du modtager alle de gode funktioner i den gratis version. Den eneste grund til at opgradere er, hvis du vil have en bestemt skabelon, der ikke findes i det gratis plugin.
- En håndfuld af flotte pristabel-skabeloner er inkluderet i den gratis version. Du kan også opgradere til ca. 20 mere.
- Alle tabeller, der følger med plugins, betragtes som fuldt responsive.
- Ikoner giver dig mulighed for at oprette flere visuelt tiltalende tabeller.
- Kortkoderne hjælper med at placere dine tabeller overalt på din hjemmeside.
- Pristabeller kan tilføjes og fjernes fra dit websted med et klik på en knap.
- Tilpasningsmulighederne omfatter ubegrænsede farver, knapfarver, headerfarver og meget mere.
- Brugerdefineret CSS styling kan udføres i instrumentbrættet.
- Designområdet er ikke en helt visuel bygger, men den er oprettet med flere kolonner for at simulere, hvordan tabellerne så ud før.
8. WRC Pricing Tables
WRC Pricing Tables pluginet leveres som et gratis plugin, men du har mulighed for at opgradere til 10 USD. Premium-versionen er lidt mere avanceret, med over 500 ekstra skabeloner, en PayPal-integration og prissætning skifter til at skifte mellem ting som månedlige og årlige planer. En håndfuld andre funktioner leveres med premiumplanen, så det er absolut værd at overveje, da prisen er så lav.
Det gratis plugin er fantastisk til konstruktion af enkle pristabeller, og du kan oprette et ubegrænset antal rækker og kolonner. Alt design er lavet ved hjælp af en træk-og-slip-editor. En af de ting, vi kan lide mest ved WRC Pricing Tables plugin er, at du kan bruge en farvevælger, som i det væsentlige tager din farve og genererer et tilfældigt tabel design til dig.
Pris
Gratis. 10 USD for premium.
Funktioner, der gør WRC Pricing Table til et godt valg
- WRC Pricing Tables plugin har fremragende funktioner i den gratis version, med en komplet præmie løsning til kun 10 USD (engangsafgift).
- Pluginet indeholder kortkoder, når du skal placere dine pristabeller overalt på din WordPress-hjemmeside. For eksempel kan en shortcode teknisk set gå på enhver side, indlæg eller endda potentielt en widget.
- Font Awesome ikoner tilføjer visuel pop til dit design.
- Pluginet understøtter også Google Fonts.
- PayPal-knappens integration sikrer, at du kan indsamle penge fra dine kunder.
- En hel del skabeloner kommer sammen med pluginet.
- Du kan tilføje et ubegrænset antal rækker og kolonner, samtidig med at du duplikerer pristabellerne og gemmer dem til senere.
- Avancerede udviklere har mulighed for at forbedre deres tabeller med brugerdefineret CSS.
Hvilket er det bedste WordPress pristabel plugin til dig?
De ovennævnte plugins er alle klar til test. Men jeg kan også gøre det lidt lettere for dig med nogle yderligere anbefalinger.
- Hvis du vil have en gratis plan med de fleste funktioner, du har brug for – Gå med den Responsive Pricing Table af WP Darko eller Pricing Table af Supsystic.
- Hvis du vil have en enorm samling af flotte tabelskabeloner – Overvej pluginnet Go Pricing eller ARPrice plugin.
- For et simpelt, rent tabel uden for meget ståhej – Tænk på Pricing Tables WordPress Plugin – Easy Pricing Tables.
- For den bedste værdi med de fleste funktioner fra et premium plugin – Overvej CSS3 Responsive WordPress Compare Pricing Tabeller.
Alle de øvrige pristabeller på denne liste har også deres fordele. Men disse er dem, jeg plejer at nyde mest.
Men hvad nu hvis du ikke er interesseret i at bruge et plugin og gerne vil kode dit eget prisbord?
Sådan gør du det!
Sådan opbygger du en pristabel i WordPress fra bunden
Opbygning af en prissætningstabel fra bunden sker med HTML-kode, som giver os strukturen til vores tabel og derefter styler den med CSS.
For at komme i gang skal du logge ind på dit WordPress-websted, navigere til instrumentbrættet og klikke på Sider → Tilføj nyt. Du kan også føje koden til en allerede eksisterende side, hvor du vil have dine pristabeller vist.
Når WordPress-editoren er indlæst, skift til teksttilstand og indsæt følgende kode:
<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>
Koden er ret simpel: For det første opretter vi en div for at holde vores pristabel-kode og gøre det nemt at style dem med CSS. Derefter, siden vi opretter tre tabeller, er hver af dem pakket ind i en tredjedel kolonne. Den sidste del er selve tabellen, med tilføjede klasser for et header og prispunkt, som får dem til at skille sig ud fra resten af bordet.
Før du klikker på Udgiv eller opdater, skal du sørge for at erstatte teksten mellem [pre] <li> og </ li> [/ pre] tags med din egen og for at føje linket til din betalingsformular efter href-delen af linket .
Når du har erstattet alle oplysninger, skal du gå videre og klikke på Udgiv, hvis du oprettede en ny side eller Opdater, hvis du tilføjede tabellen til en eksisterende side.
Hvis du kigger på din side nu, vil du se, at prissætningstabellen ser meget ren ud. Lad os tilføje nogle styling til det.
Hvis du bruger et child theme som du skal tilføje følgende kode til dit dit child themes stylesheet eller til Custom CSS editoren.
Den første del af koden sørger for, at vores prissætningstabel vises i kolonner, og hvis du vil eller skal vise mere end tre tabeller, vil disse klasser tillade dig nemt at erstatte dem:
/* ## 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;
}
Den anden del af koden vil give den faktiske styling til tabellerne.
/* ## 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;
}
}
Vi tilføjede nogle enkle, grundlæggende styling til pristabellerne og stylede overskriften og prisen anderledes for at få dem til at skille sig ud. Vi tilføjede også en boks-skygge omkring midten af tabellen for at fremhæve den specifikke pakke. Endelig tilføjede vi nogle medieforespørgsler for at sikre, at tabellen er responsive.
Når du har indsat begge CSS-uddrag, skal du gå videre og klikke på Opdater Fil. Se nu på din side og sørg for, at alt vises, sådan som du vil have det.
Hvis du har spørgsmål om prissætningstabeller, eller hvis du har forslag til andre, så lad os vide i kommentarerne!
Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.
Skriv et svar