Erstellen Sie Preistabellen mit dem Gutenberg Block Editor

In mehr als einem Jahr haben wir eine großartige Entwicklung im Gutenberg-Blockeditor erlebt. Im Vergleich zum klassischen WordPress-Editor können wir jetzt Elemente in unseren Beiträgen und Seiten gestalten, die vorher nur durch Codierung möglich waren.

Mit dem klassischen Editor war es beispielsweise am einfachsten, eine Tabelle in einem Beitrag anzuzeigen, indem Sie diese Tabelle in einer Tabelle erstellen, sie als Bild exportieren und sie dann dort in den Beitrag einfügen, wo Sie sie anzeigen wollten. Aber einer der Blöcke, die wir jetzt im neuen WordPress-Editor finden, ist der Tabellenblock. Mal sehen, wie wir mit Gutenberg eine Tabelle erstellen und inwieweit wir mit demselben Block eine Preistabelle erstellen könnten.

Der Tischblock

Das Erstellen einer Tabelle ist so einfach wie das Hinzufügen eines neuen Tabellenblocks, in dem wir die Anzahl der gewünschten Zeilen und Spalten sowie deren Ausrichtung angeben.

In einem Tabellenblock können wir die folgenden Eigenschaften anpassen:

Wir können auch in jeder Zelle die Ausrichtung des Textes angeben und ob die Schriftart fett oder kursiv ist, und Links hinzufügen. Darüber hinaus können wir die Tabelle jederzeit ändern, indem wir Zeilen und/oder Spalten hinzufügen oder entfernen.

Auf diese Weise sehen wir, dass wir leicht die folgende Tabelle erstellen können:

Dies ist viel einfacher und schneller als das, was wir mit dem klassischen Editor tun könnten. Und das erhaltene Ergebnis kann sicherlich dazu dienen, eine Datentabelle zu zeigen.

Einschränkungen für Tabellenblöcke

Obwohl es für uns sehr einfach war, die vorherige Tabelle zu erstellen, sind wir auf einige Einschränkungen gestoßen. Zum einen sind die Tabellen, die Sie mit dem Tabellentyp-Block in Gutenberg entwerfen, nicht responsiv. Das heißt, die Tabelle bricht nicht um, sondern wird kleiner, ohne dass die verschiedenen Elemente der Tabelle spaltenweise angezeigt werden können:

Eine Tabelle, die sich vollständig an die Geräte anpasst, zeigt die Elemente der Tabelle, indem die Tabelle in Spalten aufgeteilt wird, sodass alle Zellen viel besser angezeigt werden.

Zusätzlich zu der (Un-)Fähigkeit, sich an Geräte anzupassen, wie Sie vielleicht bemerkt haben, können wir in einem Tabellenblock nicht einfach die Schriftart und -größe, Farben usw. in jeder Zelle ändern. Das heißt, aufgrund all seiner Einschränkungen ist der Gutenberg-Tabellenblock nicht geeignet, um eine attraktive Preistabelle für Ihre Produkte zu erstellen.

Wie können wir diese responsiven Tabellen erstellen?

Alternativen

Der Spaltenblock

Eine Alternative wäre, zu versuchen, die Tabelle mit dem Spaltenblock zu gestalten:

Basic

für Freiberufler und persönliche Websites

29 € / Monat

1 Website

5.000 Besuche auf getesteten Seiten

Abonnieren

Fachmann

für Kleinunternehmer

89 € / Monat

5 Seiten

35.000 Besuche auf getesteten Seiten

Abonnieren

Unternehmen

für Teams, die sich auf die Optimierung konzentrieren

259 € / Monat

? 10 Seiten

200.000 Besuche auf getesteten Seiten

Abonnieren

Der Vorteil des Spaltenblocks im Vergleich zum Tabellenblock besteht darin, dass er vollständig reaktionsfähig ist, und auf einem mobilen Bildschirm sehen wir, dass jeder der Pläne hinter dem anderen angezeigt wird.

Wir sehen, dass die Spalten vollständig ansprechbar sind. Und sicher sind die Säulen, um wenig Informationen und ohne zu viele Komplikationen anzuzeigen, eine Alternative, die man in Betracht ziehen sollte.

Preistabellen-Block-Plugins

Meine Empfehlung, wenn Sie attraktive Preistabellen erstellen müssen, ist, dass Sie einige der Plugins installieren, die dafür Blöcke enthalten. Sie erlauben Ihnen möglicherweise keine Anpassungen, ohne Code zu berühren, aber in vielen Fällen können Sie sehr elegante Ergebnisse erzielen. Sehen wir uns einige Beispiele an, die vollständig in den Gutenberg-Blockeditor integriert sind.

CoBlocks

Coblocks ist ein Plugin, das eine ganze Reihe von Blöcken enthält, die vollständig an Gutenberg angepasst sind. Einer davon ist der Price Table-Block.

Es ist sehr einfach und benutzerfreundlich und Sie können ohne Codierung die Anzahl der Spalten und einige typografische Aspekte sowie die Farben der Spalten und des Textes anpassen. Sie haben schnell eine voll responsive Preistabelle wie die im folgenden Bild gezeigte.

Getwid

In ähnlicher Weise enthält das Getwid-Plugin auch eine ganze Reihe von Blöcken, die vollständig mit dem Gutenberg-Editor kompatibel sind. Sie können schnell eine voll responsive Preistabelle wie diese erstellen:

In diesem Fall können Sie die Schriftarten sowie die Hintergrund- und Textfarben anpassen.

Premium-Blöcke für Gutenberg

Das Plugin Premium Blocs for Gutenberg enthält auch Blöcke, mit denen Sie sehr attraktive Preistabellen erstellen können. Unten zeige ich Ihnen ein Preistabellenbild, das ich mit dem in Spalten eingefügten Preistabellenblock erstellt habe.

Mit diesem Block können Sie unter anderem Farben, Schriftarten, die Art der Schaltflächen anpassen, wenn Sie ein Symbol einfügen möchten, Eigenschaften zur Anzeige des Preises, Funktionen und Beschreibungen. Wie Sie sehen können, ermöglicht es Ihnen eine sehr vollständige Anpassung.

Plugins mit integrierten Editoren

Alternativ finden Sie andere Arten von Plugins, die einen integrierten Preistabellen-Editor enthalten, der sich in Ihr WordPress-Dashboard integriert und mit dem Sie sehr vollständige und benutzerdefinierte Tabellen erstellen können. Sobald die gewünschte Tabelle erstellt ist, kann diese Tabelle mithilfe eines Shortcodes in jede Seite oder jeden Beitrag eingefügt werden. Sehen wir uns einige Beispiele an:

Responsive Preistabelle

Responsive Pricing Table ist ein Plugin, das Ihrem WordPress einen neuen Editor hinzufügt, damit Sie Preistabellen erstellen können. Sie können eine große Anzahl von Plänen hinzufügen und jeden von ihnen anpassen.

Für jeden Plan können Sie den Namen, den Untertitel, die Beschreibung und den Preis hinzufügen. Sie können auch eine Liste mit Funktionen hinzufügen, die Kaufschaltfläche anpassen und das Farbschema des Plans ändern.

Sobald der Plan erstellt ist, müssen Sie ihn nur noch mit einem Shortcode auf der Preisseite hinzufügen.

Preistabelle von Supsystic

Das Supsystic Pricing Table-Plugin fügt Ihrem WordPress-Dashboard einen Drag-and-Drop-Editor hinzu, mit dem Sie Tabellen erstellen können. Es bietet Ihnen viele ansprechende Tabellendesigns. In der kostenlosen Version stehen Ihnen bis zu 7 Designs zur Verfügung.

Nachdem Sie das gewünschte Tabellendesign ausgewählt haben, steht Ihnen ein Editor zur Verfügung, mit dem Sie die Anzahl der Spalten ändern und viele Funktionen für jeden der angezeigten Pläne anpassen können. Und auch das Layout können Sie jederzeit ändern. Schließlich kann die Tabelle wie bisher in jede Seite oder jeden Post mit einem Shortcode eingebunden werden.

Andere kostenlose Plugins, die Preistabellen-Editoren integrieren, sind:

• Preistabelle von ARPrice
• Preistabellen WordPress Plugin – Einfache Preistabellen von Fatcat Apps
• Responsive Pricing Table Builder – wpPricing Builder
• WRC-Preistabellen
• Preistabellen-Generator – AP-Preistabellen Lite
• TC-Preistabelle nach themesCode
• Preistabelle – bh A WP Life

Fazit

Wie Sie sehen, haben Sie in WordPress eine Vielzahl von Alternativen, um Preistabellen ohne zusätzliche Kosten und ohne direkt codieren zu können, zu erstellen. Es ist also nur eine Frage der Wahl der Option, die Ihren Anforderungen am besten entspricht.

Denken Sie daran, dass die Seite, auf der Sie die Preise Ihrer Produkte anzeigen, letztendlich die wichtigste ist, um Kunden zu gewinnen. Die Zeit, die Sie damit verbringen, es attraktiv zu machen, wird also nicht umsonst sein. Und um Sie zu inspirieren, können Sie sich das Design der Preistabelle unseres Nelio A/B-Testing-Produkts ansehen, das als Beitragsbild dieses Beitrags hervorsticht ?.