Die Präsentation Ihrer Preistabellen ist wichtig, um die Kunden zu beeinflussen. Eine wirkungsvolle Möglichkeit, Preistabellen aufzuwerten, ist die Integration eines Lesebands. Dabei handelt es sich um ein auffälliges Banner, das diagonal über eine Tabelle gelegt wird, um bestimmte Angebote, Rabatte und Funktionen hervorzuheben.
Egal, ob Sie einen zeitlich begrenzten Rabatt, eine Sonderfunktion oder ein heiß begehrtes Paket bewerben, ein gut platziertes Band kann die potenziellen Kunden sofort zu einer Entscheidung bewegen. Tischberg ist ein intuitives und leistungsfähiges Plugin für diese Aufgabe.
In diesem Beitrag zeigen wir Ihnen, wie Sie mit Tableberg eine Preistabelle mit Farbband in WordPress hinzufügen.
Schöne Tische erstellen
Mit Block-Editor
Sobald Sie das Plugin auf Ihrer Website installiert haben, können Sie mit dem folgenden Tutorial beginnen.
Step 1: Add the Tableberg Block to the Editor
Das Plugin fügt einen Block namens Tischberg zur Gutenberg-Block-Bibliothek hinzufügen. Fügen Sie den Block zu Editor einfach die Presse das Plus-Symbol (+).
Legen Sie die Anzahl der Spalten und Zeilen fest, die Sie für Ihre Tabelle benötigen. Für dieses Tutorial werden wir Folgendes festlegen 3*1 für Spalten und Zeilen.
Sie sehen, dass das Grundlayout für die Kalkulationstabelle mit Spalten und einer Zeile erstellt wurde.
Step 2: Add Content to the Table
Eine Preistabelle enthält in der Regel Produktnamen, Bilder, Preise, ermäßigte Preise und CTA-Schaltflächen. Sehen wir uns an, wie man sie zur Tabelle hinzufügt.
Den Produktnamen hinzufügen
Tableberg ermöglicht es Ihnen, verschiedene Arten von Blöcken zu seinen Zellen hinzuzufügen, ähnlich wie der Gutenberg-Block-Editor. Hinzufügen der Absatzblock um den Namen des Produkts zu schreiben. (Standardmäßig wird der Absatzblock zu den Tabellenzellen hinzugefügt).
Schreiben Sie den Namen Ihres Produkts in die Zelle. Richten Sie den Text mittig aus, machen Sie ihn fett, ändern Sie seine Farbe und passen Sie die Größe an, indem Sie die in der folgenden Abbildung gezeigten Optionen verwenden.
Das Produktbild hinzufügen
Fügen Sie den Bildblock zur Preistabelle hinzu.
Mit dem Bildblock können Sie das Produktbild hochladen. Ändern Sie die Größe des Bildes nach Bedarf und richten Sie es passend aus.
Einen früheren Preis hinzufügen
Die Anzeige der Differenz zwischen dem vorherigen und dem aktuellen Preis ist eine gute Möglichkeit, den Rabatt hervorzuheben. Fügen wir also einen früheren Preis unter dem Produktbild ein.
Das Hinzufügen eines Durchstreichungseffekts zum vorherigen Preis kann die Aufmerksamkeit der Leute erregen. Um dies zu tun, Wählen Sie den Preis mit Ihrem Cursor. Klicken Sie auf die Mehr Optionen in der Symbolleiste.
Gehe zu die Highlight und Durchgestrichene Optionen. Sie können die Farbe des Preises ändern und ein Durchstreichen hinzufügen.
Den aktuellen Preis des Produkts hinzufügen
Fügen Sie nun den aktuellen Preis des Produkts in einer vergleichsweise großen Schrift hinzu, damit er ins Auge fällt.
Hinzufügen einer CTA-Schaltfläche
Fügen Sie am Ende des gesamten Inhalts die Knopfleiste.
Ändern Sie die Hintergrundfarbe der Schaltfläche, die Textfarbe, die Schriftgröße und die Auffüllung. Nehmen Sie diese Änderungen nach Belieben vor.
Step 3: Add Spaces Between the Blocks
Der Spalteninhalt ist also fertig. Aber wie Sie sehen können, sind alle Blöcke zu dicht gedrängt. Wir müssen Abstand zwischen ihnen einfügen, um ein frischeres Aussehen zu schaffen.
Um dies zu tun, die jeweilige Spalte auswählen. Gehen Sie dann zum Registerkarte "Stile. Come to the Block-Abstand Option durch Blättern in der Registerkarte. Vergrößern Sie den Platz, indem Sie einen Wert in das Feld eintragen.
Fügen Sie in ähnlicher Weise Inhalte zu den anderen Spalten hinzu. Um jedoch Zeit zu sparen, können Sie die Spalte duplizieren und dann den Inhalt aktualisieren. Hier ist ein Leitfaden über wie man eine Tableberg-Spalte und -Zeile dupliziert.
Step 4: Add Radius to the Table Columns
Sie können die Ästhetik verbessern, indem Sie den Tabellenspalten einen Randradius hinzufügen. Select die Tabelberg-Symbol in der Symbolleiste. Gehe zu die Registerkarte "Stile.
Blättern und zu sich kommen Abstand zwischen den Zellen. Durch Ziehen der entsprechenden Option können Sie Leerzeichen zwischen den Spalten der Tabelle hinzufügen.
Sie werden sehen, dass die Tabelle Randleiste Option direkt darunter. Satz Ihr gewünschtes Wert des Radius fürr sowohl den inneren als auch den äußeren Rand.
So können Sie Ihre Preistabelle vorbereiten.
Step 5: Add a Ribbon to the Pricing Table
Wählen Sie die Spalte aus, der Sie ein Farbband hinzufügen möchten. Klicken Sie auf das Plus-Symbol (+) und suchen Sie die Option Farbbandblock. Klicken Sie dann auf und den Block in die Spalte.
Das Farbband wird der Tabelle hinzugefügt. Als Nächstes wird aus dem Registerkarte EinstellungenWählen Sie den Farbbandtyp, den Farbbandtext, die Seite und den Abstand.
Danach passen Sie den Text und die Hintergrundfarbe in der Registerkarte "Stile.
Ihre Preistabelle ist also fertig und mit einer Schleife versehen.
Wir schließen!
Ich hoffe, diese Anleitung hat Ihnen gefallen. Aber es gibt einige Punkte, die Sie beachten müssen. Achten Sie darauf, dass Ihre Tabelle sauber und übersichtlich ist. Minimalistisch gestaltete Preistabellen wirken immer auf potenzielle Kunden.
Zweitens: Verwenden Sie einen klaren und prägnanten Text, der den Webbesucher sofort anspricht. Wenn möglich, fügen Sie einige Vorteile/Merkmale der Produkte in die Tabelle ein. Wenn Sie in Ihren Preistabellen mehrere Pläne abdecken wollen, ist es besser, sie mit einem Kippschalter anzuzeigen.
Hier ist ein Leitfaden über wie man eine Preistabelle mit dem Kippschalter in WordPress erstellt.
