Mit dem Block „Preisliste“ können Sie eine optisch ansprechende Liste von Artikeln mit Beschreibungen und Preisen erstellen. Ganz gleich, ob Sie eine Speisekarte, Servicepakete oder Produktangebote präsentieren möchten – dieser Block bietet Ihnen eine flexible und elegante Möglichkeit, Ihre Artikel zu präsentieren.
Jeder Eintrag 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 und die Preisanpassung steuern und aus vorgefertigten Vorlagen auswählen, um schnell loszulegen.
Hinzufügen des Preislistenblocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Preislistenblock zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „Design“ > „Blöcke“ den Block „Preisliste“ per Drag & Drop in den gewünschten Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Klicken Sie nach dem Hinzufügen auf den Block „Preisliste“, um dessen Einstellungen zu öffnen. Die Registerkarte „Inhalt“ ist in drei Abschnitte unterteilt: „Preislistenartikel“, „Layout“ und „Bildbereich“.
Preisliste Artikel:
- Artikelliste: Jeder Artikel der Preisliste wird als verschiebbare Zeile angezeigt. Verschieben Sie Artikel, um sie neu anzuordnen. Bewegen Sie den Mauszeiger über einen Artikel, um die Schaltflächen zum Duplizieren und Löschen anzuzeigen. Klicken Sie auf den Titel eines Artikels, um dessen individuelle Einstellungen anzuzeigen.
- Titel: Geben Sie den Namen des Artikels so ein, wie er in der Liste erscheinen soll.
- Beschreibung: Geben Sie eine Beschreibung für den Artikel ein. Unterstützt grundlegende Rich-Text-Formatierungen wie Fettdruck, Kursivschrift, Unterstreichung und Links.
- Preis: Geben Sie den angezeigten Preis für den Artikel ein (z. B. 20 $).
- Rabatt anbieten?: Aktivieren Sie diese Option, um neben dem Originalpreis einen reduzierten Preis anzuzeigen. Wenn diese Option aktiviert ist, geben Sie den tatsächlichen Preis in das Feld „Tatsächlicher Preis“ ein – dieser wird als durchgestrichener Originalpreis angezeigt, während im Feld „Preis“ der reduzierte Betrag angezeigt wird.
- Bild: Laden Sie ein Bild hoch oder wählen Sie ein Bild aus, das neben diesem Element angezeigt werden soll, oder geben Sie eine Bild-URL direkt in das Feld „Bildquelle“ ein.
- Alt-Text: Geben Sie einen beschreibenden Alt-Text für das Bild des Artikels ein, um die Barrierefreiheit und SEO zu verbessern.
- Link: Geben Sie eine URL ein, um dieses Element anklickbar zu machen. Funktioniert zusammen mit der Einstellung „Link Complete Box“ im Abschnitt „Layout“.
- Neuen Eintrag hinzufügen: Klicken Sie auf die Schaltfläche am Ende der Liste, um einen neuen Eintrag zur Preisliste hinzuzufügen.
Layout:
- Bildposition: Legen Sie fest, wo die Bilder der Elemente relativ zum Textinhalt angezeigt werden sollen – oben, links, rechts oder gar nicht (kein Bild wird angezeigt).
- Preisposition: Wählen Sie aus, wo der Preis angezeigt werden soll – rechts neben der Überschrift (der Preis wird in derselben Zeile wie der Titel angezeigt, getrennt durch die Trennlinie zwischen Titel und Preis) oder unterhalb der Überschrift und Beschreibung (der Preis wird nach dem Beschreibungstext angezeigt). Hinweis: Diese Option ist nicht verfügbar, wenn die Bildposition auf „Oben“ eingestellt ist.
- Titel-Preis-Trennzeichen: Wählen Sie den Stil der Trennlinie zwischen dem Titel des Artikels und dem Preis, wenn die Preisposition auf „Rechts neben der Überschrift“ eingestellt ist – durchgezogen, gepunktet, gestrichelt oder keine.
- Gesamt-Ausrichtung: Legen Sie die horizontale Ausrichtung aller Elemente fest – links, mittig oder rechts.
- Vertikale Ausrichtung: Legen Sie fest, wie Bild- und Textinhalte innerhalb jeder Zeile vertikal ausgerichtet werden sollen – oben, mittig oder unten. Verfügbar, wenn die Bildposition nicht auf „Oben“ eingestellt ist.
- Link-Komplettfeld: Aktivieren Sie diese Option, um die gesamte Artikelzeile über die für jeden Artikel festgelegte Link-URL anklickbar zu machen, anstatt nur den Artikeltitel.
Bildbereich:
- Form: Wählen Sie die Form, die auf alle Artikelbilder angewendet wird – Standard (quadratisch), Abgerundet (leicht abgerundet), Kreis (vollständig kreisförmig) oder Benutzerdefiniert (legen Sie Ihren eigenen Randradius pro Ecke fest).
- Breite: Legen Sie die Breite des Bildbereichs zwischen 1 und 300 Pixel fest.
- Bildrandradius: Wenn „Form“ auf „Benutzerdefiniert“ eingestellt ist, legen Sie den Eckenradius für jede Ecke (oben links, oben rechts, unten rechts, unten links) einzeln fest.
Schritt 2a: Wählen Sie einen Vorlagenstil aus.
Auf der Registerkarte „Vorlagen“ können Sie aus vorgefertigten Layoutvorlagen auswählen, um das Erscheinungsbild Ihrer Preisliste schnell einzurichten.
- Verfügbare Vorlagen: Wählen Sie aus 3 Vorlagen – Vorlage mit linkem Layout (Bild links), Vorlage mit rechtem Layout (Bild rechts) und Vorlage ohne Bild (nur Text und Preis, keine Bilder). Durch Klicken auf eine Vorlage werden deren Layout- und Abstandseinstellungen sofort übernommen.
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie die Typografie, Farben, Rahmen und den Hintergrund Ihres Preislistenblocks feinabstimmen.
Stile:
- Titeltypografie: Legen Sie die Schriftfamilie, Größe, Schriftstärke und den Stil für alle Elementtitel fest.
- Beschreibung Typografie: Legen Sie die Typografie für den gesamten Text der Artikelbeschreibung fest.
- Preistypografie: Legen Sie die Typografie für alle Artikelpreisangaben fest.
- Titel-Farbe: Legen Sie die Farbe des Titels des Elements fest.
- Beschreibung Farbe: Legen Sie die Farbe des Beschreibungstextes für den Artikel fest.
- Preis Farbe: Legen Sie die Farbe des Artikelpreis-Textes fest.
- Rabattfarbe: Legen Sie die Farbe des durchgestrichenen Originalpreises fest, der angezeigt wird, wenn für einen Artikel ein Rabatt aktiviert ist.
- Textschatten: Fügen Sie dem Text einen Schatteneffekt hinzu – wählen Sie zwischen „Keine“, „Haarfein“, „Klein“, „Mittel“, „Groß“, „X Groß“ oder „2X Groß“.
Abstand:
- Rand: Steuert den äußeren Abstand um Ihren Preislistenblock herum (oben, rechts, unten, links). Damit legen Sie fest, wie viel Platz zwischen dem Block und den umgebenden Elementen auf der Seite angezeigt wird.
- Abstand: Passen Sie den inneren Abstand innerhalb Ihres Preislistenblocks an (oben, rechts, unten, links). Dadurch entsteht ein Abstand zwischen dem Listeninhalt und den Blockrändern.
Grenze:
- 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).
- Border Radius: Legt die Abrundung der Ecken des Blocks fest.
Hintergrund:
- Hintergrundfarbe: Legen Sie eine einheitliche Hintergrundfarbe für den gesamten Block „Preisliste“ 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 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.
Geräte-Sichtbarkeit:
- Auf dem Desktop ausblenden: Blendet den Block „Preisliste“ auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blendet den Block „Preisliste“ auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blendet den Block „Preisliste“ auf Mobilgeräten aus.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Blocks „Preisliste“ abgeschlossen und dessen Erscheinungsbild angepasst haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Preislistenblock zu Ihrer Seite hinzugefügt! Verwenden Sie ihn, um attraktive und informative Auflistungen zu erstellen, die es Besuchern erleichtern, 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.