Wichtige Erkenntnisse
- Bei diesen 10 Inhaltsumschaltbeispielen für Elementor handelt es sich um Live-Demos, die mit dem Master Addons Toggle Content-Widget erstellt wurden und jeweils zwischen zwei Versionen desselben Abschnitts wechseln.
- Ein Content-Toggle funktioniert am besten, wenn beide Optionen ein gemeinsames Layout haben und sich nur die Details ändern, wie z. B. monatliche und jährliche Preise oder metrische und imperiale Maße.
- Die Preisgestaltung ist das häufigste Beispiel für den Umschalter von Inhalten, und zwei der zehn Demos sind Abrechnungsschalter, eines mit der Bezeichnung Monthly and Annual und eines mit der Bezeichnung Billed Monthly and Billed Yearly.
- Content-Toggles passen auch zu nicht preisbezogenen Inhalten, darunter Spec-Tabellen, Quartalsergebnisse, Mittag- und Abendessenmenüs sowie Nachrichten für zwei Zielgruppen.
- Jede Option im Toggle Content-Widget enthält Text vom Editor oder eine gespeicherte Abschnitts-, Seiten- oder Widget-Vorlage, sodass jedes Elementor-Layout hinter dem Switch platziert werden kann.
Die Content-Toggle-Beispiele für Elementor, die am besten funktionieren, zeigen auf beiden Seiten des Switches die gleiche Art von Content, die Pläne bleiben gleich und der Preis ändert sich Die Tabelle bleibt gleich und die Einheiten ändern sich Unten sind zehn Live-Demos, die dieser Regel folgen, mit dem, was jeder wechselt und wann man das Muster verwendet.
Alle zehn wurden mit gebaut Inhalte umschalten, das Content-Toggle-Widget in Master Addons Pro. Klicken Sie auf einen beliebigen Demo-Link, um den Switch selbst auszuprobieren.
Inhaltsverzeichnis
Was macht einen guten Content Toggle aus
Ein Content-Toggle lohnt sich, wenn ein Besucher eine von zwei Versionen benötigt und nie beide auf einmal, wenn die Leute beide Seiten zusammen lesen möchten, stellen Sie sie nebeneinander.
| Muster | Links Option | Richtige Option | Beispiel unten |
|---|---|---|---|
| Abrechnungszeitraum | Monatlich | Jährlich | 1, 2 |
| Einheiten | Metrisch | Kaiserlich | 4 |
| Datenumfang | Eigenbetrieb | Lieferkette | 5 |
| Publikum | Als Team | Auf eigene Faust | 7 |
| Zeitraum | Q3 | Q4 | 6 |
| Prozess | Auf Bestellung gemacht | Auf Lager | 8 |
| Kategorie | Wohn | Bürgerlich | 9 |
| Tageszeit | Mittagessen | Abendessen | 10 |
| Planumfang | Single | Unbegrenzt | 3 |
Preise schalten Beispiele um
Bei der Preisgestaltung treffen die meisten Menschen zum ersten Mal auf einen Content-Toggle. Zwei Abrechnungszeiträume haben die gleichen Pläne, sodass ein Switch die Anzahl der Karten auf der Seite halbiert.
1. Abrechnungsschalter Preiskarten
Über Starter-, Team- und Scale-Karten befindet sich ein Monats- und Jahresschalter. Auf Annual zeigt jede Karte den niedrigeren Monatssatz und eine Linie mit der jährlichen Gesamtsumme und der Ersparnis. Der mittlere Plan trägt auf beiden Seiten ein Most Chosen-Etikett.
Verwenden Sie es für: SaaS und Abonnementpreise. Öffnen Sie die Billing Switch-Demo.
2. Inhalte mit Preisen umschalten
Diese hier verwendet die Etiketten Abgerechnet Monatlich und Abgerechnet Jährlich über Persönliche und Startup-Pläne Jede Option enthält einen vollständigen Satz von Preistabellen, so dass die ganze Zeile mit einem Klick ändert.
Verwenden Sie es für: Preisseiten Gebaut aus Preise Tabelle Widgets. Öffnen Sie die Preisdemo.
3. Inhalt gerundet umschalten
Ein abgerundeter Schalter bewegt sich zwischen einem Single-Plan und einem Unlimited-Plan mit jeweils eigener Überschrift und Beschreibung, die beiden Seiten unterscheiden sich nach Umfang, sodass der Schalter nicht an einen Abrechnungszeitraum gebunden ist.
Verwenden Sie es für: Pläne, die sich je nach Umfang unterscheiden, z. B. einzeln und unbegrenzt. Öffnen Sie die Rounded-Demo.
Tabellen- und Daten-Toggle-Beispiele
Tabellen sind die zweite natürliche Passform Die Zeilen und Spalten bleiben stehen und die Zahlen ändern sich, so dass Besucher ihren Platz behalten, wenn sie den Schalter umlegen.
4. Spezifikationstabelle für Einheitsschalter
Eine Fahrradgeometrie-Tabelle wechselt zwischen Metric und Imperial Reichweite, Stapel und die anderen Maße sind für drei Rahmengrößen aufgeführt, mit Toleranzspalte Käufer in verschiedenen Ländern bekommen jeweils Zahlen, die sie lesen können.
Verwenden Sie es für: Produktspezifikationen, Größentabellen und Rezepte. Öffnen Sie die Unit Switch-Demo.
5. Datenschalter-Benchmark-Tabelle
Ein Emissionsbericht wechselt zwischen Eigenbetrieb und Supply Chain Jede Seite listet Quellen, ihren Anteil an der Basislinie und die Tonnage auf Zwei Tabellen, die jeweils einen Bildschirm füllen würden, teilen sich nun eine.
Verwenden Sie es für: Berichte, Benchmarks sowie Vorher- und Nachher-Zahlen. Öffnen Sie die Data Switch-Demo. Wenn sich die Daten nie per Klick ändern, wird ein Plain Tischwidget Einfacher ist.
6. Viertelschalter Metriken Bento
Ein Bento-Raster von Ergebnissen wechselt zwischen Q3 und Q4. Umsatz, Wachstum und die Noten unter jeder Abbildung ändern sich alle gemeinsam Es liest sich wie ein Dashboard und nimmt den Raum eines.
Verwenden Sie es für: Anlegeraktualisierungen, Jahresberichte und monatliche Statistiken. Öffnen Sie die Quarter Switch-Demo.
Möchten Sie alle zehn an einem Ort? Die Inhalts-Widget-Seite umschalten Betrachter hat, der jede Demo lädt, plus die vollständigen Einstellungen des Widgets.
Beispiele für Zielgruppen- und Kategorien-Toggle
Die letzte Gruppe schaltet die Nachricht Jede Seite ist für einen anderen Leser geschrieben oder deckt eine andere Kategorie ab.
7. Feature-Panel für Zuschauerschalter
Eine Kursseite wechselt zwischen Als Team und Auf eigene Faust Jede Seite hat ihre eigene Überschrift, einen eigenen Beweispunkt und eine eigene Featureliste Die Besucher wählen die Version aus, die sie beschreibt und lassen den Rest aus.
Verwenden Sie es für: Produkte, die sowohl an Unternehmen als auch an Privatpersonen verkauft werden. Öffnen Sie die Audience Switch-Demo.
8. Bestellen Route Step Timeline
Eine nummerierte Stufenliste wechselt zwischen Made to order und In lager Die Schritte und das Warten unterscheiden sich auf jeder Strecke, und das Layout bleibt gleich “Was passiert, nachdem ich bestellt habe?” für beide Arten von Käufern.
Verwenden Sie es für: Versand, Onboarding und jeder Prozess mit zwei Wegen. Öffnen Sie die Order Route-Demo. Für eine einzelne datierte Sequenz ist die Zeitleisten-widget Passt besser.
9. Projektschalter-Overlay-Karte
Ein Architekturstudio schaltet eine große Projektkarte zwischen Residential und Civic um Jede Seite hat ihr eigenes Foto, ihren eigenen Standort, ihr eigenes Jahr und ihre eigene Kurzfassung. Zwei Fallstudien passen dorthin, wo man normalerweise hingehen würde.
Verwenden Sie es für: Portfolios mit zwei Arbeitsbereichen. Öffnen Sie die Project Switch-Demo.
10. Menüliste für Service-Switch
Ein Restaurantmenü wechselt zwischen Mittag - und Abendessen, Servierstunden sitzen unter dem Schalter, und die Gerichte und Preise ändern sich mit ihm Die Gäste sehen die Speisekarte für das von ihnen geplante Essen.
Verwenden Sie es für: Restaurants, Salons und jedes Unternehmen mit zwei Servicelisten. Öffnen Sie die Service Switch-Demo.
Wie man eines dieser Beispiele baut
Jedes Beispiel ist ein Toggle Content Widget mit zwei Elementen Erstellen Sie die erste Version Ihres Abschnitts, kopieren Sie sie, ändern Sie die Details und legen Sie eine Version in jedes Element.
- Ziehen Inhalte umschalten Seite auf und nennen Sie die beiden Elemente in der Elemente Liste.
- Für kurze Inhalte, lassen Sie Typ auf Inhalt und schreiben Sie im Editor.
- Für ein vollständiges Layout setzen Typ Vorlage und wählen Sie für jedes Element eine gespeicherte Vorlage aus.
- Einstellen Aktiver Index In Einstellungen umschalten, um die Option auszuwählen, die zuerst angezeigt wird.
- Stylen Sie den Schalter in den Abschnitten Schalter, Anzeige und Etiketten der Registerkarte Stil.
Die Preisversion enthält einige zusätzliche Schritte, die wir abdecken So fügen Sie einen monatlichen und jährlichen Preisschalter in Elementor hinzu. Die vollständige Liste der Einstellungen ist in der Inhaltsdokumentation umschalten.
Häufig gestellte Fragen
Was ist ein Content-Toggle in Elementor?
Ein Content-Toggle ist ein Widget mit einem Switch und zwei oder mehr Labels, ein Klick auf ein Label zeigt den Inhalt dieser Option und verbirgt die anderen Elementor enthält keines, daher stammt es von einem Addon wie Master Addons Pro, wo das Widget Toggle Content heißt.
Was kann ich in einen Content-Toggle einfügen?
In Toggle Content enthält jede Option entweder Text aus dem integrierten Editor oder eine gespeicherte Elementor-Vorlage, da eine Vorlage beliebige Widgets enthalten kann, kann die Option eine Preistabelle, eine Datentabelle, ein Formular, eine Bildergalerie oder ein ganzer Abschnitt sein.
Kann ein Content-Toggle drei Optionen haben?
Ja. Klicken Sie auf Element hinzufügen in der Liste Elemente, um eine dritte oder vierte Option hinzuzufügen Ein Schalter liest sich am besten mit zwei oder drei Beschriftungen Für mehr als das sind Tabs für Besucher normalerweise einfacher zu scannen.
Sind diese Content-Toggle-Demos als Vorlagen verfügbar?
Die Demos werden im Template-Viewer auf der Widget-Seite von Toggle Content angezeigt, wo Sie jede öffnen können. Sie wurden mit dem Toggle Content-Widget erstellt, das Teil von Master Addons Pro ist.
Letzte Gedanken
Die zehn obigen Beispiele für Content-Toggle decken drei Jobs ab: einen Preis wechseln, eine Reihe von Zahlen wechseln und eine Nachricht wechseln. In jedem Fall bleibt das Layout still und nur die Details bewegen sich, sodass der Wechsel leicht zu befolgen ist.
Probieren Sie sie auf der Inhalts-Widget-Seite umschalten, dann baue deine eigene mit zwei Versionen eines Abschnitts, den du bereits hast.
Verwandte Lektüre
