Wie man eine WordPress Preistabelle mit Toggle erstellt

Die Erstellung einer Preistabelle ist ein Muss, wenn Sie Ihre Produkte und Dienstleistungen über Ihre Website verkaufen wollen. Um jedoch mehrere Preispläne anzeigen zu können, die die Kunden leicht vergleichen können, ohne die Seite zu verlassen, müssen Sie der Tabelle die Funktion "Umschalten" hinzufügen.

Mit der Umschaltfunktion können die Benutzer zwischen verschiedenen Preisoptionen navigieren oder wechseln und so eine interaktive Schnittstelle schaffen. So können die Nutzer beispielsweise zwischen monatlichen, jährlichen und lebenslangen Abonnements umschalten.

In diesem Blogbeitrag zeigen wir Ihnen eine Schritt-für-Schritt-Anleitung, wie Sie eine WordPress-Tabelle mit Toggle erstellen können. Lassen Sie uns beginnen.

Schöne Tische erstellen
Mit Block-Editor

Wie man eine WordPress Preistabelle mit Toggle erstellt

Bevor Sie mit dem Lernprogramm beginnen, müssen Sie TischBerg und Ultimative Blöcke Plugins auf Ihrer Website installiert haben. Mit TableBerg können Sie eine Preistabelle erstellen, und mit Ultimate Blocks können Sie die Umschaltfunktion zu der Tabelle hinzufügen.

Sobald Sie die Plugins auf Ihrer Website installiert haben, können Sie mit dem Lernprozess beginnen.

Schritt 01: Hinzufügen des Inhaltsblocks mit Registerkarten

Sobald das Ultimate Blocks Plugin installiert und aktiviert ist, erhalten Sie die Registerkarteninhalt in der Blockbibliothek. Suchen Sie den Block und fügen Sie ihn dem Editor hinzu.

Hinzufügen des Inhaltsblocks mit Registerkarten

Der Block "Tabbed Content" wird dem Editor sofort hinzugefügt.

Tabbed Block zum Editor hinzugefügt

Schritt 02: Hinzufügen des TableBerg-Blocks innerhalb des Tabbed Content Blocks

Der Block "Tabbed Content" ermöglicht das Hinzufügen weiterer Blöcke innerhalb dieses Blocks. Klicken Sie auf die Plus-Taste (+). Suchen Sie den TableBerg-Block und fügen Sie ihn hinzu.

Schritt 03: Erstellen einer Preistabelle in der ersten Registerkarte

Legen Sie die Anzahl der Zeilen und Spalten für Ihre Tabelle fest. Wir wählen 3*3, da wir eine dreispaltige Tabelle erstellen wollen.

Definieren Sie Zeilen und Spalten für Ihre Tabelle

Wie Sie sehen können, ist das Tabellenlayout fertig.

Die Tabelle Layout ist fertig

Schritt 04: Inhalt zur Tabelle hinzufügen

Der TableBerg-Block ermöglicht es Ihnen, verschiedene Arten von Inhalten in seine Zellen einzufügen. Sie können Texte, Listen, Bilder, CTA-Schaltflächen und mehr hinzufügen.

# Spaltentitel hinzufügen

Zunächst müssen wir den Spalten der Tabelle Titel hinzufügen. Wir werden hier eine Preistabelle für ein imaginäres Plugin erstellen. Unser Inhalt wird also entsprechend sein.

Wie Sie sehen, haben wir drei Titel hinzugefügt, sie mittig ausgerichtet und ihre Größe erhöht.

# Preispläne hinzufügen

Als Nächstes fügen Sie die Preispläne zu den Spalten hinzu. Wir haben sie mit der Option "Hervorheben" in der Gutenberg-Symbolleiste eingefärbt.

Preispläne hinzufügen

# Liste Produktmerkmale

Nun ist es an der Zeit, die Funktionen der einzelnen Pläne aufzulisten. TableBerg erlaubt Ihnen, die Block auflisten zur Tabelle hinzufügen. Suchen Sie den Block Liste und fügen Sie ihn der Tabelle hinzu.

Wie Sie sehen können, haben wir in allen Spalten alle Merkmale der einzelnen Tarife aufgeführt.

Produktmerkmale anzeigen

# CTA-Schaltflächen hinzufügen

Schließlich fügen Sie CTA-Schaltflächen zu den Spalten hinzu, indem Sie die Knopfleiste.

CTA-Schaltflächen hinzufügen

Die CTA-Schaltflächen sind auf der Preistabelle bereit.

CTA-Schaltflächen in der Preistabelle

So, Ihr Tisch ist fertig. Sie können den Tisch weiter anpassen und stilisieren, wie Sie wollen. Ich hoffe, du schaffst das alleine.

Schritt 05: Eine neue Tabelle auf einer anderen Registerkarte erstellen

Erstellen Sie eine neue Registerkarte, indem Sie auf die Schaltfläche Plus-Symbol (+). Vergessen Sie nicht, die Registerkarten nach Ihren Wünschen umzubenennen.

Erstellen Sie eine neue Registerkarte mit dem Block "Registerkarteninhalt

Erstellen Sie auf dieser Registerkarte eine neue Tabelle auf die gleiche Weise wie oben beschrieben. Zur besseren Übersichtlichkeit haben wir die Tabellentitel mittig ausgerichtet.

Erstellen einer neuen Tabelle in einer neuen Registerkarte

So, Ihre Preistabelle mit der Umschaltfunktion ist fertig. Zeigen Sie die Tabelle in einer neuen Registerkarte an, um zu sehen, ob alles gut funktioniert.

Schlussfolgerung

Die Erstellung von Preistabellen mit der Toggle-Funktion ist heute bei fast allen Standard-Websites eine Selbstverständlichkeit. Die meisten Websites erstellen sie mit Hilfe von Page Buildern und ähnlichen Lösungen, die die Seite oft schwer machen.

Da TableBerg und Ultimate Blocks jedoch zwei blockbasierte Plugins sind, werden sie die Preisseiten nicht überladen. Sie können sie sogar auf Ihren Staging-Sites oder Ihrem lokalen Host testen. Sie werden leichte und schnelle Geschwindigkeit genießen.

Teilen Sie uns Ihr Feedback im unten stehenden Kommentarfeld mit. Und zögern Sie nicht, uns zu fragen, wenn Sie irgendwelche Fragen haben.



Das Tischberg-Team

Das Frühbucherangebot ist jetzt verfügbar!
Dies ist der Standardtext für die Benachrichtigungsleiste