Der Preislisten-Block ermöglicht es Ihnen, eine optisch ansprechende Liste von Artikeln mit Beschreibungen und Preisen zu erstellen. Egal, ob Sie eine Restaurantkarte, Servicepakete oder Produktangebote präsentieren, dieser Block bietet Ihnen eine flexible und professionelle Möglichkeit, Ihre Artikel darzustellen.
Jeder Artikel in der Liste kann einen Titel, eine Beschreibung, einen Preis, einen optionalen Rabattpreis, ein Bild und einen Link enthalten. Sie können das Gesamtlayout, die Bildposition, die Preisausrichtung steuern und aus vordefinierten Vorlagen wählen, um schnell loszulegen.
Hinzufügen des Preislisten-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Preislisten-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke den Preislisten-Block in den gewünschten Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Preislisten-Block, um seine Einstellungen zu öffnen. Der Tab Inhalt ist in drei Abschnitte unterteilt: Preislisten-Artikel, Layout und Bildbereich.
Preislisten-Artikel:
- Artikel-Liste: Jeder Preislisten-Artikel erscheint als ziehbarer Reihe. Ziehen Sie Artikel, um sie neu anzuordnen. Fahren Sie mit der Maus über einen Artikel, um die Schaltflächen zum Duplizieren und Löschen anzuzeigen. Klicken Sie auf den Titel eines Artikels, um seine individuellen Einstellungen zu erweitern.
- Titel: Geben Sie den Namen des Artikels ein, wie er in der Liste erscheinen soll.
- Beschreibung: Geben Sie eine Beschreibung für den Artikel ein. Unterstützt grundlegende Rich-Text-Formatierung, einschließlich Fett, Kursiv, Unterstrichen und Links.
- Preis: Geben Sie den angezeigten Preis für den Artikel ein (z. B. 20 €).
- Rabatt anbieten?: Schalten Sie um, um neben dem Originalpreis einen Rabattpreis anzuzeigen. Wenn aktiviert, geben Sie das Feld Tatsächlicher Preis ein – dies wird zum durchgestrichenen Originalpreis, während das Feld Preis den rabattierten Betrag anzeigt.
- Bild: Laden Sie ein Bild hoch oder wählen Sie es aus, das neben diesem Artikel angezeigt werden soll, oder geben Sie eine Bild-URL direkt in das Feld Bild-URL ein.
- Alternativtext: Geben Sie beschreibenden Alternativtext für das Bild des Artikels für Barrierefreiheit und SEO ein.
- Link: Geben Sie eine URL ein, um diesen Artikel klickbar zu machen. Funktioniert zusammen mit der Einstellung „Link Complete Box“ im Abschnitt „Layout“.
- Neuen Artikel hinzufügen: Klicken Sie auf die Schaltfläche am Ende der Artikelliste, um einen neuen Preislisteneintrag hinzuzufügen.
Layout:
- Bildposition: Legen Sie fest, wo die Artikelbilder relativ zum Textinhalt erscheinen – Oben, Links, Rechts oder Keine (kein Bild angezeigt).
- Preisposition: Wählen Sie, wo der Preis erscheint – Rechts vom Titel (Preis erscheint auf derselben Zeile wie der Titel, getrennt durch die Trennlinie zwischen Titel und Preis) oder Unter Titel und Beschreibung (Preis erscheint nach dem Beschreibungstext). Hinweis: Diese Option ist nicht verfügbar, wenn die Bildposition auf „Oben“ eingestellt ist.
- Trennlinie für Titelpreis: Wählen Sie den Stil der Trennlinie zwischen dem Elementtitel und dem Preis, wenn die Preisposition auf Rechts von der Überschrift gesetzt ist — Durchgezogen, Gepunktet, Gestrichelt oder Keine.
- Gesamtausrichtung: Legen Sie die horizontale Ausrichtung aller Elemente fest — Links, Mitte oder Rechts.
- Vertikale Ausrichtung: Legen Sie fest, wie das Bild und der Textinhalt in jeder Zeile vertikal ausgerichtet werden — Oben, Mitte oder Unten. Verfügbar, wenn die Bildposition nicht auf Oben gesetzt ist.
- Link für ganze Box: Aktivieren Sie diese Option, um die gesamte Elementzeile über die für jedes Element festgelegte Link-URL klickbar zu machen, anstatt nur den Elementtitel.
Bildbereich:
- Form: Wählen Sie die Form, die auf alle Elementbilder angewendet wird — Standard (quadratisch), Abgerundet (leicht abgerundet), Kreis (vollständig rund) oder Benutzerdefiniert (legen Sie Ihren eigenen Randradius für jede Ecke fest).
- Breite: Legen Sie die Breite des Bildbereichs von 1 bis 300 Pixel fest.
- Bildrandradius: Wenn die Form auf Benutzerdefiniert gesetzt ist, legen Sie den Eckradius individuell für jede Ecke fest (Oben Links, Oben Rechts, Unten Rechts, Unten Links).
Schritt 2a: Wählen Sie einen Vorlagenstil
Auf der Registerkarte Vorlagen können Sie aus vordefinierten Layoutvorlagen auswählen, um das Erscheinungsbild Ihrer Preisskala schnell einzurichten.
- Verfügbare Vorlagen: Wählen Sie aus 3 Vorlagen — Linke Layoutvorlage (Bild links), Rechte Layoutvorlage (Bild rechts) und Keine Bildvorlage (nur Text und Preis, keine Bilder). Ein Klick auf eine Vorlage wendet deren Layout- und Abstandseinstellungen sofort an.
Schritt 3: Design anpassen
Auf der Registerkarte Erweitert können Sie die Typografie, Farben, Rahmen und den Hintergrund Ihres Preisskala-Blocks feinabstimmen.
Stile:
- Titeltypografie: Legen Sie Schriftfamilie, Größe, Stärke und Stil für alle Elementtitel fest.
- Beschreibungstypografie: Legen Sie die Typografie für den gesamten Beschreibungstext der Elemente fest.
- Preistypografie: Legen Sie die Typografie für den gesamten Preistext der Elemente fest.
- Titelfarbe: Legen Sie die Farbe des Elementtiteltextes fest.
- Beschreibungsfarbe: Legen Sie die Farbe des Beschreibungstextes der Elemente fest.
- Preis Farbe: Legen Sie die Farbe des Preistextes der Elemente fest.
- Rabattfarbe: Legen Sie die Farbe des durchgestrichenen Originalpreises fest, der angezeigt wird, wenn für ein Element ein Rabatt aktiviert ist.
- Textschatten: Fügen Sie dem Text einen Schatteneffekt hinzu – wählen Sie aus Keine, Haarlinisch, Klein, Mittel, Groß, X Groß oder 2X Groß.
Abstand:
- Abstand außen: Steuern Sie den äußeren Abstand um Ihren Preisskala-Block (Oben, Rechts, Unten, Links). Dies bestimmt, wie viel Platz zwischen dem Block und den umgebenden Elementen auf der Seite vorhanden ist.
- Abstand innen: Passen Sie den inneren Abstand innerhalb Ihres Preisskala-Blocks an (Oben, Rechts, Unten, Links). Dies schafft Freiraum zwischen dem Listeninhalt und den Blockrändern.
Rahmen:
- Rahmenstil: Legen Sie den Rahmenstil für den Block fest — Durchgezogen, Gepunktet oder Gestrichelt.
- Rahmenfarbe: Legen Sie die Farbe des Blockrahmens fest.
- Rahmenbreite: Legen Sie die Dicke des Rahmens pro Seite fest (Oben, Rechts, Unten, Links).
- Radius: Legen Sie die Eckabrundung des Blocks fest.
Hintergrund:
- Hintergrundfarbe: Legen Sie eine einfarbige Hintergrundfarbe für den gesamten Preislistenblock fest.
- Hintergrundbild: Laden Sie ein Hintergrundbild für den Block hoch oder wählen Sie eines aus, mit Optionen für Position, Größe und Wiederholungsverhalten.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Preislistenblock 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 Block-Wrapper-Element beliebige HTML-Attribute hinzu. Geben Sie jedes Attribut in einer neuen Zeile im Format ein: attribut-name|wert.
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blenden Sie den Preislistenblock auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blenden Sie den Preislistenblock auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blenden Sie den Preislistenblock auf Mobilgeräten aus.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Preislistenblocks abgeschlossen und sein Aussehen angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Preislistenblock zu Ihrer Seite hinzugefügt! Verwenden Sie ihn, um attraktive und informative Auflistungen zu erstellen, die es Besuchern leicht machen, Ihre Angebote zu durchsuchen, Preise zu vergleichen und Maßnahmen zu ergreifen. Experimentieren Sie mit verschiedenen Layouts, Bildformen und Vorlagenstilen, um eine Preisliste zu erstellen, die perfekt zu Ihrer Marke passt.