Wichtige Erkenntnisse
- Eine Preistabelle in Elementor ist eine Reihe von Plankarten mit jeweils einem Preis, einer kurzen Funktionsliste und einer Schaltfläche; Es ist so konzipiert, dass ein Klick auf einen Plan möglich ist.
- Eine Elementor-Vergleichstabelle ist ein Raster mit einer Zeile pro Feature und einer Spalte pro Plan oder Produkt; sie ist so aufgebaut, dass sie vor dem Klick antwortet “welcher Plan X hat”.
- Das Master Addons Pricing Table-Widget erstellt eine Karte pro Widget mit fünf Layouts, einem Menüband, einem Verkaufspreis und Funktionstooltips; Das Vergleichstabellen-Widget (Master Addons Pro) erstellt die gesamte Matrix in einem Widget mit bis zu sechs Spalten.
- Die meisten Preisseiten benötigen beides: Karten oben für die Entscheidung, eine Vergleichstabelle unten für das Detail, verlinkt durch einen “Compare every feature” - Anker.
- Eine Preiskarte sollte drei bis sieben Funktionszeilen enthalten; Alles, was länger ist, gehört in die Vergleichstabelle, wo ein Tooltip eine Zeile erklären kann, ohne sie zu verlängern.
- Das Vergleichstabellen-Widget wechselt zu einem gestapelten Layout unterhalb eines von Ihnen festgelegten Haltepunkts, wodurch eine sechsspaltige Matrix auf einem Telefon lesbar bleibt.
Eine Elementor-Vergleichstabelle und eine Elementor-Preistabelle sehen verwandt aus und erledigen verschiedene Aufgaben Die Preistabelle ist eine Kartenreihe, die den Besucher auffordert, einen Plan auszuwählen. Die Vergleichstabelle ist ein Raster, mit dem der Besucher vor der Auswahl ein Merkmal über jeden Plan hinweg überprüfen kann Legen Sie dem Leser das falsche vor und er kann sich entweder nicht entscheiden oder das Detail nicht finden.
Dieser Beitrag zeigt jeweils ein Beispiel, das mit Master Addons auf denselben drei Plänen aufgebaut wurde, und legt dar, wann jeder ausreicht, wann man beides braucht und wie sie auf einer Seite zusammenpassen Das Widget der Preistabelle befindet sich im Plugin Master Addons; das Widget der Vergleichstabelle ist in Master Add-dons Pro.
Inhaltsverzeichnis
Der Unterschied in einem Satz
Eine Preistabelle zeigt Pläne als Karten und bittet um eine Entscheidung; eine Vergleichstabelle zeigt Merkmale als Zeilen und unterstützt die Entscheidung detailliert, Die Preistabelle wird von oben nach unten innerhalb einer Karte gelesen Die Vergleichstabelle wird von links nach rechts über eine Zeile gelesen. Diese Leserichtung ist der ganze Unterschied und sie entscheidet, was jede einzelne halten kann.
Was eine Preistabelle bewirkt
Eine Preistabelle legt jeden Plan in eine eigene Karte: Name, für wen er ist, Preis und Zeitraum, eine kurze Featureliste, und eine Taste Eine Karte wird mit einem Band angehoben, damit der Leser eine Voreinstellung hat Der Leser vergleicht Karten durch einen Blick über die Reihe, was nur funktioniert, während jede Karte kurz bleibt.
Das Limit ist die Featureliste Fünf Zeilen pro Karte lesen in wenigen Sekunden, Fünfzehn Zeilen pro Karte bedeutet, dass der Leser innerhalb der Reihe scrollt und den Vergleich verliert, wenn man sich am unteren Rand einer Karte “und noch viel mehr” schreibt, hat die Karte ihr Limit erreicht und der Rest gehört in eine Vergleichstabelle.
Was eine Vergleichstabelle bewirkt
Eine Vergleichstabelle listet jedes Merkmal einmal auf, in der ersten Spalte nach unten, und markiert den Wert jedes Plans in der ganzen Zeile: eine Zahl, ein Wort oder ein Häkchen und Kreuz. Die Kopfzeile trägt die Plannamen und Preise, und eine Knopfzeile unten verlinkt jede Spalte zur KasseDer Leser findet das eine Feature, das ihm am Herzen liegt, und liest es quer.
Da jedes Feature eine Zeile ist, kann die Tabelle zwanzig oder dreißig Features aufnehmen, ohne breiter zu werden Es wird länger, was fein scrollt Ein Tooltip auf einem Feature-Namen hält die Zeile kurz und erklärt gleichzeitig, was das Feature bedeutet, weshalb Planvergleichstabellen auf SaaS-Preisseiten kleine Info-Icons neben den Labels tragen.
Preistabelle vs. Vergleichstabelle nebeneinander
| Faktor | Preistabelle | Vergleichstabelle |
|---|---|---|
| Form | Eine Karte pro Plan, hintereinander | Eine Zeile pro Feature, eine Spalte pro Plan |
| Leserichtung | Eine Karte runter | Über eine Reihe |
| Funktionen, die es halten kann | Drei bis sieben pro Karte | Dutzende |
| Job | Erhalten Sie einen Klick auf einen Plan | Antwort “Hat Plan X Feature Y” |
| Hervorgehobener Plan | Erhöhte Karte, Band, fester Knopf | Hervorgehobene Spalte |
| Preis | Groß, auf jeder Karte | In der Kopfzeile |
| Platz auf der Seite | Oben, unter der Überschrift | Unterhalb der Karten, oder auf einer eigenen Seite |
| Master Addons Widget | Preistabelle, ein Widget pro Karte | Vergleichstabelle (Pro), ein Widget für die Matrix |
| Mobil | Kartenstapel in einer Spalte | Stapel unter einem von Ihnen festgelegten Haltepunkt |
Wenn eine Preistabelle ausreicht
Eine Preistabelle allein reicht, wenn sich die Pläne um eine Handvoll Limits unterscheiden und der Leser über den Preis entscheiden kann Drei Pläne mit “1 Seite, 5 Seiten, unbegrenzte Seiten” und fünf Reihen brauchen jeweils keine Matrix Ein einzelner Plan auf einer Landingpage ist eine Karte Eine Mitgliedsseite mit zwei Stufen sind zwei Karten, wenn jedes Feature auf die Karten passt, ohne zu verpacken und niemand fragt “beinhaltet der Starter-Plan X” in den Support, hör auf damit.
Die Preise Tabelle Design Tipps Abdeckung, wie man die Karten kurz hält: drei bis sechs Wörter pro Zeile, die gleichen Zeilen in der gleichen Reihenfolge auf jeder Karte, und ein Tooltip für die beiden Zeilen, die Fragen bekommen Bei vorgefertigten Karten hat der Beitrag der Preistabellenvorlagen fünf Layouts und sieben Abschnitte mit ihren Einstellungen.
Wenn Sie eine Vergleichstabelle benötigen
Sie benötigen eine Vergleichstabelle, wenn sich die Pläne durch viele Funktionen unterscheiden, wenn die Funktionen erklärt werden müssen oder wenn der Leser Ihr Produkt mit denen einer anderen Person vergleicht. Die Tabelle enthält auch die Tick-and-Cross-Antworten, mit denen Karten schlecht umgehen: Eine Karte mit grauen durchgestrichenen Merkmalen sieht aus wie eine Liste von Dingen, die Sie nicht haben können, während eine Reihe von Häkchen und Kreuzen wie Informationen aussieht.
Eine Vergleichstabelle funktioniert auch für sich allein für Produktvergleiche, bei denen es gar nicht um Pläne geht, wie zum Beispiel drei Modelle eines Produktes oder dein Plugin gegen zwei Rivalen, dafür nimmt das Vergleichstabellen-Widget pro Spalte ein Bild, mit einem Titel, einem Preis und einem Button.
So verwenden Sie beides auf einer Seite
Die meisten SaaS Preisseiten laufen sowohl Die Karten sitzen oben unter der Überschrift als auch die Abrechnungsschalter; die Vergleichstabelle sitzt unter einer Überschrift wie “Vergleiche jedes Feature” tiefer auf der Seite, mit einem Ankerlink unter den Karten Die Karten machen den Verkauf für den Leser, der schon weiß, was er will Der Tisch fängt den Leser auf, der an den Karten vorbeiscrollte, weil eine Reihe fehlte.
Halten Sie die Plannamen, die Reihenfolge und die Preise in beiden identisch, Wenn auf den Karten Starter, Wachstum, Agentur von links nach rechts steht, sagen die Tabellenspalten dasselbeHeben Sie in beiden den gleichen Plan hervor: eine erhöhte Karte oben, eine getönte Spalte unten Und geben Sie der Tabelle eine eigene Knopfzeile, damit der Leser, der sich in der Tabelle entschieden hat, nicht wieder nach oben scrollt, um zu klicken.
Jedes einzelne in Elementor bauen
Die Preistabelle
Fügen Sie einen Behälter hinzu, geben Sie ihm drei Kinderbehälter und lassen Sie einen fallen Preistabellen-Widget In jede. Legen Sie das Layout aus den fünf in der Dropdown, dann den Plan Namen, Untertitel, Preis, Zeitraum und Funktionen in der Registerkarte Inhalt Schalten Sie Highlight Tabelle und das Band für die mittlere Karte ein Stellen Sie die Ausrichten Elemente des übergeordneten Containers so ein, dass die Karten mit Höhen übereinstimmen.
Die Vergleichstabelle
Lassen Sie einen fallen Vergleichstabellen-Widget Auf die Seite Wählen Sie einen Skin aus den vier, stellen Sie die Anzahl der Produkte ein (bis zu sechs), und fügen Sie die Feature-Namen zur Feature-Liste hinzu, Öffnen Sie dann jede Produktspalte: Titel, Preis, Button-Text und Link, und einen Eintrag pro Feature, wo der Typ Ja, Nein, ein Symbol oder Text ist Die Registerkarte Stil hat eine responsive Haltepunkt-Einstellung, die entscheidet, wo die Tabelle auf kleinen Bildschirmen stapelt.
Beide Widgets bearbeiten im Elementor-Panel, sodass die Plannamen und Preise Text sind, den Suchmaschinen lesen und den Sie ändern können, ohne ein Bild zu berühren.
Willst du beides von einem Plugin? Die Preistabellen-Widget Baut die Karten, und die Vergleichstabellen-Widget In Master Addons erstellt Pro die Matrix darunter.
Häufig gestellte Fragen
Verfügt Elementor über ein Vergleichstabellen-Widget?
Nr. Elementor und Elementor Pro haben kein Vergleichstabellen-Widget Das Table of Contents, Price Table und Price List Widgets in Pro erledigen andere Jobs Eine Feature-Matrix stammt von einem Addon; das Master Addons Comparison Table Widget befindet sich in Master Addons Pro.
Kann eine Preistabelle einen Feature-Vergleich zeigen?
Nur eine kurze Jede Karte hält ihre eigene Featureliste, daher bedeutet ein Vergleich über Pläne hinweg, drei Listen nebeneinander zu lesen Bis zu etwa sieben Zeilen, die funktionieren, darüber hinaus die vollständige Liste in eine Vergleichstabelle legen und die Karten auf den Zeilen halten, die sich unterscheiden.
Was ist der Unterschied zwischen einer Preistabelle und einer Preisvergleichstabelle?
Eine Preistabelle ist eine Reihe von Plankarten mit je einem Preis Eine Preisvergleichstabelle ist eine Merkmalsmatrix mit Plänen als Spalten, meist mit Preisen im Header Die erste verkauft einen Plan; die zweite lässt den Leser Funktionen vor der Auswahl überprüfen.
Wie viele Spalten kann eine Vergleichstabelle haben?
Das Widget Vergleichstabelle Master Addons nimmt bis zu sechs Produktspalten plus die Feature-Spalte ein, auf einem Telefon stapelt es sich unterhalb des von Ihnen im Widget festgelegten Haltepunkts, sodass jeder Plan zu einem eigenen Block wird.
Soll die Vergleichstabelle auf der Preisseite oder einer eigenen Seite stehen?
Auf der Preisseite, unterhalb der Karten, für die meisten Seiten Eine separate Seite spaltet die Entscheidung vom Detail und verliert Leser zwischen den beiden Verschieben Sie sie nur dann auf eine eigene Seite, wenn die Matrix zu Dutzenden von Zeilen läuft.
Letzte Gedanken
Karten mit drei bis sieben Zeilen und einem hervorgehobenen Plan erhalten den Klick Eine Matrix mit einer Zeile pro Funktion beantwortet die Fragen, die den Klick stoppen Auf den meisten Preisseiten gehen die Karten nach oben und die Matrix geht nach unten, mit den gleichen Plannamen, Reihenfolge und Hervorhebung in beiden.
Bauen Sie die Karten mit dem Preistabellen-Widget und die Matrix mit der Vergleichstabellen-Widget, und verknüpfen Sie sie mit einem Anker.
Verwandte Lektüre
