Elementor-Preistabellen-Widget: Kostenloses Tutorial + 5 Layouts

Auf einer Preisseite entscheiden Besucher, ob sie ihr Geld abgeben. Der Tisch muss sauber lesen, Pläne auf einen Blick vergleichbar machen und den Leser auf die Option hinweisen, die er tatsächlich auswählen möchte. Die Widget der Elementorpreistabelle Von Master-Addons für Elementor Deckt all das ab, kostenlos, kein Code.

Dieses Tutorial deckt den gesamten Build ab: Installation des Plugins, Verwerfen des Widgets in einem Abschnitt und Durcharbeiten der 6 Panels, die den Inhalt steuern (Layout, Header, Preis, Funktionen, CTA-Taste und Ribbon-Abzeichen für den hervorgehobenen Plan).Sie erhalten außerdem 5 integrierte Layouts, Tooltips pro Feature, einfache digitale Downloads auf der Schaltfläche und vollständige Typografiesteuerung.

Sobald Sie mitgefahren sind, erhalten Sie eine Preistabelle, die auf jedem WordPress-Theme richtig aussieht, auf Mobilgeräten richtig gestapelt wird und besser konvertiert als der Standardpreisblock von Elementor.

Was dieser Leitfaden abdeckt:

• Was das Elementor Pricing Table-Widget ist
• Warum eine gute Preistabelle wichtig ist
• So fügen Sie eine Preistabelle in Elementor hinzu (Schritt für Schritt)
• Die 6 Konfigurationspanels erklärt
• Styling Ihrer Preistabelle
• Design-Tipps, die tatsächlich konvertieren
• 5 Anwendungsfälle für das Widget
• Kostenlos vs. Pro: was Sie bekommen
• Häufig gestellte Fragen

Was ist das Elementor-Preistabellen-Widget?

Es handelt sich um ein Drag-and-Drop-Widget, das im Inneren des Elementor-Editors eine WordPress-Preistabelle erstellt, Sie erhalten einen Plan-Header, den Preis mit Währung und Abrechnungszeitraum, eine Funktionsliste, einen Call-to-Action-Button, und ein optionales Ribbon-Badge für den vorgestellten Plan Kein benutzerdefinierter Code, keine Shortcodes, kein HTML-Wrangling.

Das Master Addons Pricing Table Widget befindet sich im kostenlosen Plugin Die 5 Layouts, Ribbon, Pro-Feature-Tooltips und Easy Digital Downloads unterstützen alle Arbeiten ohne Pro-Lizenz Installieren Sie das Plugin und das Widget wird im Elementor-Panel unter der Rubrik Master Addons angezeigt, mit der Bezeichnung “MA Pricing Table”

Warum ein guter Preistisch wichtig ist

Ihre Preisseite ist hochintensiver Traffic Die Leute, die darauf landen, denken bereits über einen Kauf nach Eine schlampige Preistabelle kostet Sie leise echte Einnahmen Die üblichen Gründe:

• Vergleich Reibung. Können Besucher Pläne nicht auf einen Blick vergleichen, springen sie wieder auf Google zurück.
• Keine visuelle Hierarchie. Wenn jeder Plan identisch aussieht, weiß niemand, welchen man eigentlich auswählen soll.
• Schwache CTA. Ein grauer “Mehr erfahren” - Button verliert jedes Mal gegen eine souveräne “Start Free Trial”.

Ein ordentliches Elementorpreistabelle Beschäftigt sich mit all dem Side-by-side-Spalten, einem hervorgehobenen Plan mit einem Band, einer deutlichen Knopffarbe, und Feature-Zeilen, die sich über Spalten hinweg aufreihen Das Widget unten wird mit allem geliefert.

So fügen Sie eine Preistabelle in Elementor hinzu (Schritt für Schritt)

Vollständige Einrichtung unten Dies setzt voraus, dass Elementor bereits installiert ist Wenn nicht, greifen Sie zuerst zur kostenlosen Version aus dem WordPress-Plugin-Verzeichnis.

Schritt 1: Installieren Sie Master-Addons für Elementor

Gehen Sie im WordPress-Admin zu Plugins → Neues hinzufügen und nach “Master Addons for Elementor” Installieren, aktivieren, fertig Die Installation von Master Addons doc Längere Version hat, wenn Ihnen etwas ein Bein stellt.

Schritt 2: Erstellen Sie einen Abschnitt mit der richtigen Anzahl an Spalten

Öffnen Sie die Seite in Elementor Fügen Sie einen neuen Abschnitt hinzu und wählen Sie die Spaltenanzahl basierend darauf aus, wie viele Pläne Sie anzeigen möchten. Drei Spalten für Personal / Business / Developer ist das häufigste Setup. Vier Spalten fühlen sich auf Tablets überfüllt an, und alles über vier erzwingt auf dem Handy praktisch eine horizontale Schriftrolle.

Schritt 3: Ziehen Sie das Widget der MA-Preistabelle in Ihren Abschnitt

Suchen Sie im Widget-Panel nach “Preistabelle” Sie sehen “M.A. Preistabelle” mit dem Master Addons-Abzeichen Ziehen Sie es in die erste Spalte.

Schritt 4: Überprüfen Sie das Standardlayout

Elementor lädt eine vollbesetzte Voreinstellung, sobald Sie das Widget in Planen Titel, Preis, Featureliste, Button, Menüband Es lohnt sich, sich anzusehen, bevor Sie Dinge ändern, damit Sie wissen, was jedes Feld tatsächlich steuert.

Sobald ein Plan so konfiguriert ist, wie Sie ihn haben möchten, klicken Sie mit der rechten Maustaste auf das Widget und wählen Sie Duplizieren (oder Kopieren-Einfügen), um die anderen Pläne aufzubauen. Viel schneller als jede Karte von Grund auf neu zu starten, und es garantiert, dass die Funktionszeilen spaltenübergreifend ausgerichtet sind.

Die 6 Konfigurationstafeln erklärt

Die Karteikarte Inhalt hat sechs zusammenklappbare Panels Was jedes macht, und die Einstellung darin, die tatsächlich zählt:

1. Preisinhalt (Layout Picker)

Dieses Panel wählt eines davon aus 5 Variationen des Preistabellenlayouts. Jedes Layout ordnet Kopfzeile, Preis und Taste etwas anders an Das andere, was hier lebt, ist der Schalter “Highlight this table” Schalten Sie es ein für den Plan, den Besucher auswählen sollen Dieser Umschalter fügt die visuelle Betonung hinzu und entsperrt die Ribbon-Einstellungen unten auf der Registerkarte Inhalt.

2. Kopfzeile

Der Planname (Personal, Business, Developer) und ein optionaler Untertitel (“Für Solo-Freelancer,” “Für kleine Teams”).Man kann das HTML-Tag des Titels ändern, H3 ist normalerweise richtig, es sei denn, der Abschnitt über der Tabelle verwendet bereits H3, in diesem Fall verschieben Sie es nach H4, damit Ihre Überschriftenhierarchie sauber bleibt. Die Hintergrundfarbe der Kopfzeile ist unabhängig vom Rest der Karte, sodass Sie die obere Leiste bei Bedarf mit einer anderen Farbe abstreifen können.

3. Preisgestaltung

Währungssymbol, Preisbetrag, Originalpreis (durchgestrichen bei Rabatten), und Abrechnungszeitraum Das ursprüngliche Preisfeld ist praktisch, wenn Sie eine Promo ausführen Legen Sie den Verkaufspreis in den Hauptbetrag und den regulären Preis in das Originalfeld, und das Widget rendert den Durchstreichen automatisch Kein CSS benötigt.

4. Funktionen

Fügen Sie so viele Funktionszeilen hinzu, wie Sie möchten Jede Zeile enthält Feature-Text, ein Symbol (Häkchen setzen, kreuzen, alles aus der Symbolbibliothek) und einen optionalen Tooltip. In den meisten Preistabellen werden Tooltips zu wenig verwendet Wenn ein Feature eine 10-Wörter-Klärung benötigt (“Inklusive 3 Teamsitze” → “Extra-Sitze sind jeweils 5 $/Mo”), verwenden Sie einen Tooltip, anstatt ihn in den Haupttext zu packen.

Ausrichtungstipp: Behalten Sie die gleiche Reihenfolge der Featurelisten über alle drei Pläne hinweg bei Personen scannen Preistabellen horizontal, Zeile für Zeile Wenn Zeile 3 “Unlimited users” auf dem Personal-Plan, aber “24/7 support” auf Business ist, brechen Sie dieses Scan-Muster und Besucher geben auf halbem Weg auf.

5. Footer (Die Call-to-Action-Taste)

Schaltflächentext, URL, Nofollow-Toggle, New-Tab-Toggle, dazu eine optionale Zeile Sekundärtext unterhalb des Buttons (“14-Tage Geld-zurück-Garantie”).Verstehen Sie über Easy Digital Downloads, befindet sich in diesem Panel die Option EDD Add-to-Cart Schalten Sie es ein und der Button wird zum Buy-Now-Trigger anstelle eines einfachen Links.

6. Band (Featured Plan Badge)

Das Band erscheint nur auf dem Plan, wo Sie “Highlight this table” zurück in Panel 1. Gängiger Bandtext ist “Popular” oder “Best Value” Sie können Ausrichtung (oben links, oben rechts, oben-mitte) und Farbe ändern Halten Sie das Band kurz Zwei Wörter max Lange Bänder wickeln sich unbeholfen auf dem Handy.

Styling Ihres Elementor-Preistisches

Wechseln Sie zur Registerkarte Stil Sie erhalten ein Panel für jeden der sechs Inhaltsabschnitte, plus ein Allgemeines Panel für die Karte selbst (Grenzradius, Schatten, Hintergrund) Jedes Panel behandelt Typografie, Farbe, Abstände und Randeinstellungen.

Was man eigentlich ändern sollte:

• Kartenhintergrund und Randradius. Passen Sie Ihre Website an. 8 – 2 x Radius funktioniert für die meisten modernen Designs. Flach (0 Radius) für einen eher Corporate Look.
• Ausgewählter Planhintergrund. Machen Sie den hervorgehobenen Plan optisch deutlich. Eine einfarbige Markenfarbe auf der vorgestellten Karte neben weißen Karten ist der einfachste Zug und funktioniert fast jedes Mal.
• Preistypografie. Der Preis sollte der größte Text auf der Karte sein, größer als der Planname. 40 – 56 Prozent ist typisch. Alles, was kleiner ist und die ganze Karte als generische Marketingkopie lautet.
• Knopf. Passen Sie den primären Button Ihrer Website an Der vorgestellten Plan erhält einen vollständig ausgefüllten Button. Andere Pläne erhalten umrissene Schaltflächen. Diese visuelle Lücke führt das Auge zu Ihrem bevorzugten Plan, ohne dass ein Pfeil oder ein „wählen Sie dieses“-Label erforderlich sind.

Für einen tieferen Durchlauf der visuellen Entscheidungen, die die Konvertierungsnadel bewegen, siehe unsere Tipps zur Elementorpreistabelle Beitrag.

Preise Tisch Design Tipps, die tatsächlich konvertieren

Muster, die auf echten Preisseiten Bestand haben:

• Drei Pläne, nicht vier. Persönlich / Geschäft / Entwickler funktioniert, weil drei Optionen die Entscheidung einfach halten Vier Pläne bremsen die Leute aus und ein nicht trivialer Teil von ihnen geht, ohne etwas zu pflücken.
• Verankerung des mittleren Grundrisses. Legen Sie Ihren Zielplan in die mittlere Spalte und markieren Sie ihn wie abgebildet Besucher vergleichen den günstigen Plan damit und entscheiden, dass die Mitte besser ist Sie vergleichen den teuren Plan damit und entscheiden, dass die Mitte ausreicht.
• Preis zuerst, dann Funktionen. Die Leute scannen von oben nach unten Legen Sie den Preis nahe der Oberseite der Karte, damit sie die Zahl vor der Funktionsliste sehen.
• Kurze Feature-Etiketten. “Unlimited projects” schlägt “Man kann unbeschränkt viele Projekte ohne Einschränkungen erstellen” Nutzen Sie Tooltips für die Langversion.
• Ein CTA pro Karte. Ein Button pro Plan Nicht “Mehr lernen” neben “Jetzt kaufen” auf die gleiche Karte setzen Dieser Split tötet die Konvertierung, weil die Besucher jedes Mal den Klick mit geringerer Bindung auswählen.
• Geld-zurück-Notiz in der Nähe des Buttons. Eine kleine “14-Tage Geld-zurück-Garantie” - Linie unter dem CTA reduziert Kaufangst Freies Feld im Footer-Panel.

5 Anwendungsfälle für das Elementor-Preistabellen-Widget

1. SaaS Preisseite. Dreistufige Pläne mit einem Ribbon auf dem mittleren Plan Der Standard-Use-Case und der, auf den das Widget abgestimmt ist.
2. Servicepreise. Freelancer und Agenturen nutzen das gleiche Widget für Servicepakete (Basic / Standard / Premium).Tauschen Sie im Feld Abrechnungszeitraum “pro Monat” gegen “pro Projekt”.
3. Pläne für den Mitgliedschaftsstandort. Kombinieren Sie es mit einer Funktion wie Inhalt einschränken Zugang nach Stufen zu gattern.
4. Kurspreisgestaltung. Einzelkurs, Einzelkohorte, lebenslanger Zugang Legen Sie das Band auf die lebenslange Option, da dies normalerweise der Verkauf mit der höchsten Marge ist.
5. WooCommerce Plan Vergleich. Bei digitalen Produkten oder Abo-Boxen dient das Widget gleichzeitig als Planvergleich über dem Kauf-Button.

Wenn Sie viele Funktionen über viele Pläne hinweg vergleichen müssen (nicht nur 3-6 Stichpunkte pro Karte), muss die Vergleichstabelle für Master-Addons Widget passt besser Es verarbeitet funktionslastige Seiten mit 15+ Zeilen, ohne eng auszusehen.

Kostenlos vs. Pro: Was Sie bekommen

Das Widget MA Pricing Table befindet sich im kostenlosen Master Addons Plugin Alle 5 Layouts, das Ribbon, die Tooltips, Symbole, und die EDD-Integration funktionieren ohne Pro-Lizenz Pro schaltet andere Widgets und das breitere Feature, das darum herum gesetzt ist, frei.

Wenn Sie nur die Preistabelle benötigen, reicht kostenlos Wenn Sie die volle 80+ Widget-BibliothekThemenersteller, Popup-Ersteller und VorlagenkitsPrüfen Master Addons Pro Preise. Für eine Seite-an-Seite mit dem anderen großen Elementor-Addon-Pack siehe Master-Addons vs. Ultimate-Addons.

Am liebsten ansehen? hier ein kurzer walkthrough in Elementor:

Häufig gestellte Fragen

Einwickelnd

Eine Preisseite, die mit dem erstellt wurde Elementor-Preistabelle Widget Von Master Addons behandelt die Fälle, die für die meisten WordPress-Sites wichtig sind: drei Pläne, eine vorgestellte Option, saubere Schaltflächen und vollständige Stilsteuerung über das Elementor-Panel Kein Code erforderlich Wenn Sie Details zu jeder Einstellung wünschen, wird die Offizielle Dokumentation der Preistabelle Vollständige Referenz hat.

Koppeln Sie die Preistabelle mit einem starken Call-to-Action-Bereich darüber und Sie haben eine Preisseite, die funktioniert Für mehr Conversion-fokussierte Widget-Ideen ist die Leitfaden für Elementor-Marketing-Widgets Ist eine gute nächste Lektüre.

Verwandte Lektüre: Tipps zur Gestaltung von Preistischen | Elementor FlipBox Widget | Symbolbibliothek Master Addons