Der Block „Preistabelle“ ermöglicht es Ihnen, visuell ansprechende und fortschrittliche Preistabellen zu erstellen, um Ihre Produkte oder Dienstleistungen zu präsentieren. Egal, ob Sie Abonnementpläne, Service-Stufen oder Paketangebote vorstellen, dieser Block gibt Ihnen die vollständige Kontrolle darüber, wie jeder Plan angezeigt wird.
Jede Preistabelle enthält einen Plan-Namen, einen Preis mit Währungssymbol, einen Abrechnungszeitraum, eine Beschreibung, einen optionalen regulären/ursprünglichen Preis, eine Liste von Merkmalen und bis zu zwei Call-to-Action-Schaltflächen. Verwenden Sie mehrere Blöcke „Preistabelle“ nebeneinander, um einen vollständigen Preisbereich zu erstellen, der Besuchern hilft, Pläne zu vergleichen und eine Kaufentscheidung zu treffen.
Hinzufügen des Blocks „Preistabelle“ zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Block „Preistabelle“ 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 Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Block „Preistabelle“, um seine Einstellungen zu öffnen. Der Tab Inhalt ist in einen Haupt-Einstellungsbereich für den Plan-Header und die Schaltflächen unterteilt, gefolgt von einem Abschnitt Merkmalsliste für die Merkmals-Elemente des Plans.
Plan-Header:
- Plan-Name: Geben Sie den Namen Ihres Preisplans ein (z. B. Basic, Pro, Enterprise). Dieser wird oben in der Preistabelle prominent angezeigt.
- Preis: Geben Sie den numerischen Preis für den Plan 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, einschließlich Dollar ($), Euro (€), Pfund (£), Rupie (₹), Yen (¥) und vielen mehr. Wählen Sie Benutzerdefiniert, um ein beliebiges benötigtes Symbol im Feld Benutzerdefiniertes Symbol einzugeben.
- Position des Währungssymbols: Legen Sie fest, ob das Währungssymbol Vor oder Nach der Preiszahl angezeigt wird.
- Zeitraum: Geben Sie den Text für den Abrechnungszeitraum ein, der nach dem Preis angezeigt wird (z. B. /Monat, /Jahr, /Benutzer). Lassen Sie das Feld leer, um den Preis ohne Zeitraum anzuzeigen.
- Regulären Preis anzeigen: Schalten Sie diese Option ein, um einen ursprünglichen oder regulären Preis über dem aktuellen Preis anzuzeigen – nützlich, um einen Rabattpreis anzuzeigen. Wenn aktiviert, geben Sie den Betrag des Regulären Preises und eine Beschriftung für den regulären Preis (z. B. „Normalerweise“) ein, die ihm vorangestellt wird.
- 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-Formatierung, einschließlich Fett, Kursiv, Unterstrichen und Links.
Schaltflächen:
- Obere Schaltfläche anzeigen: Schalten Sie diese Option ein, um eine Call-to-Action-Schaltfläche über der Merkmalsliste anzuzeigen. Wenn aktiviert, geben Sie den Text der oberen Schaltfläche, den Link der oberen Schaltfläche ein und aktivieren Sie optional In neuem Fenster öffnen für den Link. Legen Sie den Radius des oberen Schaltflächenrands (0–100px) fest, um die Rundung der Schaltflächenecken zu steuern.
- Schaltfläche unten anzeigen: Aktivieren Sie diese Option, um eine zweite Schaltfläche mit Handlungsaufforderung unter der Funktionsliste anzuzeigen. Wenn aktiviert, geben Sie den Text der Schaltfläche unten, den Link der Schaltfläche unten ein und aktivieren Sie optional In neuem Fenster öffnen. Legen Sie den Radius des Rahmens der Schaltfläche unten fest, um ihn an Ihr Design anzupassen.
Funktionsliste:
- Funktionselemente: Jede Funktion wird als ziehbarer Zeile angezeigt. Ziehen Sie Elemente, um sie neu anzuordnen. Fahren Sie mit der Maus über ein Element, um Schaltflächen zum Duplizieren und Löschen anzuzeigen. Klicken Sie auf den Text eines Elements, um dessen individuelle Einstellungen zu erweitern.
- Text: Geben Sie den Funktionstext für das Element ein. Unterstützt grundlegende Rich-Text-Formatierung, einschließlich Fett, Kursiv, Unterstrichen und Links.
- Symbol: Wählen Sie ein Symbol aus, das neben dem Funktionstext angezeigt werden soll, indem Sie den Symbol-Auswähler verwenden. Das Standard-Symbol ist ein Häkchen.
- Neues Element hinzufügen: Klicken Sie auf die Schaltfläche am Ende der Funktionsliste, um eine neue Funktionszeile hinzuzufügen.
Schritt 3: Design anpassen
Im Tab Erweitert können Sie die Typografie, Farben, Schaltflächen und das allgemeine Erscheinungsbild Ihrer Preistabelle feinabstimmen. Der Tab Erweitert ist in fünf Stilabschnitte unterteilt, gefolgt von den Standard-Abstands- und Sichtbarkeitssteuerungen.
Kopfzeile:
- Typografie des Plan-Namens: Legen Sie Schriftfamilie, Größe, Dicke und Stil für den Text des Plan-Namens fest.
- Farbe des Plan-Namens: Legen Sie die Farbe des Textes des Plan-Namens fest.
- Typografie des Normalpreises: Legen Sie die Typografie für den normalen (ursprünglichen) Preistext fest, wenn die Option „Normalpreis anzeigen“ aktiviert ist.
- Farbe des Normalpreises: Legen Sie die Farbe des Normalpreistextes fest.
- Typografie der Beschreibung: 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 (Plan-Name, Preis und Beschreibung) fest.
- Abstand: Legen Sie den Innenabstand (0–100px) im Kopfbereich fest.
Schaltflächen:
- Farbe der oberen Schaltfläche: Legen Sie die Hintergrundfarbe der oberen Schaltfläche mit Handlungsaufforderung fest.
- Größe der oberen Schaltfläche: Wählen Sie die Größe der oberen Schaltfläche – Klein, Mittel, Groß, X-Groß oder 2X-Groß.
- Symbol vor dem Text der oberen Schaltfläche: Fügen Sie ein Symbol hinzu, das vor dem Beschriftungstext der Schaltfläche angezeigt wird, indem Sie den Symbol-Auswähler verwenden.
- Symbol nach dem Text der oberen Schaltfläche: Fügen Sie ein Symbol hinzu, das nach dem Beschriftungstext der Schaltfläche angezeigt wird, indem Sie den Symbol-Auswähler verwenden.
- Farbe der unteren Schaltfläche: Legen Sie die Hintergrundfarbe der unteren Schaltfläche mit Handlungsaufforderung fest.
- Größe der unteren Schaltfläche: Wählen Sie die Größe der unteren Schaltfläche – Klein, Mittel, Groß, X-Groß oder 2X-Groß.
- Symbol vor dem Text der unteren Schaltfläche: Fügen Sie ein Symbol hinzu, das vor dem Beschriftungstext der unteren Schaltfläche angezeigt wird.
- Symbol nach dem Text der unteren Schaltfläche: Fügen Sie ein Symbol hinzu, das nach dem Beschriftungstext der unteren Schaltfläche angezeigt wird.
Preis:
- Typografie des Preises: Legen Sie Schriftfamilie, Größe, Dicke und Stil für die Hauptpreiszahl fest.
- Farbe des Preises: Legen Sie die Farbe der Hauptpreiszahl fest.
- Preisschild-Hochstellungstypografie: Legen Sie die Typografie für das Währungssymbol fest, wenn es als Hochstellung neben dem Preis angezeigt wird.
- Preisschild-Hochstellung Oben: Passen Sie die vertikale Position der Hochstellung des Währungssymbols relativ zur Preiszahl an.
Funktionsliste:
- Funktionenlisten-Typografie: Legen Sie Schriftfamilie, Größe, Stärke und Stil für den gesamten Text der Funktionselemente fest.
- Funktionenlisten-Farbe: Legen Sie die Textfarbe der Funktionselemente fest.
- Symbolfarbe: Legen Sie die Farbe der Symbole fest, die neben jedem Funktionselement angezeigt werden.
- Abstand: Legen Sie den Abstand (1–100px) zwischen jedem Funktionselement in der Liste fest.
- Ausrichtung: Legen Sie die horizontale Ausrichtung der Funktionenliste fest – Links, Mitte oder Rechts.
- Hintergrundfarbe: Legen Sie eine Hintergrundfarbe für den Bereich der Funktionenliste fest.
- Innenabstand: Legen Sie den Innenabstand (0–100px) innerhalb des Bereichs der Funktionenliste fest.
Block:
- Abgerundete Ecken: Legen Sie die Abrundung der Ecken des gesamten Preisblockelements fest (0–100px).
- Rahmenstil: Legen Sie den Rahmenstil für den Block fest — Durchgezogen, Gepunktet oder Gestrichelt.
- Rahmenfarbe: Legen Sie die Farbe des Blockrahmens fest.
- Randbreite: Legen Sie die Randstärke pro Seite fest (Oben, Rechts, Unten, Links). Schalten Sie das Synchronisierungssymbol um, um denselben Wert auf allen Seiten gleichzeitig anzuwenden.
Abstand:
- Außenabstand: Steuern Sie den äußeren Abstand um Ihren Preisblock (Oben, Rechts, Unten, Links). Dies bestimmt, wie viel Platz zwischen der Tabelle und den umgebenden Elementen auf der Seite vorhanden ist.
- Innenabstand: Passen Sie den inneren Abstand innerhalb Ihres Preisblocks an (Oben, Rechts, Unten, Links). Dies schafft Freiraum zwischen dem Tabelleninhalt und den Blockrändern.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Preisblock an. Diese ID wird automatisch von SeedProd für benutzerdefinierte Stile oder JavaScript-Ziele erstellt.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um spezifische Stile aus Ihrem Theme oder benutzerdefinierten CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie dem Wrapper-Element des Blocks HTML-Attribute hinzu. Geben Sie jedes Attribut in eine neue Zeile im Format ein: attribut-name|wert (z. B. data-plan|pro).
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blenden Sie den Preisblock auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blenden Sie den Preisblock auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blenden Sie den Preisblock auf Mobilgeräten aus.
Animationseffekte:
- Eingangs-Animation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Preisblock ins Sichtfeld gescrollt wird. Optionen sind Bounce, Fade In, Zoom In, Rotate In und viele mehr. Das Hinzufügen einer subtilen Animation kann helfen, Ihre Preispläne im richtigen Moment hervorzuheben.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie mit der Konfiguration des Preisblockelements fertig sind und dessen Erscheinungsbild angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Preisblock zu Ihrer Seite hinzugefügt! Platzieren Sie mehrere Preisblöcke nebeneinander in einem Spaltenlayout, um einen vollständigen Preisbereich zu erstellen, mit dem Besucher Pläne auf einen Blick vergleichen können. Experimentieren Sie mit Kopfzeilen-Hintergründen, Schaltflächenfarben und Typografie, um einen Preisbereich zu erstellen, der zu Ihrer Marke passt und Konversionen fördert.