Nøgle takeaways
- Master Addons Pricing Table-widgetten sender fem Elementor-prissætningstabelskabeloner som et layout-dropdown: Standard, Venstrejusteringsindhold, Afrundet tabel, Tabel med BG-billede og Skæv BG-mønster.
- Hvis du skifter layout-rullemenuen, holdes planens navn, pris, funktioner og knap på plads, så ét sæt indhold kan forhåndsvises i alle fem designs på under et minut.
- Master Addons Template Library har færdige prissektioner, herunder mørke, to-plans, fire-plans og faktureringsskiftedesign, der importeres til enhver Elementor-side fra editoren.
- Hvert eksempel på pristabel på denne side følger den samme rækkefølge: plannavn, hvem det er for, pris og periode, tre til syv funktionsrækker, en knap og en valgfri tillidslinje.
- En mørk pristabel læser bedst med én lys accent kun på den fremhævede plan; eksemplerne nedenfor bruger grøn, cyan eller pink til det enkelte kort.
- En månedlig og årlig switch på en prissektion kræver to sæt kort og Toggle Content-widgetten fra Master Addons Pro.
En Elementor prissætning tabel skabelon sparer dig den del af jobbet, der tager længst: designbeslutningerne. Widget layoutene nedenfor giver dig en kortform i et klik, og de færdige sektioner giver dig en hel prissætning blok med overskrift, switch og kort allerede arrangeret. Uanset hvad du erstatter planen navne, priser og funktioner og holde designet.
Denne side samler tolv eksempler på pristabel bygget med Master Addons for Elementor. De første fem er widgetens egne layouts med de nøjagtige indstillinger, der bruges, så du kan gengive hver enkelt. De næste syv er sektioner fra Skabelonbiblioteket, valgt til at dække de fælles prissideformer: tre planer, to planer, fire planer, mørke, lys og en faktureringskontakt.
Indholdsfortegnelse
Sådan bruger du disse skabeloner
Der er to slags skabeloner på denne side. Eksempel 1 til 5 er widget layouts: drop the Prissætning Tabel widget i en beholder skal du vælge layoutet fra dropdownen og kopiere indstillingerne, der er angivet under hvert eksempel. Eksempel 6 til 12 er hele sektioner: åbn Skabelonbibliotek, importere sektionen, og redigere teksten på plads.
De indstillinger, der er angivet for hvert layout, er dem, der ændrer udseendet. Alt andet er som standard. Farver er angivet som hex-værdier, så du kan indsætte dem i fanen Stil, og alle fem layoutkort bruger det samme indhold: en $ 29 plan med tre funktioner og en “Kom i gang” knap.
De fem Pricing Table widget layouts
1. Standard
Standardlayoutet er det, der skal startes med. Overskriften er centreret, prisen sidder under navnet, og funktionerne og knappen følger i kroppen. Det virker for enhver plantælling og er det sikreste valg for en tre-kolonne række.
- Layout: forsømmelse
- Overskrift farveskema: Brugerdefineret, gradient fra # 6938EF til # B497FF ved 135 grader
- Overskrift og prisfarve: #FFFFFF; undertitel og punktum: #E4DBFF
- Funktionsikon: check, #6938EF; funktionstekst: #1A1033
- Knap: baggrund #F1EEFF, tekst #6938EF, radius 6 px
- Yderligere info: “Annuller når som helst”, #6B7280
2. Venstre Juster indhold
Left Align Content flytter navnet, prisen og funktionerne til venstre kant. Det læser hurtigere, når plannavnene er lange, eller når kortet sidder ved siden af et afsnit med tekst, og det matcher prissider i redaktionel stil, hvor alt andet efterlades justeret.
- Layout: Venstrejuster indhold
- Alle farver som i Default
- Knapjustering: venstre, med 24 px venstre polstring på sidefoden
3. Afrundet Tabel
Afrundet tabel sætter prisen inde i en stor cirkel i overskriften, hvilket gør tallet til det første, nogen ser. Det har brug for en højere overskrift, så giv det samme funktionstælling på hvert kort, ellers vil rækken se ujævn ud. Den gule understregning på funktionsrækker er en del af layoutet.
- Layout: Afrundet tabel
- Header gradient som i Standard; cirkel gradient fra #F50A7F til #FF6FB1 ved 135 grader, eller lad det være på standard farvetone
- Funktioner tekst: #1A1033, understregning farve #FFD600 (layout standard)
4. Tabel med BG Image
Tabel med BG Image fylder hele kortet med et billede, gradient, video eller diasshow, med overskriften og funktionerne flydende ovenpå. Det passer til én fremhævet plan eller en prisside for et visuelt produkt. Funktionspanelet har brug for en mørk semi-transparent baggrund, så teksten forbliver læsbar på ethvert foto.
- Layout: Tabel med BG Image
- Baggrund: Billede, position center center, størrelse cover
- Funktioner baggrund: rgba(20, 10, 45, 0.6); funktioner tekst: #FFFFFF
- Header gradient som i Standard, med 70 procent opacitet, så billedet viser igennem
5. Skævt BG Mønster
Skæv BG Pattern skærer overskriften i en vinkel og tilføjer to hvide striber, som giver kortet bevægelse uden et billede. Brug en accentfarve; en gradient kæmper med striberne. Det er det layout, der oftest vælges til et enkelt kort på en landingsside.
- Layout: Skævt BG Mønster
- Overskrift farveskema: Brugerdefineret, solid #6938EF
- Kortradius: 20 px; kortbaggrund #FFFFFF
- Funktion understregning på, knap som i Standard
6. Tre planer med et fremhævet midterkort
Standard SaaS prissætning række: tre Prissætning Tabel widgets i en tre-søjle container, den midterste hævet. Den hævede kort bruger Highlight Table, et bånd læser “Mest populære”, en solid lyserød knap i stedet for omridset, og Salget skifte med $69 som den oprindelige pris og $49 som den nuværende. De ydre kort bruger den lysere kropsfarve, så den midterste står frem.
- Beholder: tre børnebeholdere i 31,5 procent bredde, mellemrum 28 px, Juster varer: Stræk
- Midterste kort: Fremhæv Tabel på; bånd “Mest populære”, lodret 18, vandret -10; knap baggrund #F50A7F, tekst #FFFFFF
- Ydre kort: krop baggrund #F6F5FA; midterste kort: #FFFFFF med en 0 24px 60px rgba(105, 56, 239, 0.28) skygge
7. Mørk fire-plan prissætning tabel
Fire planer på en sort baggrund, med en enkelt lime accent på den fremhævede plans kant og tag. Funktionerne er identiske på tværs af kort, hvilket er et bevidst valg: Forskellen mellem planer er kun pris, og læseren er beregnet til at vælge efter budget. Knapperne bruger Creative Button widget, så hover-effekterne kommer fra den widget snarere end brugerdefineret CSS.
Brug denne skabelon, når planerne adskiller sig efter grænser frem for funktioner. Fed funktionstekst på det første kort og almindelig tekst på de andre er det eneste visuelle hierarki, så hold det sådan.
8. Mørk SaaS prissætning med en brugerdefineret plan
Fra Finix skabelon kit, dette afsnit viser, hvordan man håndterer en plan uden en fast pris. Det tredje kort udskriver “Brugerdefineret” hvor nummeret ville være og bytter knappen tekst til “Tal med os”. En en-line beskrivelse under hver pris forklarer, hvem planen er for, og en fodnote under rækken dækker fakturering og den årlige rabat i én sætning.
De svage koncentriske cirkler bag kortene er et sektionsbaggrundsbillede, ikke en del af widgetten. Erstat billedet eller fjern det, og kortene forbliver, som de er.
9. To-plan lys prissætning tabel
To planer er en ja eller nej beslutning, så dette layout gør det betalte kort umuligt at gå glip af: hele kortet er fyldt med accentfarven og knappen inverteres til mørk. Grå check ikoner på de grundlæggende kortmærke funktioner, der ikke er inkluderet, som lader begge kort holde de samme fire rækker.
Brug dette, når der er et gratis niveau og et betalt niveau. Med tre eller flere planer bliver fuldfarvekortet for højt.
10. Prissætning kort med en fakturering switch
Denne sektion har den månedlige og årlige skift allerede bygget. Skiftet er Toggle Content widget fra Master Addons Pro, og hver stat indlæser en gemt prisrække. Kortene udskriver “faktureret månedligt” eller “faktureret årligt” under prisen, så læseren ved, hvilken tilstand der vises. Importer det, åbn Skabeloner > Gemte skabeloner, og rediger de to prissætningsrækker der. For at bygge det samme fra bunden, inklusive skabelonfangsten af sektionstypen, skal du følge månedlig og årlig skifteguide.
11. Fire-plan sammenligning med funktion flåter
Når planer adskiller sig efter funktioner snarere end grænser, lader afkrydsninger og kryds læseren scanne ned en kolonne. Forbi omkring syv rækker, en sammenligningstabel gør dette job bedre end kort. Alle fire kort bærer de samme syv rækker i samme rækkefølge, og ikonet ændres pr. plan. Den fremhævede plan er fyldt med accentfarven, med en hvid knap, og sidder på tredjepladsen i stedet for på andenpladsen, fordi siden forventer, at de fleste læsere vælger det højere niveau.
12. Mørk prissætning med en månedlig og årlig skift
En mørk sektion med lyse kort er det omvendte af eksempel 7, og det gør kortene til det lyseste på siden. Skiftet sidder mellem overskriften og kortene, per-bruger-noten under hvert plannavn sætter forventninger, og “Intet kreditkort påkrævet” under hver knap fjerner den sidste indvending. De dekorative former i hjørnerne er sektionsbaggrundselementer.
Sådan importeres en prissætning sektion
- Åbn siden i Elementor, og klik på skabelonikonet Masteraddons i editoren, eller åbn Skabeloner > Masteraddonsskabeloner.
- Søg “prissætning”, forhåndsvisning af afsnittet og klik på Importer. Sektioner bygget med Pro widgets har brug for Master Addons Pro aktiv.
- Afsnittet lander, hvor din markør var. Rediger hvert korts tekst i panelet; designet bliver.
- For sektioner med en skift skal du redigere de to prissætningsrækker under Skabeloner > Gemte skabeloner.
de skabelon import guide dækker editor-knappen, skærmbilledet Importer sider og hvad der sker med den importerede kopi.
Vil du have alle fem layouts uden at importere noget? de Prissætning Tabel widget har dem i én dropdown, og den Skabelonbibliotek har de fulde afsnit vist ovenfor.
Ofte stillede spørgsmål
Har Elementor skabeloner til prisfastsættelsestabel?
Elementors skabelonbibliotek har prisblokke til Pro-brugere, og dets Price Table-widget er Pro også. På gratis Elementor kommer prisskabeloner fra en tilføjelse: Master Addons Pricing Table-widgetten har fem layouts, og dens Template Library har fulde prissektioner.
Hvor mange planer skal en skabelon til prissætningstabel have?
Tre er det sikreste nummer, og fire fungerer, når en plan er et brugerdefineret eller enterprise tier. Eksemplerne ovenfor viser to, tre og fire planer; forbi fire, side-by-side kort stopper montering på en bærbar skærm.
Kan jeg ændre layoutet efter at have bygget bordet?
Ja. Dropdownen Layout i widgetten Master Addons Pricing Table skifter mellem de fem designs og holder planens navn, pris, funktioner og knap på plads. Kun de stilindstillinger, der hører til et layout, såsom cirklen eller skævheden, ændres.
Hvordan laver jeg en mørk prissætningstabel i Elementor?
Indstil sektionens baggrund til sort eller mørk navy, giv hvert kort en mørkegrå krop med en lysere kant på én pixel, og brug én accentfarve til det fremhævede korts kant, mærke og knap. Eksempel 7, 8, 10 og 12 ovenfor viser fire versioner af dette.
Er eksemplerne på pristabellen lydhøre?
Ja. Kortene stables i én kolonne på telefoner. Sæt den fremhævede plan først eller anden i containerrækkefølgen til mobil, hold funktionslister på omkring fem rækker, og kontroller tabellen ved det mobile brudpunkt i Elementors responsive tilstand, før du udgiver.
Endelige tanker
De tolv skabeloner kommer ad to veje. De fem widgetlayout dækker kortformen og tager en dropdown-ændring hver. De syv bibliotekssektioner dækker sideformerne: tre planer med en fremhævet midterste, mørk fireplan, SaaS med et brugerdefineret niveau, toplanslys, en faktureringskontakt, fireplans flueben og kryds og mørk med lyskort. Hver enkelt beholder den rækkefølge, der virker: navn, hvem det er til, pris, en kort funktionsliste, en knap.
Start med layoutet eller sektionen tættest på dine planer på Prissætning Tabel widget side, ændre teksten, og kontrollere det på en telefon, før det går live.
Relateret læsning
- Prissætning Tabel Design: 10 Tips Med Eksempler
- Master Addons skabelonbibliotek
- Elementor skabelonsæt
- Elementor Sektionsskabeloner
- Prissætning Tabel widget dokumentation
- Sådan tilføjes en månedlig og årlig skift til en elementorpristabel
- Elementor prissætningstabel vs sammenligningstabel: Hvilken skal man bruge
- Sådan opbygger du en prisliste eller menu i Elementor
