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.
Der Block "Tabbed Content" wird dem Editor sofort 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.
Wie Sie sehen können, ist das Tabellenlayout 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.
# 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.
# CTA-Schaltflächen hinzufügen
Schließlich fügen Sie CTA-Schaltflächen zu den Spalten hinzu, indem Sie die Knopfleiste.
Die CTA-Schaltflächen sind auf der Preistabelle bereit.
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 auf dieser Registerkarte eine neue Tabelle auf die gleiche Weise wie oben beschrieben. Zur besseren Übersichtlichkeit haben wir die Tabellentitel mittig ausgerichtet.
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.
