Master Addons
Prissætning

Prissætning Tabel Design: 10 Tips Med Eksempler (Elementor)

  • update 2. nov. 2026
  • vejledning
Prissætning tabel design tips: tre Elementor prissætning plan kort med den midterste plan fremhævet

Nøgle takeaways

  • Godt prissætningstabeldesign viser tre eller fire planer side om side, med en plan visuelt hævet over resten, så læseren har en standard at vælge.
  • En pristabel konverterer bedre, når hvert kort følger den samme rækkefølge: plannavn, hvem det er for, pris, faktureringsperiode, en kort funktionsliste og en knap.
  • Funktionsrækker skal være tre til seks ord hver; en række, der ombrydes til en anden linje, bremser læsningen og gør kortene ujævne.
  • En overstreget originalpris ved siden af salgsprisen giver læseren et anker, og Master Addons Pricing Table-widgetten har et Sale-switch til præcis det.
  • En månedlig og årlig skift har brug for to sæt kort; i Master Addons skifter Toggle Content-widgetten (Pro) mellem to gemte sektionsskabeloner.
  • På en telefon stables priskort i én kolonne, så den fremhævede plan skal sidde først eller anden, ikke tredje.

Prissætning tabel design beslutter, om en besøgende, der allerede ønsker dit produkt kan finde den rigtige plan i et par sekunder. Layoutet er enkel: en række kort, en pris hver, en knap hver. De beslutninger, der betyder noget er mindre end det: hvor mange planer, hvilken er hævet, hvad prisen ser ud, hvor længe hver funktion række kører, og hvad knappen siger.

Dette indlæg går gennem ti prissætning tabel design tips, hver vist på en reel tabel bygget med Pricing Table widget fra Master Addons for Elementor. Eksemplerne bruger opdigtede planer (Starter, Vækst, Agentur), så du kan kopiere strukturen uden at kopiere priserne. Hvor et tip har brug for en anden widget, såsom den månedlige og årlige skift, står der i indlægget hvilken og om det er i Pro-planen.

1. Vis tre planer, højst fire

Tre planer er prissætningstabellen design de fleste læsere kan sammenligne med et blik. To planer tvinger et ja eller nej beslutning. Fem eller flere planer gør tabellen til et regneark, og læseren begynder at rulle sidelæns på en bærbar computer og give op på en telefon.

Tre Elementor prissætning bordkort til Starter, Vækst og Agentur planer, med den midterste Vækst plan fremhævet
Tre planer bygget med prissætningstabel-widget. Det midterste kort hæves med Highlight Table-kontakten og et bånd.

Sæt den plan, du ønsker de fleste mennesker til at købe i midten. Folk læser en række fra venstre mod højre, men de bosætte sig på midten, som er også hvor øjet lander først på en telefon, når kortene stak. Hvis du sælger en Agency eller Enterprise plan med brugerdefinerede priser, holde det som et fjerde kort med en “Kontakt os” knap snarere end en separat tabel.

I Elementor er hvert kort en Pricing Table-widget, der er faldet i sin egen kolonne eller beholder. Tre widgets i en tre-kolonne container, hvert sæt til samme layout, giver dig tabellen ovenfor. Den Prissætning Tabel widget side har den fulde kontrolliste og fem live layouts.

2. Hæv en plan over resten

En fremhævet plan giver læseren en standard, og de fleste vil tage den. Højdepunktet gør tre ting på én gang: kortet er lidt højere eller løftet, knappen bruger accentfarven i stedet for konturstilen, og et bånd navngiver årsagen (“Mest populære”, “Bedste værdi”, “Anbefalet”).

Fremhævet Growth plan kort med en Mest populære bånd og en solid pink knap
Det fremhævede kort: bånd, hævet skygge og en solid knap. De to andre kort holder en konturknap.

Fremhæv præcis ét kort. To fremhævede kort annullerer hinanden. Vælg planen med den bedste margin til dig, der stadig passer til de fleste læsere, ikke den dyreste.

I widgetten Prissætningstabel skal du tænde Fremhæv tabel åbn derefter den i fanen Indhold bånd sektion for at indstille tekst, justering, position og rotation. Giv det fremhævede kort en anden knapfarve i fanen Stil, så det ikke er afhængigt af båndet alene.

3. Gør prisen til den største ting på kortet

Prisen bør være den største tekst på kortet, større end planens navn. Læsere scanner en pristabel for tallene først og læser planens navne for det andet, så et design, der gør navnet større end prisen, bremser dem.

Prissætning tabel header med en overstreget 69 dollar pris ved siden af salgsprisen på 49 dollars om måneden
En salgspris med den oprindelige pris slået igennem. Widgetten gør dette med Salgsafbryderen og et Oprindelig Pris felt.

Hold valutasymbolet og faktureringsperioden mindre end tallet. “$ 49” læser hurtigere end “49.00 USD om måneden”. Hvis du rabatter en plan, skal du vise den oprindelige pris overstreget ud for salgsprisen. Det overstregede nummer er et anker: 49 ser billigere ud, når 69 sidder ved siden af det, end det gør alene.

Widgetten har en Sale skift under Prissætning. Tænd for den, udfyld Oprindelig pris, og gennemstregningen vises automatisk. Vælg valutaen på listen, eller skriv dit eget symbol.

4. Navngiv planen efter køberen, ikke tieren

Plannavne fungerer bedst, når de fortæller læseren, hvem planen er for. “Starter, vækst, agentur” siger mere end “Grundlæggende, standard, Premium”, og en undertitel på én linje under hvert navn (“For ét websted”, “For små teams”, “For klientarbejde”) fjerner gættelsen.

Tre prissætningstabeloverskrifter med plannavne Starter, Vækst og Agentur og en en-linjers undertekst under hver
Plannavn plus en en-linjers undertekst, der siger, hvem planen er for.

Undgå navne, der har brug for funktionslisten for at give mening. Hvis en læser skal sammenligne rækker for at regne ud, hvilken plan der er “Standard”, er navnet mislykkedes. Undgå vittigheder og interne kodenavne af samme grund.

Prissætningstabel-widgetten har en navn og a Undertitel felt i sektionen Overskrift, plus et valgfrit ikon og tag. Undertitlen er det rigtige sted for “For små hold”.

5. Hold funktionsrækker korte og i samme rækkefølge

Hver feature række skal passe på én linje, tre til seks ord. Lange rækker ombrydes, kortene bliver ujævne, og læseren holder op med at sammenligne på tværs af planer, fordi rækkerne ikke længere er på linje.

To Elementor priskort side om side, venstre med syv lange indpakningsfunktioner og højre med fem korte rækker
Venstre: syv lange rækker, der ombrydes. Højre: den samme plan med fem korte rækker. Det højre kort læser om cirka en tredjedel af tiden.

Bestil rækkerne på samme måde i hvert kort, med rækkerne, der skifter mellem planer øverst (“1 site” vs “5 sites” vs “Ubegrænset sites”). Fem til syv rækker pr kort er nok. Hvis du har tyve funktioner, prissætningstabellen er det forkerte sted for dem: sætte de fem øverste her og link til en sammenligningstabel for resten.

Widgetens karakteristika repeater tager en tekst, et ikon og et valgfrit værktøjstip pr. række. Brug det samme ikon for hver inkluderet funktion og en anden (eller ingen) for funktioner, som en plan ikke indeholder, så det visuelle mønster matcher på tværs af kort.

6. Sæt detaljen i et værktøjstip, ikke i rækken

Et værktøjstip lader dig holde rækken kort og stadig besvare spørgsmålet “hvad omfatter det?”. Rækken siger “Alle widgets”; værktøjstippet siger “Hver widget og udvidelse”.

Prissætningstabel funktionsrække Alle widgets med en mørk værktøjstip boble over den læser Hver widget og udvidelse
Et værktøjstip på en funktionsrække. Rækken forbliver kort; detaljen vises på hover.

Brug værktøjstip til de to eller tre rækker, der genererer supportspørgsmål, ikke for hver række. Et kort, hvor hver funktion har en prikket understregning, ser ud som om det skjuler noget. Hold værktøjstiptekst til én sætning.

I widgetten Prissætningstabel har hver række i Repeateren Funktioner en Værktøjstip switch, et tekstfelt og en placeringsmulighed (øverst, nederst, venstre, højre).

7. En knap pr. kort, med et verbum på

Knappen er det eneste element på kortet, der gør noget, så giv det ét job og mærk det med et verbum. “Kom i gang”, “Start gratis prøveversion”, “Vælg vækst” virker alt sammen. “Send” og “Klik her” gør det ikke.

Prissætning bordfod med en lyserød Kom godt i gang knap og linjen Annuller når som helst under den
Knap plus en kort tillidslinje under den.

Under knappen fjerner en kort tillidslinje den sidste indsigelse: “Annuller når som helst”, “14-dages penge tilbage”, “Intet kort nødvendigt”. Hold det på fem ord og stak ikke tre af dem.

Widgetens Sidefod sektion har knapteksten, linket og en Yderligere info felt til tillidslinjen. Hvis du sælger med Easy Digital Downloads, har samme sektion en EDD-købsknap, der linker direkte til produktet. For et WooCommerce-produkt skal du linke knappen til produkt- eller kassesiden.

8. Tilføj en månedlig og årlig skift kun, når besparelsen er værd at vise

En månedlig og årlig skift giver mening, når årlig fakturering sparer læseren for et klart beløb, normalt to måneder eller mere. Hvis den årlige rabat er lille, tilføjer skiftet et trin uden at ændre beslutningen, og en enkelt “faktureret årlig” linje gør det samme job.

Månedlig og årlig prissætning i Elementor med månedligt udvalgt, der viser tre planer til 29, 89 og 260 dollars om måneden
Skiftet indstillet til Månedlig. Tre kort, en pris hver.
Den samme Elementor-prisskifte skiftede til årlig, hvor planpriserne faldt til 24, 74 og 217 dollars om måneden
Den samme skift sat til Årlig. Det andet sæt kort viser den årlige pris pr. måned.

Vis den årlige pris pr. måned (“$39 / måned, faktureres årligt”) i stedet for den fulde årlige total, så de to skiftetilstande sammenligner lignende for lignende. Sæt besparelsen ved siden af skiftet (“Spar 20%”), så læseren ved, hvorfor kontakten eksisterer, før de klikker på den.

Prissætningstabel-widgetten holder én pris pr. kort, så skiften kommer fra en anden widget. Byg et sæt kort med månedlige priser og et med årlige priser, gem hver som en sektionsskabelon, og sæt begge i Skift indholdswidget, som er i Master Addons Pro-planen. Siden Toggle Content har opsætningstrinnene og et liveeksempel.

9. Vælg et layout, der matcher siden, og behold det derefter

Layoutet af en prissætningstabel skal matche sektionen omkring den: et almindeligt kort på en ren SaaS-side, en afrundet overskrift på et blødere mærke, et baggrundsbillede, når resten af siden bruger fotografering. Vælg en og brug den til hvert kort i tabellen.

Fem Elementor-prissætningstabellayout fra Master Addons-widgetten: Standard, Venstrejustering af indhold, Afrundet tabel, Tabel med BG-billede og Skævt BG-mønster
De fem layouts i prissætningstabel-widgetten med det samme planindhold i hver, så kun layoutet ændres.

Blanding af layout inde i en tabel er en almindelig fejl. Læseren læser forskellen i form som en forskel i planerne. Hold farverne begrænset også: en accentfarve til det fremhævede kort, en neutral for resten.

Prissætningstabel-widgetten har fem layouts i opsætning dropdown (Standard, Venstrejustering af indhold, Afrundet tabel, Tabel med BG-billede og Skæv BG-mønster), og indholdet forbliver på plads, når du skifter mellem dem. Den Skabelonbibliotek har prissætning sektioner bygget på disse layouts, hvis du hellere vil starte fra et færdigt design.

10. Kontroller tabellen på en telefon, før du udgiver

På en telefon stables kortene i én kolonne, så læseren ser én plan ad gangen og ruller forbi de andre. Det ændrer to beslutninger: Hvilket kort kommer først, og hvor højt hvert kort er.

Et enkelt Elementor prissætning bordkort, som det vises på en telefon, stablet fuld bredde med planen, prisen, fem funktioner og knappen
Et priskort på en 390 px bred telefon. Hvert kort tager en fuld skærm, så orden og højde betyder mere end på skrivebordet.

Sæt den fremhævede plan først eller anden på mobilen. Hvis den sidder tredje på skrivebordet, skal du bruge Elementors responsive bestilling på beholderen til at flytte den op. Hold funktionslister til fem rækker, så et kort passer i omtrent én skærm, og gør knappen bred nok til at trykke på.

Åbn Elementor responsive mode (telefonikonet nederst i panelet), og kontroller tabellen ved mobilens breakpoint. Prissætningstabel-widgetens Style-fane-kontroller har responsive switches, så du kan formindske prisskrifttypen og polstringen på telefoner uden at ændre skrivebordsversionen.

Vil du have alle ti tips i én widget? de Prissætning Tabel widget har højdepunktskontakten, båndet, salgsprisen, funktionsværktøjstip og fem layouts som panelkontroller, så hvert tip ovenfor er en indstilling snarere end brugerdefineret CSS.

Ofte stillede spørgsmål

Hvor mange planer skal en prissætningstabel have?

Tre er det sikreste nummer, og fire fungerer, når en plan har brugerdefinerede priser. To planer tvinger et ja eller nej valg, og fem eller flere stopper montering side om side på en bærbar skærm og bliver til en lang rulle på en telefon.

Hvilken plan skal fremhæves i en prisfastsættelsestabel?

Fremhæv den plan, der passer til de fleste læsere og stadig har en god margin til dig, normalt den midterste. Hæv den med en skygge, en solid knap og et bånd som “Mest populære”. Fremhæv kun ét kort; to fremhævede kort annullerer hinanden.

Hvordan tilføjer jeg en månedlig og årlig skift til en Elementor-prissætningstabel?

Byg to sæt priskort, et med månedlige priser og et med årligt, og gem hver som en sektionsskabelon. Toggle Content-widgetten i Master Addons Pro viser en skabelon ad gangen bag en switch. Prissætningstabel-widgetten selv holder én pris pr. kort.

Skal en prissætningstabel vise den oprindelige pris overstreget?

Ja, når en plan er nedsat. En overstreget original pris ved siden af salgsprisen giver læseren et anker, og salgsprisen ser lavere ud, end den gør alene. I Master Addons Pricing Table-widgeten gør Salgskontakten og feltet Oprindelig pris dette.

Hvordan gør jeg pristabelkolonner i samme højde i Elementor?

Sæt kortene i én beholder og sæt dens Align Items to Stretch, og giv derefter hver plan det samme antal funktionsrækker. Rækker, der ombrydes til to linjer, er den sædvanlige årsag til ujævne kort, så forkort teksten, før du justerer polstring.

Endelige Tanker

Prissætning tabel design kommer ned til en kort liste: tre planer, en hævet, prisen som den største tekst, plan navne, der siger, hvem planen er for, feature rækker, der passer til en linje, værktøjstip til detaljen, en knap med et verbum, en skifte kun, når den årlige besparelse er reel, et layout pr tabel, og en check på en telefon. Hver af de ti eksempler ovenfor blev bygget med Pricing Table widget og et par panel indstillinger.

Hvis du starter fra bunden, skal du åbne Prissætning Tabel widget side for at se de fem layouts live, eller vælg en færdig prissektion fra Skabelonbibliotek og ændre planerne. Widgetten er en af de widgets og udvidelser i Master Addons, og Toggle Content-widgetten til faktureringskontakten er i planerne på prissætning side.

Billede af Roy Jemee
Roy Jemee
Jeg er Roy Jemee, Content Wrangler og Marketer hos Pixar Labs, der arbejder på Master Addons for Elementor. Jeg skriver tutorials, optager videoerne og holder dokumentationen aktuel, så du altid ved, hvordan du bruger hver funktion. Jeg håndterer også support, så hvis du rammer en hage, er jeg den person, der hjælper dig med at rette det. Rigtige svar, fra en person, der bruger disse værktøjer hver dag.