Wichtige Erkenntnisse
- Das Master Addons Pricing Table-Widget liefert fünf Elementor-Preistabellenvorlagen als Layout-Dropdown: Standard, Left Align Content, Rounded Table, Table with BG Image und Skew BG Pattern.
- Durch das Umschalten des Layout-Dropdowns bleiben der Planname, der Preis, die Funktionen und die Schaltfläche erhalten, sodass ein Inhaltssatz in allen fünf Designs in weniger als einer Minute in der Vorschau angezeigt werden kann.
- Die Master Addons Template Library verfügt über vorgefertigte Preisabschnitte, darunter dunkle, zweiplanige, vierplanige und abrechnungsvermittelnde Designs, die vom Editor in jede Elementorseite importiert werden.
- Jedes Preistabellenbeispiel auf dieser Seite folgt der gleichen Reihenfolge: Planname, für wen es sich handelt, Preis und Zeitraum, drei bis sieben Funktionszeilen, eine Schaltfläche und eine optionale Vertrauenslinie.
- Eine dunkle Preistabelle liest sich am besten mit einem hellen Akzent nur auf dem hervorgehobenen Plan; Die folgenden Beispiele verwenden Grün, Cyan oder Rosa für diese einzelne Karte.
- Für einen monatlichen und jährlichen Wechsel in einem Preisbereich sind zwei Kartensätze und das Toggle Content-Widget von Master Addons Pro erforderlich.
Eine Elementor Preistabellenvorlage erspart Ihnen den Teil des Auftrags, der am längsten dauert: die Designentscheidungen Die folgenden Widget-Layouts geben Ihnen mit einem Klick eine Kartenform, und die fertigen Abschnitte geben Ihnen einen ganzen Preisblock mit Überschrift, Schalter und bereits angeordneten Karten So oder so ersetzen Sie die Plannamen, Preise und Funktionen und behalten das Design.
Auf dieser Seite werden zwölf Preistabellenbeispiele gesammelt, die mit erstellt wurden Master-Addons Für Elementor Die ersten fünf sind die eigenen Layouts des Widgets mit den genauen verwendeten Einstellungen, sodass Sie jedes einzelne reproduzieren können. Die nächsten sieben sind Abschnitte aus der Template Library, die ausgewählt wurden, um die allgemeinen Formen der Preisseite abzudecken: drei Pläne, zwei Pläne, vier Pläne, dunkel, hell und ein Abrechnungsschalter.
Inhaltsverzeichnis
So verwenden Sie diese Vorlagen
Es gibt zwei Arten von Vorlagen auf dieser Seite Die Beispiele 1 bis 5 sind Widget-Layouts: Lasst die Preistabellen-Widget In einen Container wählen Sie das Layout aus dem Dropdown aus und kopieren Sie die unter jedem Beispiel aufgeführten Einstellungen. Die Beispiele 6 bis 12 sind vollständige Abschnitte: Öffnen Sie die VorlagenbibliothekImportieren Sie den Abschnitt und bearbeiten Sie den Text an Ort und Stelle.
Die für jedes Layout aufgeführten Einstellungen sind diejenigen, die das Aussehen ändern Alles andere ist auf dem Standardwert Farben werden als Hex-Werte angegeben, damit Sie sie in die Registerkarte Stil einfügen können, und alle fünf Layoutkarten verwenden denselben Inhalt: einen $29-Plan mit drei Funktionen und eine Schaltfläche “Get started”.
Die fünf Preistabellen-Widget-Layouts
1. Standard
Das Standardlayout ist das, mit dem Sie beginnen können Der Header ist zentriert, der Preis sitzt unter dem Namen, und die Funktionen und die Schaltfläche folgen im Körper Es funktioniert für jede Planzählung und ist die sicherste Wahl für eine dreispaltige Reihe.
- Layout: Standard
- Header-Farbschema: Benutzerdefiniert, Farbverlauf von #6938EF bis #B497FF bei 135 Grad
- Überschrift und Preisfarbe: #FFFFFF; Untertitel und Zeitraum: #E4DBFF
- Feature-Symbol: Check, #6938EF; Feature-Text: #1A1033
- Schaltfläche: Hintergrund #F1EEFF, Text #6938EF, Radius 6 px
- Zusätzliche Info: “Jede Zeit stornieren”, #6B7280
2. Inhalte links ausrichten
Left Align Content verschiebt den Namen, den Preis und die Funktionen an den linken Rand, Es liest sich schneller, wenn die Plannamen lang sind oder wenn die Karte neben einem Textabsatz liegt, und es passt zu Preisseiten im redaktionellen Stil, auf denen alles andere ausgerichtet bleibt.
- Layout: Inhalte links ausrichten
- Alle Farben wie in Standard
- Tastenausrichtung: links, mit 24 px linker Polsterung auf der Fußzeile
3. Runder Tisch
Rounded Table legt den Preis innerhalb eines großen Kreises in der Kopfzeile, was die Zahl zum ersten macht, was jemand sieht. Es braucht einen höheren Kopf, also geben Sie ihm die gleiche Funktionsanzahl auf jeder Karte, sonst sieht die Reihe ungleichmäßig aus. Die gelbe Unterstreichung auf Funktionsreihen ist Teil des Layouts.
- Layout: Abgerundeter Tisch
- Header-Gradient wie in Standard; Kreisgradient von #F50A7F zu #FF6FB1 bei 135 Grad, oder lassen Sie es auf der Standardtönung
- Verfügt über Text: #1A1033, Unterstreichfarbe #FFD600 (Layout-Standard)
4. Tabelle mit BG-Bild
Tabelle mit BG-Bild füllt die ganze Karte mit einem Bild, einem Farbverlauf, einem Video oder einer Diashow, wobei der Header und die Funktionen oben schweben Es passt zu einem vorgestellten Plan oder einer Preisseite für ein visuelles Produkt Das Feature Panel benötigt einen dunklen halbtransparenten Hintergrund, damit der Text auf jedem Foto lesbar bleibt.
- Layout: Tabelle mit BG-Bild
- Hintergrund: Bild, Positionsmitte, Größenabdeckung
- Merkmale Hintergrund: rgba (20, 10, 45, 0,6); Features-Text: #FFFFFF
- Header-Gradient wie in Standard, mit 70 Prozent Deckkraft, sodass das Foto durchschaut
5. Schiefes BG-Muster
Schiefes BG-Muster schneidet den Header schräg und fügt zwei weiße Streifen hinzu, was der Karte Bewegung ohne Bild verleiht. Verwenden Sie eine Akzentfarbe; Ein Farbverlauf kämpft mit den Streifen. Es ist das Layout, das am häufigsten für eine einzelne Karte auf einer Landingpage ausgewählt wird.
- Layout: Schiefes BG-Muster
- Header-Farbschema: Benutzerdefiniert, massiv #6938EF
- Kartenradius: 20 px; Kartenhintergrund #FFFFFF
- Funktion unterstreichen auf, Taste wie in Standard
6. Drei Pläne mit hervorgehobener Mittelkarte
Die Standard-SaaS-Preisreihe: drei Preistisch-Widgets in einem dreispaltigen Container, die mittlere erhöht Die erhöhte Karte verwendet Highlight Table, ein Band mit der Aufschrift „Beliebteste”, einen einfarbigen rosa Knopf anstelle der Umrisse und den Sale-Schalter mit 69 $ als Originalpreis und 49 $ als aktuelle Die äußeren Karten verwenden die hellere Körperfarbe, sodass die mittlere nach vorne steht.
- Behälter: drei Kinderbehälter mit 31,5 Prozent Breite, Spalt 28 px, Ausrichten Artikel: Dehnen
- Mittlere Karte: Highlight Table on; Band “Beliebteste”, Vertikale 18, Horizontale -10; Buttonhintergrund #F50A7F, Text #FFFFFF
- Äußere Karten: Körperhintergrund #F6F5FA; mittlere Karte: #FFFFFF mit einem 0 24 x 60 px rgba (105, 56, 239, 0,28) Schatten
7. Dunkle Vier-Plan-Preistabelle
Vier Pläne auf schwarzem Hintergrund, mit einem einzigen Kalkakzent auf dem Rand und dem Etikett des hervorgehobenen Plans. Die Funktionen sind auf allen Karten identisch, was eine bewusste Wahl ist: Der Unterschied zwischen den Plänen besteht nur im Preis und der Leser soll nach Budget auswählen. Die Schaltflächen verwenden das Creative Button-Widget, sodass die Hover-Effekte eher von diesem Widget als von benutzerdefiniertem CSS stammen.
Verwenden Sie diese Vorlage, wenn die Pläne sich eher durch Grenzen als durch Funktionen unterscheiden. Fett gedruckter Feature-Text auf der ersten Karte und normaler Text auf den anderen ist die einzige visuelle Hierarchie, also behalten Sie es so.
8. Dark SaaS Preisgestaltung mit einem benutzerdefinierten Plan
Aus dem Finix-Vorlagenkit zeigt dieser Abschnitt, wie man einen Plan ohne Festpreis handhabt Die dritte Karte druckt “Benutzerdefiniert”, wo die Nummer wäre und tauscht den Buttontext gegen “Sprecht uns an” Eine einzeilige Beschreibung unter jedem Preis erklärt, für wen der Plan ist, und eine Fußnote unter der Zeile behandelt die Abrechnung und den Jahresrabatt in einem Satz.
Die schwachen konzentrischen Kreise hinter den Karten sind ein Schnitthintergrundbild, nicht Teil des Widgets, Ersetzen Sie das Bild oder entfernen Sie es und die Karten bleiben so, wie sie sind.
9. Zwei-Plan-Lichtpreistabelle
Zwei Pläne sind eine Ja- oder Nein-Entscheidung, daher macht dieses Layout das Verpassen der kostenpflichtigen Karte unmöglich: Die gesamte Karte ist mit der Akzentfarbe gefüllt und die Schaltfläche wechselt ins Dunkle. Graue Kontrollsymbole auf den grundlegenden Kartenmarkierungsfunktionen, die nicht enthalten sind, wodurch beide Karten die gleichen vier Reihen behalten können.
Verwenden Sie dies, wenn es eine kostenlose Stufe und eine kostenpflichtige Stufe gibt. Bei drei oder mehr Plänen wird die Vollfarbkarte zu laut.
10. Preiskarten mit Abrechnungsschalter
In diesem Abschnitt ist der monatliche und jährliche Umschalter bereits erstellt Der Schalter ist das Toggle Content Widget von Master Addons Pro, und jeder Staat lädt eine gespeicherte Preiszeile Die Karten drucken “monatlich abgerechnet” oder “jährlich abgerechnet” unter dem Preis, damit der Leser weiß, welcher Zustand angezeigt wird Importieren Sie es, öffnen Sie Vorlagen > Gespeicherte Vorlagen und bearbeiten Sie dort die beiden Preisreihen. Um dasselbe von Grund auf zu erstellen, einschließlich des Abschnitts-Typ-Vorlagenfangs, folgen Sie dem Monatlicher und jährlicher Kippführer.
11. Vierplanvergleich mit Feature-Ticks
Wenn sich Pläne eher durch Merkmale als durch Grenzen unterscheiden, können der Leser durch Häkchen und Kreuze eine Spalte nach unten scannen. Vergangene etwa sieben Zeilen, a Vergleichstabelle Macht diese Arbeit besser als Karten Alle vier Karten tragen die gleichen sieben Reihen in der gleichen Reihenfolge, und das Symbol ändert sich pro Plan Der hervorgehobene Plan ist mit der Akzentfarbe gefüllt, mit einem weißen Knopf, und sitzt eher auf dem dritten als auf dem zweiten Platz, weil die Seite erwartet, dass die meisten Leser die höhere Stufe wählen.
12. Dunkle Preise mit einem monatlichen und jährlichen Kipphebel
Ein dunkler Ausschnitt mit hellen Karten ist das Gegenteil von Beispiel 7, und er macht die Karten zum hellsten Ding auf der Seite Der Knebel sitzt zwischen der Überschrift und den Karten, der Pro-User-Hinweis unter jedem Plannamen setzt Erwartungen, und “Keine Kreditkarte erforderlich” unter jedem Knopf entfernt den letzten EinwandDie dekorativen Formen in den Ecken sind Schnitthintergrundelemente.
So importieren Sie einen Preisabschnitt
- Öffnen Sie die Seite in Elementor und klicken Sie im Editor auf das Vorlagensymbol Master Addons oder öffnen Sie Vorlagen > Master Addons Vorlagen.
- Suchen Sie nach “Preisen”, sehen Sie sich den Abschnitt in der Vorschau an und klicken Sie auf Importieren. Abschnitte, die mit Pro-Widgets erstellt wurden, benötigen Master Addons Pro aktiv.
- Der Abschnitt landet dort, wo Ihr Cursor war Bearbeiten Sie den Text jeder Karte im Panel; das Design bleibt.
- Bearbeiten Sie für Abschnitte mit Umschaltvorgang die beiden Preiszeilen unter Vorlagen > Gespeicherte Vorlagen.
Die Vorlage Import Guide Bedeckt die Editor-Taste, den Import-Seiten-Bildschirm und was mit der importierten Kopie passiert.
Möchten Sie alle fünf Layouts, ohne etwas zu importieren? Die Preistabellen-Widget hat sie in einem dropdown, und die Vorlagenbibliothek Vollständige Abschnitte hat, die oben gezeigt wurden.
Häufig gestellte Fragen
Verfügt Elementor über Vorlagen für Preistabellen?
Die Template-Bibliothek von Elementor verfügt über Preisblöcke für Pro-Benutzer und ihr Preistabellen-Widget ist ebenfalls Pro. Auf dem kostenlosen Elementor stammen Preisvorlagen von einem Addon: Das Master Addons Pricing Table-Widget verfügt über fünf Layouts und die Template Library über vollständige Preisabschnitte.
Wie viele Pläne sollte eine Preis-Tabellenvorlage haben?
Drei ist die sicherste Zahl, und vier funktioniert, wenn ein Plan eine benutzerdefinierte oder Unternehmensebene ist Die obigen Beispiele zeigen zwei, drei und vier Pläne; nach vier passen keine nebeneinander liegenden Karten mehr auf einen Laptop-Bildschirm.
Kann ich das Layout nach dem Aufbau des Tisches ändern?
Ja. Der Layout-Dropdown im Master Addons Pricing Table Widget wechselt zwischen den fünf Designs und hält Planname, Preis, Features und Button an Ort und Stelle, es ändern sich nur die Stileinstellungen, die zu einem Layout gehören, wie der Kreis oder der Schräglauf.
Wie erstelle ich eine dunkle Preistabelle in Elementor?
Stellen Sie den Abschnittshintergrund auf schwarz oder dunkelmarinefarben ein, geben Sie jeder Karte einen dunkelgrauen Körper mit einem helleren Ein-Pixel-Rand und verwenden Sie eine Akzentfarbe für den Rand, das Etikett und die Taste der markierten Karte. Die Beispiele 7, 8, 10 und 12 oben zeigen vier Versionen davon.
Sind die Beispiele der Preistabelle responsiv?
Ja. Die Karten stapeln sich in einer Spalte auf Telefonen Legen Sie den markierten Plan zuerst oder zweitens in die Container-Reihenfolge für Mobilgeräte, halten Sie Funktionslisten auf etwa fünf Zeilen und überprüfen Sie die Tabelle am mobilen Haltepunkt im Responsive-Modus von Elementor, bevor Sie veröffentlichen.
Letzte Gedanken
Die zwölf Vorlagen kommen über zwei Routen Die fünf Widget-Layouts decken die Kartenform ab und nehmen jeweils eine Dropdown-Änderung vor Die sieben Bibliotheksabschnitte behandeln die Seitenformen: drei Pläne mit hervorgehobener Mitte, dunkler Vierplan, SaaS mit benutzerdefinierter Stufe, Zweiplanlicht, ein Abrechnungsschalter, Vierplan-Tick und Kreuze, und dunkel mit hellen Karten Jeder behält die Reihenfolge, die funktioniert: Name, für wen er ist, Preis, eine kurze Featureliste, eine Schaltfläche.
Beginnen Sie mit dem Layout oder Abschnitt, der Ihren Plänen am nächsten liegt Widget-Seite der PreistabelleÄndern Sie den Text und überprüfen Sie ihn auf einem Telefon, bevor er online geht.
Verwandte Lektüre
- Preisgestaltung Tischdesign: 10 Tipps mit Beispielen
- Vorlagenbibliothek für Master-Ad
- Elementor-Vorlagen-Kits
- Elementorabschnittsvorlagen
- Dokumentation des Preistabellen-Widgets
- So fügen Sie einer Elementorpreistabelle eine monatliche und jährliche Umschalttasche hinzu
- Elementorpreistabelle vs. Vergleichstabelle: Welche verwendet werden
- So erstellen Sie eine Preisliste oder ein Menü in Elementor
