Wichtige Erkenntnisse
- Ein Elementor-Preisschalter besteht aus zwei Teilen: zwei Sätzen von Preistabellen, einer monatlichen und einer jährlichen, und einem Switch-Widget, das jeweils einen Satz anzeigt.
- Das Preistabellen-Widget von Elementor Pro verfügt über keinen monatlichen und jährlichen Switch, sodass der Umschalter von einem Content-Toggle-Widget oder von Preistabellen im Tabs-Widget stammt.
- Das Master-Add-ons-Inhalts-Widget umschalten lädt in jede Option eine gespeicherte Vorlage, indem es die auf Vorlage eingestellte Typsteuerung und einen Vorlagentyp des Abschnitts, der Seite oder des Widgets verwendet.
- Speichern Sie auf Elementor-Sites, die Container verwenden, jeden Satz von Preistabellen als Seitenvorlage, da die Abschnittsliste in Toggle Content nur Vorlagen anzeigt, die mit dem Abschnittstyp gespeichert wurden.
- Die Einstellung Active Index in Toggle Content entscheidet, welchen Abrechnungszeitraum Besucher zuerst sehen, wobei 1 für die erste Option und 2 für die zweite Option gilt.
Um einen Elementor-Preisumschalter hinzuzufügen, erstellen Sie Ihre Monatspläne und Ihre Jahrespläne als zwei gespeicherte Vorlagen und laden Sie dann beide in ein Content-Umschalter-Widget. Besucher klicken monatlich oder jährlich und die Preise tauschen sich aus. Die Seite bleibt einen Bildschirm groß und niemand muss sechs Preisspalten gleichzeitig lesen.
Dieses Tutorial verwendet die Preistabelle und Inhalte umschalten Widgets von Master Addons, und es endet mit einer No-Addon-Route durch das Tabs-Widget Alles wurde auf Elementor 4.3 getestet.
Inhaltsverzeichnis
Was Sie brauchen, bevor Sie beginnen
Sie benötigen Elementor, ein Preistabellen-Widget und ein Widget, das Inhalte umschaltet Elementor Pro hat ein Preistabellen-Widget, aber weder Elementor noch Elementor Pro haben den Switch.
- Preistabellen In diesem Leitfaden wird die Preistabellen-Widget Von Master Addons. Elementor Pro's Preistabelle oder einfache Behälter mit Überschriften funktionieren auch.
- Der Switch Das ist Toggle Content, der Teil von Master Add-dons Pro.
- Ihre Preise Entscheiden Sie zuerst den Jahresrabatt Zwei Monate frei, das sind etwa 17 Prozent, ist eine häufige Wahl.
So fügen Sie einen Preisschalthebel in Elementor hinzu
Der gesamte Build umfasst fünf Schritte: Erstellen Sie die Monatspläne, speichern Sie sie, erstellen Sie die Jahrespläne, speichern Sie diese und verbinden Sie dann beide mit dem Kippschalter.
Schritt 1: Erstellen Sie die Monatspläne
Erstellen Sie eine neue Seite, oder öffnen Sie einen leeren Entwurf, und bearbeiten Sie ihn mit Elementor Fügen Sie einen Container mit drei Spalten hinzu und ziehen Sie jeweils ein Widget für die Preistabelle aus Füllen Sie den Plannamen, den Preis, den Abrechnungstext und die Featureliste ein.
Bauen Sie einen Plan vollständig auf, duplizieren Sie ihn dann zweimal und ändern Sie die Details. Das hält die Funktionsreihen aufgereiht Schalten Sie ein Highlight-tabelle? und das Band für den Plan, den die Leute auswählen sollen.
Schritt 2: Speichern Sie die Monatspläne als Vorlage
Klicken Sie auf den Pfeil neben der Schaltfläche Veröffentlichen und wählen Sie Als Vorlage speichern. Nennen Sie es monatliche Preispläne und speichern Sie es.
Durch das Speichern auf diese Weise wird eine Seitenvorlage erstellt Das ist wichtig, denn Toggle Content listet Vorlagen nach Typ auf Seine Abschnittsliste zeigt nur Vorlagen, die mit dem Abschnittstyp gespeichert wurden Auf einer Seite, die Container verwendet, wird durch Rechtsklick auf einen Container und Speichern eine Containervorlage erstellt, und die eine wird nicht in der Abschnittsliste angezeigt Eine Seitenvorlage wird immer unter Seite angezeigt.
Schritt 3: Erstellen und speichern Sie die Jahrespläne
Bleiben Sie beim gleichen Entwurf. Ändern Sie jeden Preis auf den Jahrespreis und ändern Sie den Abrechnungstext auf Abgerechnet jährlich. Verwenden Sie dann erneut Speichern als Vorlage und benennen Sie diesen einen Jahrespreisplan.
Sie haben nun zwei Vorlagen mit gleichem Layout und unterschiedlichen Nummern, Sie können die Entwurfsseite löschen.
Schritt 4: Hinzufügen von Toggle-Inhalten und Verbinden der Vorlagen
Öffnen Sie Ihre echte Preisseite in Elementor. Durchsuchen Sie das Widget-Panel nach Inhalte umschalten Und ziehen Sie es dorthin, wo die Pläne erscheinen sollen Wenn Sie noch keine Preisseite haben, beginnen Sie mit einer dieser Vorlagen für Elementor-Preisseiten.
- In der Elemente Liste, klicken Sie auf das erste Element und ändern Sie es Etikett Monatlich.
- Einstellen Typ zu Vorlage.
- Einstellen Vorlagentyp zu Seite.
- in Seite wählenWählen Sie monatliche Preispläne aus.
- Klicken Sie auf den zweiten Artikel, beschriften Sie ihn als Jährlich und wählen Sie die jährlichen Preispläne auf die gleiche Weise aus.
Aktualisieren Sie die Seite und öffnen Sie sie am Frontend Klicken Sie auf Jährlich und die drei Tabellen ändern sich zu den Jahrespreisen.
Schritt 5: Legen Sie die Standardoption fest und gestalten Sie den Schalter
Offen Einstellungen umschalten Im Reiter Inhalt. Aktiver Index Wählt die Option aus, die anzeigt, wann die Seite geladen wird, 1 für Monatlich und 2 für Jährlich. Position Stellt den Schalter vor oder nach den Tischen, und Anzeigedrehzahl Legt fest, wie schnell das Highlight gleitet, standardmäßig 0,3 Sekunden.
Dann gehen Sie auf den Reiter Stil. Die Schalter Der Abschnitt hat die Schalterform (rund oder quadratisch), die Hintergrundfarbe, die Ausrichtung und den Zoom für Größe und Breite. In den Abschnitten Anzeige und Etiketten darunter werden die Hervorhebungsfarbe und die Etikettenfarben für den normalen und aktiven Zustand festgelegt.
Brauchen Sie zuerst die Tische? Die Widget der Elementorpreistabelle Seite zeigt seine fünf Layouts, Bänder, Verkaufspreise und Feature-Tooltips.
Video-tutorial
Dieses Video zeigt, wie das Toggle Content Widget hinzugefügt und im Elementor-Editor eingerichtet wird.
Ein Preis-Toggle ohne Addon
Sie können einen Preisschalter mit dem eigenen Elementor bauen Tabs Widget(denn jeder Tab akzeptiert jedes beliebige Widget darin Besucher sehen zwei Tab-Titel, bei denen ein Addon einen Schiebeschalter anzeigt, und die Preise werden auf die gleiche Weise ausgetauscht.
- Ziehen Sie die Tabs Widget auf die Seite und löschen Sie den dritten Tab.
- Benennen Sie die beiden Registerkarten Monatlich und Jährlich um.
- Klicken Sie auf die Registerkarte Monatlich und erstellen Sie Ihre Preisspalten innerhalb des Inhaltsbereichs.
- Duplizieren Sie diesen Container in die Registerkarte Jährlich und ändern Sie die Preise.
- Zentrieren Sie im Style-Tab die Tab-Titel und runden Sie ihre Ecken ab, sodass sie als Schalter gelesen werden.
Der Kompromiss ist die Pflege Beide Tabellensätze leben auf der Seite selbst, so dass der Editor lang wird, und man kann nicht dieselben Sätze auf einer anderen Seite so wiederverwenden, wie man es mit Vorlagen kann.
| Inhalte mit Vorlagen umschalten | Tabs Widget | |
|---|---|---|
| Sieht aus wie | Ein Schiebeschalter mit Anzeige | Zwei Tab-Titel |
| Wo die Tische wohnen | In gespeicherten Vorlagen | Innerhalb der Tabs auf der Seite |
| Wiederverwendung auf anderen Seiten | Ja, wählen Sie die gleichen Vorlagen aus | Kopieren und Einfügen des Widgets |
| Mehr als zwei Optionen | Ja, fügen Sie Artikel hinzu | Ja, Tabs hinzufügen |
| Bedürfnisse | Master Add-dons Pro | Nur Elementor |
Fünf Dinge, die einen Preisschalthebel zum Laufen bringen
Ein Preisumschalter hilft nur, wenn Besucher es in einer Sekunde verstehen Diese fünf Gewohnheiten decken das meiste ab.
- Sprich das Sparen in Worte “Jäh abgerechnet, zwei Monate frei” unter den Preis Ein Schalter allein sagt den Leuten nicht, warum jährlich besser ist.
- Halten Sie das Layout identisch Gleiche Pläne, gleiche Reihenfolge, gleiche Funktionszeilen in beiden Sätzen Nur die Zahlen sollen sich bewegen, wenn der Schalter umdreht.
- Wählen Sie die Standardeinstellung mit Absicht Aktiven Index auf den Abrechnungszeitraum setzen, den die meisten Menschen kaufen sollen.
- Überprüfen Sie es auf einem Telefon. Im Abschnitt Etikettenstil Stapel auf Beschriftungen mobil stapeln können, wenn diese nicht in eine Reihe passen.
- Der Switch speichert keine Auswahl Jeder Besuch startet auf der Standardoption, also zeigen Sie jeden Button auf den Checkout-Link für seinen eigenen Abrechnungszeitraum.
Layout - und Kopierhinweise auf den Tabellen selbst finden Sie in unserem Tipps zur Elementorpreistabelle. Wenn sich Ihre Pläne durch Merkmale mehr unterscheiden als durch den Preis, a Vergleichstabelle Unter dem Kipphebel hilft man, die Details zu überprüfen.
Häufig gestellte Fragen
Verfügt das Elementor Price Table-Widget über einen monatlichen und jährlichen Umschalter?
Nr. Das Widget der Preistabelle in Elementor Pro zeigt einen Preis pro Tabelle an und verfügt über keinen Abrechnungsschalter Um zwischen Monats - und Jahrespreisen umzuschalten, platzieren Sie zwei Tabellensätze im Inneren des Tabs-Widgets oder laden Sie sie in ein Content-Toggle-Widget aus einem Addon.
Kann ich ohne Plugin einen Preisschalter in Elementor hinzufügen?
Ja. Verwenden Sie das Tabs-Widget, benennen Sie die Tabs Monatlich und Jährlich und erstellen Sie innerhalb jeder Registerkarte eine Reihe von Preisspalten. Es zeigt Tab-Titel an, bei denen ein Addon einen Schiebeschalter anzeigt und Besucher immer noch einen Preissatz gleichzeitig sehen.
Warum fehlt meine gespeicherte Vorlage in der Inhaltsliste umschalten?
Toggle Content listet Vorlagen nach Typ auf Ein eigenständig gespeicherter Container wird als Container-Vorlage gespeichert, was die Section-Liste nicht anzeigt Speichern Sie das Layout mit Save as Template aus dem Pfeil Veröffentlichen, der eine Page-Vorlage erstellt, und setzen Sie Template Type to Page.
Kann der Preisumschalter drei Optionen haben, z. B. monatlich, jährlich und lebenslang?
Ja. Klicken Sie auf Element hinzufügen in der Elements-Liste von Inhalt umschalten und verbinden Sie eine dritte Vorlage Mit drei oder mehr Optionen klicken Besucher auf die gewünschte Beschriftung, und wenn Sie auf die aktive Beschriftung klicken, gelangen Sie zur nächsten.
Sieht Google beide Preisklassen?
Ja. Toggle Content druckt jede Option in der Seite HTML und zeigt eine nach der anderen an, also sind sowohl die monatlichen als auch die jährlichen Preise in der Quelle Machen Sie die Version, die Ihnen am meisten am Herzen liegt, zur Standardoption.
Letzte Gedanken
Ein Elementor-Preisschaltvorgang erfordert zwei gespeicherte Vorlagen und einen Schalter. Erstellen Sie die Monatspläne, speichern Sie sie als Seitenvorlage, wiederholen Sie sie für jährlich, laden Sie dann beide in Toggle Content und setzen Sie den aktiven Index.
Die Inhalts-Widget-Seite umschalten Live-Abrechnung Switch-Demo zum Klicken hat, bevor Sie Ihr eigenes.
Verwandte Lektüre
