Nøgle takeaways
- En Elementor-pristabelskift har brug for to sæt kort, et med månedlige priser og et med årlige priser og en kontrol, der viser et sæt ad gangen.
- Det gratis Elementor-plugin kan gøre det med Nested Tabs-widgetten: en fane pr. faktureringsperiode, en række priskort inden for hver fane uden tilføjelse.
- Widgetten Toggle Content i Master Addons Pro giver kontakten det udseende, folk forventer, en pille med månedlige og årlige etiketter og indlæser hvert sæt fra en gemt sektionsskabelon.
- Master Addons prissætningstabel-widgetten har én pris pr. kort og har ingen egen faktureringskontakt, så hver rute på denne side parrer den med en anden widget.
- Skabeloner, der er gemt fra en Elementor-beholder, gemmes som Container-typen, og sektionslisten Skift indhold viser kun sektions-typeskabeloner, så gem prissætningsrækken som en sektion.
- Vis årlige priser pr. måned med en “faktureret årlig” note, så de to skiftetilstande sammenligner lignende for lignende.
En Elementor prissætning tabel skifte er en switch over de planer, der vender hvert kort mellem månedlige og årlige priser. Elementor har ingen widget, der gør dette på egen hånd, og de fleste addon prissætning tabeller holde en enkelt pris pr kort, så skifte er altid bygget fra to dele: to sæt kort og noget, der viser et sæt ad gangen.
Denne vejledning bygger skiften på tre måder på de samme tre planer. Rute 1 bruger den gratis Elementor Nested Tabs-widget. Rute 2 bruger Toggle Content-widget fra Master Addons med to gemte sektionsskabeloner, som er den version, der ligner en rigtig faktureringskontakt. Rute 3 dækker widgets, der sendes med en indbygget switch, og hvad du giver op for bekvemmeligheden.
Indholdsfortegnelse
Hvordan en prissætning toggle fungerer i Elementor
En prisfastsættelse toggle er to komplette prissætning rækker og en kontrol, der skjuler en af dem. Når en besøgende klikker Årligt, den månedlige række er skjult, og den årlige række vises. Intet genberegner. Det er derfor, de månedlige og årlige kort kan bygges med enhver prissætning widget, herunder dem med en enkelt prisfelt.
Kontrollen er den del, der skifter mellem ruter. Indlejrede faner giver dig fane-knapper. Skift indhold giver dig en pillekontakt med en glidende indikator. En widget med en indbygget kontakt giver dig sin egen kontrol og sit eget kortdesign. Kortene nedenunder forbliver de samme i de to første ruter, så vælg kortene først og kontrolsekundet.
En regel gælder for hver rute: vis den årlige pris som et tal pr. måned med en note om, at det faktureres årligt. “$39 / måned, faktureres årligt” ved siden af “$49 / måned” lader læseren se besparelsen uden at lave aritmetik. En årlig total ved siden af en månedlig pris ser dyrere ud, selv når den er billigere.
Trin 1: byg de månedlige og årlige kort
Byg den månedlige række først, dupliker den derefter og skift priserne. I Elementor skal du tilføje en beholder med tre børnebeholdere side om side og slippe en Prissætning Tabel widget ind i hver. Indstil planens navn, undertekst, pris og punktum i fanen Indhold. Giv det midterste kort Fremhæv tabel og et bånd, så rækken har en standardplan.
Højreklik nu på den overordnede beholder og vælg Dubler. I kopien skal du åbne hvert kort og ændre prisen. For årlig fakturering skal du tænde Salgskontakten, indtaste den månedlige pris som den oprindelige pris og den årlige pr. månedspris som prisen, og indstille perioden til “/ måned, faktureret årligt”. Det overstregede månedlige tal gør salget.
Du har nu to rækker på siden. Rute 1 og 2 bestemmer, hvordan de vises en ad gangen.
Rute 1: Indlejrede faner (gratis elementor)
Widgetten Indlejrede faner i det gratis Elementor-plugin sætter en beholder inde i hver fane, så en hel prissætningsrække passer i et fanepanel. Den har brug for Flexbox Container-funktionen, som er slået til som standard på aktuelle Elementor-installationer.
- Træk Faner widget (den indlejrede, med containerikonet) på siden ovenfor, hvor prisen skal sidde.
- I fanen Indhold skal du omdøbe fanen #1 til Månedlig og fane #2 til Årligt. Slet den tredje fane.
- Træk den månedlige prisfastsættelsesbeholder ind i fanepanelet Månedlig og den årlige beholder ind i panelet Årlig. Brug Navigator (panelet lag), hvis dropmålet er svært at ramme.
- Indstil fanebladets titelvurdering i fanen Stil til midten, og giv den aktive fane din accentfarve.
Resultatet virker, og det koster ikke noget. Hvordan det ikke ser ud, er en faktureringskontakt. Faner læst som navigation, så nogle besøgende savner, at de årlige priser eksisterer. Du kan style de to fanetitler til en pilleform med kantradius og baggrundsfarver, som kommer tæt på. På telefoner bliver Nested Tabs til en harmonika under det brudpunkt, du indstiller, så kontroller, at panelet Månedlig er det, der er åbent som standard.
Rute 2: Skift indhold med to sektionsskabeloner
Widgetten Toggle Content viser et af flere stykker indhold bag en pillekontakt, og hvert stykke kan være en gemt Elementor-skabelon. To gemte prisrækker plus denne widget er en månedlig og årlig skift, der ligner dem på SaaS-prissider. Toggle Content er en del af Master Addons Pro.
Gem hver række som en sektionsskabelon
- Højreklik på håndtaget på den månedlige prisbeholder, og vælg Gem som skabelon.
- Nævn det “Prissætning månedligt” og gem. Gør det samme for den årlige beholder som “Prissætning årligt”.
- åbne lukke op Skabeloner > Gemte skabeloner i WordPress admin og tjek kolonnen Type.
Elementor gemmer en container som container type, og sektionslisten Toggle Content viser kun skabeloner af Section type, hvilket er grunden til trin 3 kontrollerer kolonnen. Hvis dine to skabeloner siger Container, vil “Vælg sektion” dropdown ikke vise noget. Rettelsen er at bygge rækken inde i en ældre sektion (Elementor > Indstillinger > Funktioner, eller tilføje en sektion fra Navigator), før du gemmer, eller at vælge Page som skabelontype i widgetten og gem rækkerne som sideskabeloner i stedet. Begge ruter virker; den Sektion et holder widgetens standardindstillinger.
Tilføj widgetten Toggle Content
- vod Skift indhold fra gruppen Master Addons over på den side, hvor prissætningen hører hjemme. Slet de to originale prisbeholdere, eftersom skabelonerne nu holder dem.
- I Elementer repeater, åbn det første element. Indstil etiketten til Månedlig, Skriv til Template, Skabelontype til Section, og vælg “Prissætning månedligt” under Vælg sektion.
- Åbn det andet element, indstil etiketten til Årligt og vælg “Prissætning årligt”.
- under Skift indstillinger, lad Active Index være 1, så Månedlige shows først, og indstil den aktive farve til din accent.
Forhåndsvis siden, og klik på Årlig. Den månedlige række glider ud, og den årlige række glider ind, hvor pilleindikatoren bevæger sig på tværs. Fanen Stil styrer pillestørrelsen, etiketfarverne og mellemrummet mellem kontakten og indholdet.
Widgetten sætter ikke den gemte skabelons eget stylesheet i kø, så hvis et kort ser ustillet ud på frontenden, skal du indstille dets farver i widgetkontrollerne i stedet for i skabelonens sideindstillinger eller rydde Elementor-cachen fra Elementor > Værktøjer. Hvis du redigerer en plan senere, skal du redigere den gemte skabelon under Skabeloner > Gemte skabeloner, ikke siden; siden refererer kun til den.
Rute 3: en prissætningswidget med indbygget switch
Nogle tilføjelser sender en prissætningswidget med en faktureringskontakt allerede inde i den, så du indtaster en månedlig pris og en årlig pris pr. kort, og widget'en trækker vippen. HT Mega har en Flip Switcher Pricing Table-widget, der fungerer på denne måde. De fleste andre, inklusive Essential Addons, Premium Addons, PowerPack og The Plus Addons, gør hvad Route 2 gør: en separat vippe- eller switcher-widget (Pro i hvert af disse plugins), der pakker to sæt kort. Prissætningstabel-widget-sammenligningslisterne, som planlægger hver vippe-widget, sidder i.
Master Addons Pricing Table-widgetten har ét prisfelt pr. kort og ingen indbygget switch, hvorfor denne guide parrer den med Toggle Content. Afvejningen med en indbygget switch er design: du er begrænset til den pågældende widgets kortlayout og dens switch-stil. Med to sæt kort forbliver hver kontrol i prissætningstabel-widgeten tilgængelig, inklusive de fem layouts, båndet og funktionsværktøjstip, og du kan ændre switchen uden at genopbygge kortene.
Hvis du vil have kontakten inde i en widget, skal du kontrollere tre ting, før du forpligter dig: om widgettens årlige pris kan vise det månedlige tal, der er slået igennem, om switch-etiketteksten kan redigeres, og hvordan kortene stables på en telefon.
Færdiglavede toggle prissætning sektioner
de Master Addons skabelonbibliotek har prissætning sektioner med toggle allerede kablet. “Fakturering Switch Pricing Cards” bruger Toggle Content med to prissætning rækker, og “Fakturering Toggle Pricing Tabs” gør det samme med faner, herunder en tre-årig mulighed. Importer en fra skabeloner > Master Addons skabeloner i editoren, og byt derefter planens navne, priser og funktioner. Prissætningstabel skabeloner indlægget har flere sektioner som disse, med indstillingerne bag hver enkelt.
Begge sektioner er bygget med Master Addons Pro-widgets, så de har brug for Pro-plugin'et aktivt for at importere.
Hvilken rute at vælge
| Hvis du | Brug | Hvorfor |
|---|---|---|
| Kør gratis Elementor og vil have det gjort i dag | Rute 1, Indlejrede faner | Ingen tilføjelse, og priskortene kan være en hvilken som helst widget. |
| Ønsker en switch, der ligner en fakturering skifte | Rute 2, Skift indhold | Pillekontakt, glidende indikator, skabeloner, du kan genbruge på andre sider. |
| Har tre faktureringsperioder eller mere | Rute 2 eller Rute 1 | Begge tager et vilkårligt antal genstande; en indbygget kontakt tager normalt to. |
| Ønsker de færreste widgets på siden | Rute 3, indbygget sporskifte | Én widget pr. kort, på bekostning af layoutvalg. |
Vil du have kontakten uden at bygge den to gange? de Skift indholdswidget viser enhver gemt skabelon bag en månedlig og årlig pille, så Prissætning Tabel kort beholder alle fem layouts, båndet og værktøjstipsene.
Ofte stillede spørgsmål
Har Elementor en prisfastsættelse widget?
Nej. Elementor Pro's Price Table widget holder én pris pr. kort og har ingen faktureringskontakt. Det gratis plugins Nested Tabs widget kan vise to prissætningsrækker som Månedlig og Årlig faner, hvilket er den nærmeste indbyggede mulighed.
Kan Master Addons-pristabellen skifte mellem månedligt og årligt alene?
Nej. Hvert Prissætningstabelkort har én pris, én original pris for salg og én periode. Byg en månedlig række og en årlig række, gem hver som en sektionsskabelon, og vis dem gennem Toggle Content-widgetten fra Master Addons Pro.
Hvorfor mangler min gemte skabelon i rullemenuen Toggle Content?
Elementor gemmer en beholder som skabelontypen Container, og rullelisterne Kun skabeloner af typen Sektionstype. Gem rækken fra en ældre sektion, eller indstil Skabelontype til Side i widgetten, og gem rækkerne som sideskabeloner.
Skal den årlige pris vise det samlede beløb eller beløbet pr. måned?
Vis beløbet pr. måned med en “faktureret årlig” note, og brug Salgskontakten til at slå igennem den månedlige pris. Læseren sammenligner derefter lignende med like og ser besparelsen på kortet i stedet for at beregne det.
Gør en prisfastsættelse skade SEO?
Nej. Begge rækker er i siden HTML, og den skjulte række er skjult med CSS, så søgemaskiner læser hver pris. Hold planens navne og priser som tekst frem for billeder.
Endelige tanker
En månedlig og årlig skift på en Elementor prissætningstabel er to prissætning rækker og en kontrol. Indlejrede Tabs giver dig kontrollen gratis og læser som faner. Toggle Content, i Master Addons Pro, giver dig en pille switch og indlæser hver række fra en gemt sektion skabelon, med den ene fangst, at skabelonerne skal være Section type. En widget med switchen indbygget gemmer et trin og koster dig layout valg.
Start med kortene på Prissætning Tabel widget side, som har en live toggle bygget præcis på denne måde, og tilføj derefter kontakten, der passer til din plan.
Relateret læsning
