Mit dem Block „Preistabelle“ können Sie optisch ansprechende und anspruchsvolle Preistabellen erstellen, um Ihre Produkte oder Dienstleistungen zu präsentieren. Ganz gleich, ob Sie Abonnementmodelle, Servicestufen oder Produktpakete vorstellen möchten – mit diesem Block haben Sie die vollständige Kontrolle darüber, wie die einzelnen Modelle dargestellt werden.
Jede Preistabelle enthält einen Plan-Namen, den Preis mit Währungssymbol, den Abrechnungszeitraum, eine Beschreibung, einen optionalen regulären/ursprünglichen Preis, eine Liste der Funktionen und bis zu zwei Call-to-Action-Schaltflächen. Verwenden Sie mehrere Preistabellen-Blöcke nebeneinander, um einen vollständigen Preisabschnitt zu erstellen, der Besuchern hilft, Pläne zu vergleichen und eine Kaufentscheidung zu treffen.
Hinzufügen des Preistabellenblocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Preistabellenblock zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „Design“ > „Blöcke“ den Block „Preistabelle“ per Drag & Drop in den gewünschten Abschnitt Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Klicken Sie nach dem Hinzufügen auf den Block „Preistabelle“, um dessen Einstellungen zu öffnen. Die Registerkarte „Inhalt“ ist in einen Hauptbereich für die Einstellungen der Planüberschrift und der Schaltflächen unterteilt, gefolgt von einem Abschnitt „Funktionsliste“ für die Funktionen des Plans.
Planüberschrift:
- Plan Name: Geben Sie den Namen Ihres Preisplans ein (z. B. Basic, Pro, Enterprise). Dieser wird oben in der Preistabelle deutlich sichtbar angezeigt.
- Preis: Geben Sie den numerischen Preis für den Tarif ein (z. B. 29). Das Währungssymbol und der Zeitraum werden separat festgelegt.
- Währungssymbol: Wählen Sie das anzuzeigende Währungssymbol aus einer Dropdown-Liste gängiger Währungen aus, darunter Dollar ($), Euro (€), Pfund (£), Rupie (₹), Yen (¥) und viele mehr. Wählen Sie „Benutzerdefiniert“, um ein beliebiges Symbol in das Feld „Benutzerdefiniertes Symbol“ einzugeben.
- Position des Währungssymbols: Legen Sie fest, ob das Währungssymbol vor oder nach dem Preis angezeigt werden soll.
- Zeitraum: Geben Sie den Text für den Abrechnungszeitraum ein, der nach dem Preis erscheint (z. B. /Monat, /Jahr, /Benutzer). Lassen Sie das Feld leer, um den Preis ohne Zeitraum anzuzeigen.
- Regulären Preis anzeigen: Aktivieren Sie diese Option, um einen Original- oder regulären Preis über dem aktuellen Preis anzuzeigen – nützlich, um einen reduzierten Preis anzuzeigen. Wenn diese Option aktiviert ist, geben Sie den regulären Preis und eine Bezeichnung für den regulären Preis (z. B. „Normalerweise“) ein, die davor steht.
- Beschreibung: Geben Sie einen kurzen Slogan oder eine Beschreibung für den Plan ein (z. B. „Perfekt für Anfänger“). Unterstützt grundlegende Rich-Text-Formatierungen wie Fettdruck, Kursivschrift, Unterstreichung und Links.
Knöpfe:
- Schaltfläche „Oben anzeigen“: Aktivieren Sie diese Option, um eine Call-to-Action-Schaltfläche über der Funktionsliste anzuzeigen. Wenn diese Option aktiviert ist, geben Sie den Text für die Schaltfläche „Oben“ und den Link für die Schaltfläche „Oben“ ein und aktivieren Sie optional die Option „In neuem Fenster öffnen“ für den Link. Legen Sie den Randradius der Schaltfläche „Oben“ (0–100 px) fest, um die Abrundung der Ecken der Schaltfläche zu steuern.
- Schaltfläche unten anzeigen: Aktivieren Sie diese Option, um eine zweite Call-to-Action-Schaltfläche unterhalb der Funktionsliste anzuzeigen. Wenn diese Option aktiviert ist, geben Sie den Text für die Schaltfläche unten und den Link für die Schaltfläche unten ein und aktivieren Sie optional die Option „In neuem Fenster öffnen“. Passen Sie den Randradius der Schaltfläche unten an Ihr Design an.
Funktionsliste:
- Funktionselemente: Jedes Funktionselement wird als verschiebbare Zeile angezeigt. Verschieben Sie Elemente, um sie neu anzuordnen. Bewegen Sie den Mauszeiger über ein Element, um die Schaltflächen zum Duplizieren und Löschen anzuzeigen. Klicken Sie auf den Text eines Elements, um dessen individuelle Einstellungen anzuzeigen.
- Text: Geben Sie den Beschreibungstext für den Artikel ein. Unterstützt grundlegende Rich-Text-Formatierungen wie Fettdruck, Kursivschrift, Unterstreichung und Links.
- Symbol: Wählen Sie mithilfe der Symbolauswahl ein Symbol aus, das neben dem Funktionstext angezeigt werden soll. Standardmäßig wird ein Häkchen-Symbol verwendet.
- Neues Element hinzufügen: Klicken Sie auf die Schaltfläche am Ende der Funktionsliste, um eine neue Funktionszeile hinzuzufügen.
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie die Typografie, Farben, Schaltflächen und das allgemeine Erscheinungsbild Ihrer Preistabelle feinabstimmen. Die Registerkarte „Erweitert“ ist in fünf Stilabschnitte unterteilt, gefolgt von den Standardsteuerelementen für Abstand und Sichtbarkeit.
Kopfzeile:
- Typografie des Plan-Namens: Legen Sie die Schriftfamilie, Größe, Stärke und den Stil für den Text des Plan-Namens fest.
- Planname Farbe: Legen Sie die Farbe des Plannamens fest.
- Regulärer Preis Typografie: Legen Sie die Typografie für den regulären (ursprünglichen) Preis fest, wenn die Option „Regulären Preis anzeigen“ aktiviert ist.
- Normalpreis Farbe: Legen Sie die Farbe des Normalpreis-Textes fest.
- Beschreibung Typografie: Legen Sie die Typografie für den Beschreibungstext des Plans fest.
- Beschreibung Farbe: Legen Sie die Farbe des Beschreibungstextes fest.
- Hintergrundfarbe: Legen Sie die Hintergrundfarbe des Kopfbereichs fest (Name des Plans, Preis und Beschreibung).
- Abstand: Legen Sie den inneren Abstand (0–100px) innerhalb des Kopfbereichs fest.
Knöpfe:
- Farbe der oberen Schaltfläche: Legen Sie die Hintergrundfarbe der oberen Call-to-Action-Schaltfläche fest.
- Größe des oberen Knopfes: Wählen Sie die Größe des oberen Knopfes – klein, mittel, groß, extra groß oder 2X groß.
- Symbol vor dem Text der Schaltfläche „Top Button“: Fügen Sie mithilfe der Symbolauswahl ein Symbol hinzu, das vor dem Text der Schaltfläche angezeigt wird.
- Symbol nach dem Text der Schaltfläche „Top Button“: Fügen Sie mithilfe der Symbolauswahl ein Symbol hinzu, das nach dem Text der Schaltfläche angezeigt wird.
- Farbe der unteren Schaltfläche: Legen Sie die Hintergrundfarbe der unteren Call-to-Action-Schaltfläche fest.
- Größe der unteren Schaltfläche: Wählen Sie die Größe der unteren Schaltfläche aus – Klein, Mittel, Groß, Extra groß oder 2X Groß.
- Symbol vor dem Text der unteren Schaltfläche: Fügen Sie ein Symbol hinzu, das vor dem Text der unteren Schaltfläche angezeigt wird.
- Symbol nach dem Text der unteren Schaltfläche: Fügen Sie ein Symbol hinzu, das nach dem Text der unteren Schaltfläche angezeigt wird.
Preis:
- Preistypografie: Legen Sie die Schriftfamilie, Größe, Stärke und den Stil für die Hauptpreiszahl fest.
- Preis Farbe: Legen Sie die Farbe der Hauptpreiszahl fest.
- Preis-Hochgestellt-Typografie: Legen Sie die Typografie für das Währungssymbol fest, wenn es als hochgestellte Zahl neben dem Preis angezeigt wird.
- Preis-Hochgestellt oben: Passen Sie die vertikale Position des Währungssymbols hochgestellt relativ zur Preisangabe an.
Funktionsliste:
- Funktionsliste Typografie: Legen Sie die Schriftart, Größe, Stärke und den Stil für den gesamten Text der Funktionselemente fest.
- Funktionsliste Farbe: Legen Sie die Textfarbe der Funktionselemente fest.
- Symbolfarbe: Legen Sie die Farbe der Symbole fest, die neben den einzelnen Funktionselementen angezeigt werden.
- Abstand zwischen: Legen Sie den Abstand (1–100 px) zwischen den einzelnen Elementen in der Liste fest.
- Ausrichtung: Legen Sie die horizontale Ausrichtung der Funktionsliste fest – links, mittig oder rechts.
- Hintergrundfarbe: Legen Sie eine Hintergrundfarbe für den Bereich der Funktionsliste fest.
- Abstand: Legen Sie den inneren Abstand (0–100px) innerhalb des Bereichs der Funktionsliste fest.
Block:
- Border Radius: Legt die Eckenrundung des gesamten Preistabellenblocks fest (0–100px).
- Rahmenstil: Legen Sie den Rahmenstil für den Block fest – durchgehend, gepunktet oder gestrichelt.
- Rahmenfarbe: Legt die Farbe des Blockrahmens fest.
- Rahmenbreite: Legen Sie die Rahmenstärke pro Seite fest (oben, rechts, unten, links). Aktivieren Sie das Synchronisierungssymbol, um denselben Wert auf alle Seiten gleichzeitig anzuwenden.
Abstand:
- Rand: Steuert den äußeren Abstand um Ihren Preistabellenblock herum (oben, rechts, unten, links). Damit legen Sie fest, wie viel Platz zwischen der Tabelle und den umgebenden Elementen auf der Seite angezeigt wird.
- Abstand: Passen Sie den inneren Abstand innerhalb Ihres Preistabellenblocks an (oben, rechts, unten, links). Dadurch entsteht ein Abstand zwischen dem Tabelleninhalt und den Blockrändern.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Preistabellenblock an. Diese ID wird automatisch von SeedProd für benutzerdefiniertes Styling oder JavaScript-Targeting erstellt.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefiniertem CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie beliebige HTML-Attribute zum Block-Wrapper-Element hinzu. Geben Sie jedes Attribut in einer neuen Zeile im folgenden Format ein: Attributname|Wert (z. B. data-plan|pro).
Geräte-Sichtbarkeit:
- Auf dem Desktop ausblenden: Blendet den Block „Preistabelle“ auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blendet den Block „Preistabelle“ auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blendet den Block „Preistabelle“ auf Mobilgeräten aus.
Animationseffekte:
- Eingangsanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn die Preistabelle in den Blickpunkt gerät. Zu den Optionen gehören „Hüpfen“, „Einblenden“, „Vergrößern“, „Drehen“ und viele mehr. Durch Hinzufügen einer dezenten Animation können Sie die Aufmerksamkeit zum richtigen Zeitpunkt auf Ihre Preispläne lenken.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Blocks „Preistabelle“ abgeschlossen und dessen Erscheinungsbild angepasst haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Preistabellen-Block zu Ihrer Seite hinzugefügt! Platzieren Sie mehrere Preistabellen-Blöcke nebeneinander in einem Spaltenlayout, um einen vollständigen Preisbereich zu erstellen, in dem Besucher die Tarife auf einen Blick vergleichen können. Experimentieren Sie mit Hintergrundfarben für Überschriften, Schaltflächenfarben und Schriftarten, um einen Preisbereich zu erstellen, der zu Ihrer Marke passt und die Konversionsrate steigert.