So fügen Sie einer Elementorpreistabelle eine monatliche und jährliche Umschalttasche hinzu

Wichtige Erkenntnisse

• Ein Elementor-Preistabellen-Tobgle erfordert zwei Kartensätze, einen mit monatlichen Preisen und einen mit jährlichen Preisen, sowie einen Steuerelement, das jeweils einen Satz anzeigt.
• Das kostenlose Elementor-Plugin kann dies mit dem Nested Tabs-Widget tun: einem Tab pro Abrechnungszeitraum, einer Reihe von Preiskarten in jedem Tab, ohne Addon.
• Das Toggle Content-Widget in Master Addons Pro verleiht dem Switch das Aussehen, das die Leute erwarten, eine Pille mit Monats- und Jahresbeschriftungen und lädt jeden Satz aus einer gespeicherten Abschnittsvorlage.
• Das Master Addons Pricing Table Widget enthält einen Preis pro Karte und verfügt über keinen eigenen Abrechnungsschalter, sodass jede Route auf dieser Seite sie mit einem zweiten Widget koppelt.
• Aus einem Elementor-Container gespeicherte Vorlagen werden als Containertyp gespeichert, und die Abschnittsliste Inhalte umschalten zeigt nur Abschnittsvorlagen an, also speichern Sie die Preiszeile als Abschnitt.
• Zeigen Sie Jahrespreise pro Monat mit einem „abgerechneten Jahresvermerk“an, damit die beiden Kippzustände „Gefällt-mir-Gegen-Gegen-Gegenstände” mit Gefällt-Gegen-Gegen-Gleichheiten vergleichen.

Ein Elementor-Preistabellen-Toggle ist ein Schalter über den Plänen, der jede Karte zwischen monatlichen und jährlichen Preisen umdreht Elementor hat kein Widget, das dies alleine macht, und die meisten Addon-Preistabellen enthalten einen einzigen Preis pro Karte, sodass der Toggle immer aus zwei Teilen besteht: zwei Kartensätzen und etwas, das jeweils einen Satz anzeigt.

Diese Anleitung baut den Umschalter drei Wege auf denselben drei Plänen auf Route 1 verwendet das kostenlose Widget Elementor Nested Tabs. Route 2 verwendet das Widget Inhalt umschalten von Master-Addons Mit zwei gespeicherten Abschnittsvorlagen, das ist die Version, die wie ein echter Abrechnungsschalter aussieht Route 3 behandelt Widgets, die mit einem eingebauten Switch ausgeliefert werden und was Sie für den Komfort aufgeben.

Wie ein Preisschaltvorgang in Elementor funktioniert

Ein Preisschalthebel besteht aus zwei vollständigen Preiszeilen und einem Steuerelement, das eine davon verbirgt. Wenn ein Besucher auf Yearly klickt, wird die monatliche Zeile ausgeblendet und die jährliche Zeile angezeigt. Nichts berechnet sich neu. Deshalb können die Monats- und Jahreskarten mit jedem Preiswidget erstellt werden, auch mit einem einzigen Preisfeld.

Die Steuerung ist der Teil, der zwischen den Routen wechselt Verschachtelte Tabs gibt Ihnen Tab-Tasten Mit Toggle Content erhalten Sie einen Pillenschalter mit Schiebeanzeige Ein Widget mit eingebautem Schalter gibt Ihnen eine eigene Steuerung und ein eigenes Kartendesign Die Karten darunter bleiben auf den ersten beiden Routen gleich, also wählen Sie zuerst die Karten und die Steuersekunde aus.

Für jede Strecke gilt eine Regel: Zeigen Sie den Jahrespreis als Monatszahl mit dem Hinweis an, dass er jährlich abgerechnet wird “39 $ / Monat, jährlich abgerechnet” neben “49 $ / Monat” lässt den Leser die Ersparnis sehen, ohne zu rechnen Eine jährliche Gesamtsumme neben einem monatlichen Preis sieht auch dann teurer aus, wenn sie günstiger ist.

Schritt 1: Erstellen Sie die Monats- und Jahreskarten

Bauen Sie zuerst die monatliche Zeile, duplizieren Sie sie dann und ändern Sie die Preise. Fügen Sie in Elementor einen Behälter mit drei Kinderbehältern nebeneinander hinzu und lassen Sie einen fallen Preistabellen-Widget In jeden. Plannamen, Untertitel, Preis und Zeitraum im Reiter Inhalt festlegen Geben Sie die mittlere Karte Highlight Table und ein Menüband, damit die Zeile einen Standardplan hat.

Klicken Sie nun mit der rechten Maustaste auf den übergeordneten Container und wählen Sie Duplicate In der Kopie öffnen Sie jede Karte und ändern Sie den Preis, Schalten Sie für die jährliche Abrechnung den Sale-Schalter ein, geben Sie den monatlichen Preis als Originalpreis und den jährlichen Monatspreis als Preis ein, und setzen Sie den Zeitraum auf “/ Monat, jährlich abgerechnet” Die durchgestrichene monatliche Zahl macht den Verkauf.

Sie haben nun zwei Zeilen auf der Seite Die Routen 1 und 2 entscheiden, wie sie einzeln angezeigt werden.

Route 1: Verschachtelte Tabs (kostenloser Elementor)

Das Nested Tabs-Widget im kostenlosen Elementor-Plugin platziert einen Container in jeder Registerkarte, sodass eine ganze Preisreihe in ein Registerkartenfeld passt. Es benötigt die Flexbox-Container-Funktion, die bei aktuellen Elementor-Installationen standardmäßig aktiviert ist.

1. Ziehen Sie die Tabs Widget (das verschachtelte, mit dem Container-Symbol) auf die Seite oben, wo die Preise sitzen sollen.
2. Benennen Sie im Reiter Inhalt Tab #1 in um Monatlich und Tab #2 bis Jährlich. Löschen Sie die dritte Registerkarte.
3. Ziehen Sie den monatlichen Preiscontainer in das Registerkartenfeld Monat und den jährlichen Container in das Panel Jahrlich Verwenden Sie den Navigator (das Ebenenpanel), wenn das Abwurfziel schwer zu treffen ist.
4. Stellen Sie auf der Registerkarte Stil die Ausrichtung des Tab-Titels auf Mitte ein und geben Sie der aktiven Registerkarte Ihre Akzentfarbe.

Das Ergebnis funktioniert, und es kostet nichts Wie es nicht aussieht, ist ein Abrechnungsschalter Tabs als Navigation lesen, so dass einige Besucher übersehen, dass die jährlichen Preise existieren Sie können die beiden Tab-Titel in eine Pillenform mit Umrandungsradius und Hintergrundfarben stylen, die nahe kommt Bei Telefonen verwandelt sich Nested Tabs in ein Akkordeon unterhalb des von Ihnen festgelegten Haltepunkts, so dass überprüfen, ob das Monatsfeld dasjenige ist, das standardmäßig geöffnet ist.

Route 2: Schalten Sie Inhalte mit zwei Abschnittsvorlagen um

Das Widget Toggle Content zeigt einen von mehreren Inhalten hinter einem Pillenschalter an, und jedes Stück kann eine gespeicherte Elementorvorlage sein. Zwei gespeicherte Preiszeilen plus dieses Widget ist ein monatlicher und jährlicher Umschalter, der wie auf SaaS-Preisseiten aussieht. Toggle Content ist Teil von Master Add-dons Pro.

Speichern Sie jede Zeile als Abschnittsvorlage

1. Klicken Sie mit der rechten Maustaste auf den Griff des monatlichen Preiscontainers und wählen Sie Als Vorlage speichern.
2. Nennen Sie es “Preise monatlich” und sparen Sie. Machen Sie dasselbe für den Jahrescontainer wie “Preise jährlich”.
3. Offen Vorlagen > Gespeicherte Vorlagen Im WordPress-Admin und überprüfen Sie die Spalte Typ.

Elementor speichert einen Container als Container Typ, und die Abschnittsliste des Toggle Content Widgets zeigt nur Vorlagen der Abschnitt Typ, weshalb Schritt 3 die Spalte überprüft Wenn in Ihren beiden Vorlagen Container steht, wird im Dropdown “Abschnitt wählen” nichts angezeigt Der Fix besteht darin, die Zeile vor dem Speichern innerhalb eines Legacy-Abschnitts (Elementor > Einstellungen > Funktionen, oder einen Abschnitt aus dem Navigator hinzufügen) zu erstellen, oder zu wählen Seite Als Vorlagentyp im Widget und speichern Sie stattdessen die Zeilen als Seitenvorlagen Beide Routen funktionieren; der Abschnitt eins behält die Voreinstellungen des Widgets bei.

Fügen Sie das Inhalts-Widget umschalten hinzu

1. Ziehen Inhalte umschalten Von der Master Addons Gruppe auf die Seite, wo die Preisgestaltung hingehört Löschen Sie die beiden Originalpreiscontainer, da die Vorlagen sie nun halten.
2. In der Elemente Repeater, öffnen Sie den ersten Artikel Stellen Sie das Label auf MonatlichGeben Sie ein VorlageVorlagentyp zu Abschnitt„und wählen Sie „Montagepreise“unter Abschnitt „Wählen” aus.
3. Öffnen Sie das zweite Element und setzen Sie das Etikett auf Jährlich und wählen Sie “Preise jährlich”.
4. Unter Einstellungen umschaltenLassen Sie den aktiven Index bei 1, damit der monatliche Index zuerst angezeigt wird, und stellen Sie die aktive Farbe auf Ihren Akzent ein.

Vorschau der Seite und klicken Sie auf Jährlich Die monatliche Zeile gleitet heraus und die jährliche Zeile gleitet hinein, wobei sich die Pillenanzeige hinüber bewegt Die Registerkarte Stil steuert die Pillengröße, die Etikettenfarben und den Abstand zwischen dem Schalter und dem Inhalt.

Das Widget stellt das eigene Stylesheet der gespeicherten Vorlage nicht in die Warteschlange. Wenn eine Karte also auf dem Frontend ungestylt aussieht, legen Sie ihre Farben in den Widget-Steuerelementen und nicht in den Seiteneinstellungen der Vorlage fest oder löschen Sie den Elementor-Cache aus Elementor > Tools. Wenn Sie einen Plan später bearbeiten, bearbeiten Sie die gespeicherte Vorlage unter Vorlagen > Gespeicherte Vorlagen, nicht die Seite; Die Seite verweist nur darauf.

Route 3: ein Preis-Widget mit integriertem Switch

Einige Addons versenden ein Preis-Widget mit einem bereits darin befindlichen Abrechnungsschalter, sodass Sie einen monatlichen Preis und einen jährlichen Preis pro Karte eingeben und das Widget den Kippschalter zieht HT Mega verfügt über ein Flip Switcher Pricing Table-Widget, das auf diese Weise funktioniert Die meisten anderen, einschließlich Essential Addons, Premium Addons, PowerPack und The Plus Addons, tun das, was Route 2 tut: ein separates Kipp- oder Umschalter-Widget (Pro in jedem dieser Plugins), das zwei Kartensätze umschließt Die Vergleichslisten für Preistabellen-Widgets, die jedes Toggle-Widget planen.

Das Master Addons Pricing Table Widget hat ein Preisfeld pro Karte und keinen eingebauten Switch, weshalb diese Anleitung es mit Toggle Content koppelt Der Kompromiss mit einem eingebauten Switch ist Design: Man ist auf die Kartenlayouts dieses Widgets und seinen Switch-Stil beschränkt, mit zwei Kartensätzen bleibt jede Steuerung im Pricing Table Widget verfügbar, einschließlich der fünf Layouts, des Menübands und der Feature-Tooltips, und man kann den Switch wechseln, ohne die Karten neu zu bauen.

Wenn Sie den Switch in einem Widget haben möchten, überprüfen Sie drei Dinge, bevor Sie sich verpflichten: ob der Jahrespreis des Widgets die durchgestrichene Monatszahl anzeigen kann, ob der Switch-Label-Text bearbeitbar ist und wie sich die Karten auf einem Telefon stapeln.

Fertige Toggle-Preisabschnitte

Die Vorlagenbibliothek für Master-Ad Preisabschnitte mit dem Umschalter bereits verkabelt hat “Billing Switch Pricing Cards” verwendet Toggle Content mit zwei Preiszeilen, und “Billing Toggle Pricing Tabs” macht dasselbe mit Tabs, einschließlich einer Drei-Jahres-Option Importieren Sie einen von Templates > Master Addons Templates im Editor, dann tauschen Sie die Plannamen, Preise und Funktionen aus Der Beitrag zu Preistabellenvorlagen hat mehr Abschnitte wie diese, mit den Einstellungen hinter jedem.

Beide Abschnitte sind mit Master Addons Pro-Widgets erstellt, daher ist zum Importieren das Pro-Plugin aktiv.

Welche Route zu wählen

Möchten Sie den Schalter, ohne ihn zweimal zu bauen? Die Inhalts-Widget umschalten Zeigt jede gespeicherte Vorlage hinter einer Monats- und Jahrespille an, also die Preistabelle Karten behalten alle fünf Layouts, das Band und die Tooltips.

Häufig gestellte Fragen

Letzte Gedanken

Ein monatlicher und jährlicher Umschalter auf einer Elementor-Preistabelle besteht aus zwei Preiszeilen und einem Steuerelement. Nested Tabs gibt Ihnen die Kontrolle kostenlos und liest als Registerkarten. Toggle Content bietet Ihnen in Master Addons Pro einen Pillenschalter und lädt jede Zeile aus einer gespeicherten Abschnittsvorlage, mit dem einzigen Haken, dass die Vorlagen der Abschnittstyp sein müssen. Ein Widget mit integriertem Switch spart einen Schritt und kostet die Layoutauswahl.

Beginnen Sie mit den Karten auf der Widget-Seite der Preistabelle, bei dem ein Live-Toggle genau auf diese Weise erstellt wurde, und fügen Sie dann den Schalter hinzu, der zu Ihrem Plan passt.

Verwandte Lektüre

• Preisgestaltung Tischdesign: 10 Tipps mit Beispielen
• Inhalts-Widget umschalten
• Inhaltsdokumentation umschalten
• Dokumentation des Preistabellen-Widgets
• So erstellen Sie Registerkarten in Elementor