Wichtige Erkenntnisse
- Ein gutes Preistabellendesign zeigt drei oder vier Pläne nebeneinander, wobei ein Plan optisch über den Rest hinausragt, sodass der Leser eine Standardauswahl treffen kann.
- Eine Preistabelle konvertiert besser, wenn jede Karte der gleichen Reihenfolge folgt: Planname, für wen sie ist, Preis, Abrechnungszeitraum, eine kurze Funktionsliste und eine Schaltfläche.
- Die Funktionszeilen sollten jeweils drei bis sechs Wörter umfassen; Eine Reihe, die zu einer zweiten Zeile umläuft, verlangsamt das Lesen und macht die Karten ungleichmäßig.
- Ein durchgestrichener Originalpreis neben dem Verkaufspreis gibt dem Leser einen Anker, und das Master Addons Pricing Table Widget verfügt über einen Sale-Switch genau dafür.
- Ein monatlicher und jährlicher Umschalter erfordert zwei Kartensätze; In Master-Addons wechselt das Toggle Content Widget (Pro) zwischen zwei gespeicherten Abschnittsvorlagen.
- Auf einem Telefon stapeln sich Preiskarten in einer Spalte, sodass der hervorgehobene Plan an erster oder zweiter Stelle und nicht an dritter Stelle stehen sollte.
Preisgestaltung Tischgestaltung entscheidet, ob ein Besucher, der Ihr Produkt bereits haben möchte, in wenigen Sekunden den richtigen Plan findet Das Layout ist einfach: eine Kartenreihe, jeweils ein Preis, jeweils ein Button Die Entscheidungen, auf die es ankommt, sind kleiner als die: Wie viele Pläne, welcher ist erhöht, wie der Preis aussieht, wie lange jede Feature-Zeile läuft, und was auf dem Button steht.
Dieser Beitrag geht durch zehn Tipps für das Design von Preistabellen, die jeweils auf einer echten Tabelle angezeigt werden, die mit dem Widget der Preistabelle von Master Addons for Elementor erstellt wurde. In den Beispielen werden erfundene Pläne (Starter, Wachstum, Agentur) verwendet, damit Sie die Struktur kopieren können, ohne die Preise zu kopieren. Wo ein Tipp ein zweites Widget benötigt, wie zum Beispiel den monatlichen und jährlichen Umschalter, steht im Beitrag, welcher und ob er im Pro-Plan enthalten ist.
Inhaltsverzeichnis
1. Zeigen Sie drei Pläne, höchstens vier
Drei Pläne ist das Preis-Tabellen-Design, das die meisten Leser auf einen Blick vergleichen können Zwei Pläne erzwingen eine Ja-oder-Nein-Entscheidung Fünf oder mehr Pläne verwandeln die Tabelle in eine Tabellenkalkulation, und der Leser beginnt, seitwärts auf einem Laptop zu scrollen und auf einem Telefon aufzugeben.
Legen Sie den Plan, den die meisten Leute kaufen sollen, in die Mitte Die Leute lesen eine Reihe von links nach rechts, aber sie setzen sich in der Mitte fest, wo auch das Auge zuerst auf einem Telefon landet, wenn die Karten stapeln Wenn Sie eine Agentur oder einen Enterprise-Plan mit benutzerdefinierten Preisen verkaufen, behalten Sie es als vierte Karte mit einem “Kontakt” - Knopf und nicht als separate Tabelle.
In Elementor ist jede Karte ein in eine eigene Spalte oder einen eigenen Container fallengelassenes Pricing Table Widget Drei Widgets in einem dreispaltigen Container, die jeweils auf das gleiche Layout gesetzt sind, geben Ihnen die Tabelle oben Die Widget-Seite der Preistabelle Vollständige Kontrollliste und fünf Live-Layouts hat.
2. Einen Plan über den Rest heben
Ein hervorgehobener Plan gibt dem Leser eine Voreinstellung, und die meisten werden sie nehmen Das Highlight macht drei Dinge auf einmal: Die Karte ist etwas höher oder angehoben, die Taste verwendet die Akzentfarbe anstelle des Umrissstils und ein Band nennt den Grund (“Beliebteste”, “Bester Wert”, “Empfohlen”).
Markieren Sie genau eine Karte Zwei hervorgehobene Karten heben sich gegenseitig auf Wählen Sie den Plan mit der für Sie besten Marge aus, die noch immer für die meisten Leser passt, nicht für die teuerste.
Im Widget der Preistabelle schalten Sie ein Highlight-tabelle Öffnen Sie dann im Inhaltsregister die Band Abschnitt zum Festlegen des Textes, der Ausrichtung, der Position und der Drehung Geben Sie der markierten Karte eine andere Tastenfarbe in der Registerkarte Stil, damit sie nicht nur auf das Menüband angewiesen ist.
3. Machen Sie den Preis zum Größten auf der Karte
Der Preis sollte der größte Text auf der Karte sein, größer als der Planname, Leser scannen zuerst eine Preistabelle für die Zahlen und lesen sich die Plannamen als zweites durch, so dass ein Design, das den Namen größer als den Preis macht, sie verlangsamt.
Das Währungssymbol und den Abrechnungszeitraum kleiner als die Zahl halten “49$” liest sich schneller als “49,00 USD pro Monat” Wenn man einen Plan rabattiert, zeigt man den ausgestrichenen Originalpreis neben dem Verkaufspreis an Die durchgestrichene Zahl ist ein Anker: 49 sieht billiger aus, wenn 69 daneben sitzt, als alleine.
Das Widget hat eine Verkauf Unter Preise umschalten Schalten Sie es ein, füllen Sie die Ursprünglicher Preis, und der Durchschlag erscheint automatisch Wählen Sie die Währung aus der Liste oder geben Sie Ihr eigenes Symbol ein.
4. Benennen Sie den Plan nach dem Käufer, nicht nach dem Tier
Plannamen funktionieren am besten, wenn sie dem Leser mitteilen, für wen der Plan ist “Starter, Wachstum, Agentur” sagt mehr als “Basic, Standard, Premium”, und ein einzeiliger Untertitel unter jedem Namen (“Für eine Seite”, “Für kleine Teams”, “Für die Arbeit des Kunden”) entfernt das Raten.
Vermeiden Sie Namen, die die Featureliste benötigen, um sinnvoll zu sein, muss ein Leser Zeilen vergleichen, um herauszufinden, welcher Plan “Standard” ist, ist der Name gescheitert Vermeiden Sie Witze und interne Codenamen aus demselben Grund.
Das Widget der Preistabelle verfügt über eine Titel und ein Untertitel Feld im Bereich Kopfzeile, dazu ein optionales Icon und Tag Der Untertitel ist der richtige Ort für “Für kleine Teams”.
5. Halten Sie Funktionszeilen kurz und in der gleichen Reihenfolge
Jede Feature-Reihe sollte auf eine Zeile passen, drei bis sechs Wörter Lange Reihen wickeln sich ein, die Karten werden ungleichmäßig, und der Leser hört auf, plänenübergreifend zu vergleichen, weil die Reihen nicht mehr aufgereiht sind.
Ordne die Zeilen in jeder Karte gleich, wobei oben die Zeilen, die zwischen Plänen wechseln (“1 Seite” vs “5 Seiten” vs “Unlimited Seiten”) reichen fünf bis sieben Zeilen pro Karte, hast du zwanzig Features, ist die Preistabelle für sie der falsche Ort: stell die Top Fünf hier rein und verlinke für den Rest auf eine Vergleichstabelle.
Die des Widgets Merkmale Repeater nimmt pro Zeile einen Text, ein Symbol und einen optionalen Tooltip. Verwenden Sie für jedes enthaltene Feature dasselbe Symbol und für Features, die ein Plan nicht enthält, ein anderes (oder keines), sodass das visuelle Muster kartenübergreifend übereinstimmt.
6. Legen Sie das Detail in einen Tooltip, nicht in die Reihe
Mit einem Tooltip können Sie die Zeile kurz halten und trotzdem die Frage “was beinhaltet das?” beantworten. In der Zeile steht “Alle Widgets”; im Tooltip steht “Jedes Widget und jede Erweiterung”.
Verwenden Sie Tooltips für die zwei oder drei Zeilen, die Supportfragen generieren, nicht für jede Zeile. Eine Karte, auf der jedes Feature eine gepunktete Unterstreichung hat, sieht aus, als würde sie etwas verbergen. Behalten Sie den Tooltip-Text in einem Satz.
Im Widget der Preistabelle verfügt jede Zeile im Features-Repeater über eine Tooltipp Schalter, ein Textfeld und eine Platzierungsmöglichkeit (oben, unten, links, rechts).
7. Ein Knopf pro Karte, mit einem Verb drauf
Der Button ist das einzige Element auf der Karte, das etwas tut, also gib ihm einen Job und beschrifte ihn mit einem Verb “Get started”, “Start free trial”, “Choose Growth” funktionieren alle “Submit” und “Click here” nicht.
Unter dem Button entfernt eine kurze Vertrauenszeile den letzten Einwand: “Jedenzeit stornieren”, “14-Tage-Geld zurück”, “Keine Karte nötig” Behalten Sie es bei fünf Wörtern und stapeln Sie nicht drei davon.
Die des Widgets Fußzeile Abschnitt hat den Buttontext, den Link und eine Zusätzliche Informationen Feld für die Vertrauenslinie Wenn Sie mit Easy Digital Downloads verkaufen, verfügt derselbe Abschnitt über einen EDD-Kauf-Button, der direkt auf das Produkt verweist Bei einem WooCommerce-Produkt verknüpfen Sie den Button mit der Produkt - oder Checkout-Seite.
8. Fügen Sie einen monatlichen und jährlichen Umschalter nur dann hinzu, wenn die Ersparnis es wert ist, angezeigt zu werden
Ein monatlicher und jährlicher Umschalter ist sinnvoll, wenn die jährliche Abrechnung dem Leser einen klaren Betrag spart, normalerweise zwei Monate oder mehr. Wenn der jährliche Rabatt gering ist, fügt der Umschalter einen Schritt hinzu, ohne die Entscheidung zu ändern, und eine einzelne „abgerechnete jährliche“Leitung erledigt die gleiche Aufgabe.
Zeigen Sie den Jahrespreis pro Monat (“39 $ / Monat, jährlich abgerechnet”) und nicht die vollständige jährliche Gesamtsumme an, damit die beiden Kippzustände Gleiches für Gleiches vergleichen Setzen Sie die Ersparnis neben den Kippschalter (“20% sparen”), damit der Leser weiß, warum der Schalter existiert, bevor er darauf klickt.
Das Widget der Preistabelle enthält einen Preis pro Karte, sodass der Umschalter von einem zweiten Widget stammt. Erstellen Sie einen Kartensatz mit monatlichen Preisen und einen mit jährlichen Preisen, speichern Sie jede als Abschnittsvorlage und legen Sie beide in die Inhalts-Widget umschalten, die im Master Addons Pro Plan steht Die Seite Inhalt umschalten hat die Einrichtungsschritte und ein Live-Beispiel.
9. Wählen Sie ein Layout, das zur Seite passt, und behalten Sie es dann bei
Das Layout einer Preistabelle sollte mit dem Abschnitt drumherum übereinstimmen: eine einfache Karte auf einer sauberen SaaS-Seite, eine abgerundete Kopfzeile auf einer weicheren Marke, ein Hintergrundbild, wenn der Rest der Seite Fotografie verwendet Wählen Sie eine aus und verwenden Sie sie für jede Karte in der Tabelle.
Das Mischen von Layouts innerhalb eines Tisches ist ein häufiger Fehler. Der Leser liest den Formunterschied als einen Unterschied in den Plänen. Halten Sie auch die Farben begrenzt: eine Akzentfarbe für die hervorgehobene Karte, eine neutrale für den Rest.
Das Widget der Preistabelle verfügt über fünf Layouts in der Grundriss Dropdown (Standard, Left Align Content, Rounded Table, Table with BG Image und Skew BG Pattern), und der Inhalt bleibt an Ort und Stelle, wenn Sie zwischen ihnen wechseln Die Vorlagenbibliothek Preisabschnitte auf diesen Layouts aufgebaut hat, wenn Sie lieber von einem fertigen Entwurf ausgehen möchten.
10. Überprüfen Sie die Tabelle auf einem Telefon, bevor Sie veröffentlichen
Auf einem Telefon stapeln sich die Karten in einer Spalte, so dass der Leser einen Plan nach dem anderen sieht und an den anderen vorbei scrollt Das ändert zwei Entscheidungen: Welche Karte kommt zuerst, und wie groß jede Karte ist.
Legen Sie den markierten Plan an erster oder zweiter Stelle auf Mobilgeräten ab. Wenn er auf dem Desktop an dritter Stelle steht, verwenden Sie die responsive Reihenfolge von Elementor auf dem Container, um ihn nach oben zu verschieben. Halten Sie die Funktionslisten in fünf Reihen, damit eine Karte in etwa einen Bildschirm passt, und machen Sie die Schaltfläche breit genug, um darauf zu tippen.
Öffnen Sie den Elementor-Responsive-Modus (das Telefonsymbol am unteren Rand des Panels) und überprüfen Sie die Tabelle am mobilen Haltepunkt. Die Style-Tabellensteuerelemente des Preistabellen-Widgets verfügen über Responsive-Switches, sodass Sie die Preisschriftart und die Auffüllung auf Telefonen verkleinern können, ohne die Desktop-Version zu ändern.
Möchten Sie alle zehn Tipps in einem Widget? Die Preistabellen-Widget Hat den Highlight-Switch, das Menüband, den Verkaufspreis, Feature-Tooltips und fünf Layouts als Panel-Steuerelemente, sodass jeder Tipp oben eher eine Einstellung als ein benutzerdefiniertes CSS ist.
Häufig gestellte Fragen
Wie viele Pläne sollte eine Preistabelle haben?
Drei ist die sicherste Zahl, und vier funktioniert, wenn ein Plan benutzerdefinierte Preise hat Zwei Pläne erzwingen eine Ja- oder Nein-Wahl, und fünf oder mehr Stopps passen nebeneinander auf einen Laptop-Bildschirm und verwandeln sich in eine lange Schriftrolle auf einem Telefon.
Welcher Plan sollte in einer Preistabelle hervorgehoben werden?
Heben Sie den Plan hervor, der zu den meisten Lesern passt und trotzdem einen guten Spielraum für Sie hat, meist den mittleren Heben Sie ihn mit einem Schatten, einem festen Knopf und einem Band wie “Beliebtester” Heben Sie nur eine Karte hervor; zwei hervorgehobene Karten heben sich gegenseitig auf.
Wie füge ich einen monatlichen und jährlichen Umschalter zu einer Elementor-Preistabelle hinzu?
Bauen Sie zwei Sätze Preiskarten, einen mit monatlichen Preisen und einen mit jährlichen, und speichern Sie jeden als Abschnittsvorlage Das Toggle Content Widget in Master Addons Pro zeigt eine Vorlage nach der anderen hinter einem Switch Das Pricing Table Widget selbst hält einen Preis pro Karte.
Sollte eine Preistabelle den ursprünglichen Preis durchgestrichen zeigen?
Ja, wenn ein Plan rabattiert wird Ein durchgestrichener Originalpreis neben dem Verkaufspreis gibt dem Leser einen Anker, und der Verkaufspreis sieht niedriger aus als allein Im Master Addons Pricing Table Widget machen das der Sale-Switch und das Feld Original Price.
Wie mache ich Preistabellenspalten in Elementor gleich hoch?
Legen Sie die Karten in einen Behälter und stellen Sie seine Ausrichtungsgegenstände auf Dehnen ein, dann geben Sie jedem Plan die gleiche Anzahl an Funktionsreihen Zeilen, die sich in zwei Zeilen wickeln, sind die übliche Ursache für ungleichmäßige Karten, also kürzen Sie den Text, bevor Sie die Polsterung anpassen.
Letzte Gedanken
Das Design der Preistabelle läuft auf eine kurze Liste hinaus: drei Pläne, einer erhöht, der Preis als größter Text, Plannamen, die angeben, für wen der Plan ist, Feature-Zeilen, die zu einer Zeile passen, Tooltips für das Detail, eine Schaltfläche mit einem Verb, ein Umschalten nur, wenn die jährliche Ersparnis real ist, ein Layout pro Tabelle und eine Überprüfung auf einem Telefon. Jedes der zehn oben genannten Beispiele wurde mit dem Preistabellen-Widget und einigen Panel-Einstellungen erstellt.
Wenn Sie bei Null anfangen, öffnen Sie die Widget-Seite der Preistabelle Um die fünf Layouts live zu sehen, oder wählen Sie einen fertigen Preisabschnitt aus dem Vorlagenbibliothek und die Pläne ändern Das Widget ist eines der Widgets und Erweiterungen In Master-Addons und dem Toggle Content-Widget für den Abrechnungsschalter ist in den Plänen auf der Preisseite.
Verwandte Lektüre
- Vergleichstabellen-Widget: die vollständige Funktionsmatrix, auf die eine Preistabelle verlinken sollte
- Dynamisches Tabellen-Widget: eine Preisliste mit einem Preis pro Reihe, für Menüs und Servicelisten
- Elementor-animierte Tasten: Knopfstile für die Kartenfußzeile
- Elementor-Marketing-Widgets: die anderen Konvertierungs-Widgets in Master-Addons
- Dokumentation des Preistabellen-Widgets: jede Kontrolle erklärt
- Themenbauer: Vorlagen für Kopf - und Fußzeilen für den Rest der Preisseite
