SeedProd Dokumentation

Dokumentation, Referenzmaterialien und Tutorials für SeedProd

Listenblock

Der Listenblock ermöglicht es Ihnen, symbolbasierte Listen zu erstellen, um Funktionen, Vorteile oder beliebige Elemente auf Ihrer Seite hervorzuheben. Jedes Listenelement kombiniert ein anpassbares Symbol mit Rich-Text, sodass Sie die Darstellung Ihrer Inhalte vollständig steuern können.

Ob Sie Produktmerkmale präsentieren, Kernpunkte zusammenfassen oder eine Vergleichsliste erstellen möchten, der Listenblock macht es einfach, visuell ansprechende Listen zu erstellen, die zu Ihrer Marke passen – ganz ohne Code.

Voraussetzungen: Der Listenblock ist in allen unseren Lizenzplänen verfügbar.

Listenblock-Beispiel

Hinzufügen des Listenblocks zu Ihren Seiten

Befolgen Sie diese Schritte, um einen Listenblock zu Ihrer SeedProd-Seite hinzuzufügen:

Schritt 1: Block hinzufügen

Ziehen Sie unter Design > Blöcke den Listenblock per Drag & Drop in den gewünschten Bereich Ihrer Seite.

Ziehen des Listenblocks auf eine SeedProd-Seite

Schritt 2: Inhaltseinstellungen konfigurieren

Nach dem Hinzufügen klicken Sie auf den Listenblock, um seine Einstellungen zu öffnen. Erstellen Sie im Tab Inhalt Ihre Listenelemente und konfigurieren Sie das allgemeine Erscheinungsbild.

Liste:

  • Elemente: Jedes Listenelement hat ein Symbol und ein Textfeld. Klicken Sie auf ein Element, um seine Einstellungen zu erweitern und den Text (mit dem Rich-Text-Editor für Fett, Kursiv, Links und mehr) zu bearbeiten und ein Symbol über die Symbolauswahl auszuwählen. Sie können Elemente per Drag & Drop neu anordnen, ein Element duplizieren oder löschen.
  • Neues Element hinzufügen: Klicken Sie auf diese Schaltfläche, um Ihrer Liste ein weiteres Element hinzuzufügen.
  • Symbolfarbe: Legen Sie die Farbe fest, die auf alle Symbole in der Liste angewendet wird.
  • Schriftgröße: Steuern Sie die Textgröße für alle Listenelemente von 10px bis 72px.
  • Abstand dazwischen: Passen Sie den Abstand zwischen den Listenelementen an. Unterstützt geräteabhängige Werte für Desktop, Tablet und Mobilgeräte.
  • Ausrichtung: Legen Sie die horizontale Ausrichtung der Liste fest – Links, Mitte oder Rechts. Unterstützt geräteabhängige Ausrichtung.
Inhaltseinstellungen für den Listenblock

Schritt 3: Design anpassen

Im Tab Erweitert können Sie das visuelle Erscheinungsbild Ihres Listenblocks anpassen.

Stile:

  • Listenlayout: Wählen Sie zwischen Vertikal (Elemente übereinander gestapelt) oder Horizontal (Elemente nebeneinander in einer Reihe angezeigt).
  • Typografie: Passen Sie Schriftfamilie, -stärke, -größe, Zeilenhöhe, Buchstabenabstand und Texttransformation für Ihren Listentext an.
  • Textfarbe: Legen Sie die Farbe des Textes der Listenelemente fest.
  • Textschatten: Fügen Sie Ihrem Listentext einen Schatten hinzu. Wählen Sie aus Keine, Haarlin, Klein, Mittel, Groß, X-Groß oder 2X-Groß.

Abstand:

  • Rand: Steuern Sie den äußeren Abstand um Ihren Listenblock (Oben, Rechts, Unten, Links).
  • Innenabstand: Passen Sie den inneren Abstand innerhalb Ihres Listenblocks an (Oben, Rechts, Unten, Links). Unterstützt geräteabhängige Werte für Desktop, Tablet und Mobilgeräte.

Attribute:

  • CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Listenblock an, die von SeedProd automatisch für benutzerdefiniertes Styling oder JavaScript-Targeting erstellt wurde.
  • 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 Listen-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: Blendet den Listenblock auf Desktop-Bildschirmen aus.
  • Auf Tablet ausblenden: Blendet den Listenblock auf Tablet-Geräten aus.
  • Auf Mobilgeräten ausblenden: Blendet den Listenblock auf Mobilgeräten aus.

Animationseffekte:

  • Eingabeanimation: Wählen Sie einen Animationseffekt, der abgespielt wird, wenn der Listenblock ins Sichtfeld gescrollt wird, wie z. B. Bounce, Fade In, Zoom In, Rotate In und viele mehr.
Erweiterte Einstellungen für den Listenblock

Schritt 4: Speichern Sie Ihre Änderungen

Wenn Sie mit der Konfiguration des Listenblocks fertig sind und dessen Darstellung angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.


Sie haben erfolgreich einen Listenblock zu Ihrer Seite hinzugefügt! Der Listenblock ist eine vielseitige Möglichkeit, Funktionen, Vorteile oder beliebige Punkte in einem visuell ansprechenden Format darzustellen. Experimentieren Sie mit verschiedenen Symbolen, Layouts, Farben und Typografie, um eine Liste zu erstellen, die perfekt zu Ihrer Seite passt.

Verwandte Artikel