Der Trennlinien-Block ermöglicht es Ihnen, optisch ansprechende Linientrenner zwischen verschiedenen Inhaltsbereichen auf Ihrer Seite einzufügen. Diese Trennlinien verbessern die Lesbarkeit und schaffen ein strukturierteres, ansprechenderes Layout.
Über eine einfache Linie hinaus können Sie mit dem Trennlinien-Block eine Textbeschriftung oder ein Symbol in der Mitte der Trennlinie platzieren, was ihn zu einem vielseitigen Designelement macht, um Inhalte stilvoll zu unterteilen.
Hinzufügen des Trennlinien-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Trennlinien-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke den Trennlinien-Block in den gewünschten Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Klicken Sie nach dem Hinzufügen auf den Trennlinien-Block, um seine Einstellungen zu öffnen. Konfigurieren Sie im Tab Inhalt das Aussehen und den Stil Ihrer Trennlinie.
Trennlinie:
- Stil: Wählen Sie den Linienstil für Ihre Trennlinie – Durchgezogene Linie, Gepunktet, Gestrichelt oder Doppelt.
- Farbe: Legen Sie die Farbe der Trennlinie fest.
- Breite: Steuern Sie die Breite der Trennlinie als Prozentsatz ihres Containers, von 1 % bis 100 %.
- Höhe: Legen Sie die Dicke der Trennlinie in Pixel fest, von 1px bis 10px.
- Ausrichtung: Richten Sie die Trennlinie links, mittig oder rechts aus. Unterstützt geräteabhängige Ausrichtung für Desktop, Tablet und Mobilgeräte.
- Add Element: Optionally place an element in the center of the divider line. Choose from None (just the line), Text (a text label), or Icon (a Font Awesome icon).
- Wenn Text ausgewählt ist: Geben Sie den Beschriftungstext ein und wählen Sie ein HTML-Tag (H1–H6 oder span), um die semantische Auszeichnung zu steuern.
- Wenn Symbol ausgewählt ist: Wählen Sie Ihr Symbol über die Symbolauswahl aus und legen Sie die Symbolgröße fest.
Schritt 3: Design anpassen
Im Tab Erweitert können Sie das Aussehen Ihres Trennlinien-Blocks weiter anpassen.
Stile:
- Schatten: Fügen Sie der Trennlinie einen Schatteneffekt hinzu. Wählen Sie aus Keine, Haarlinie, Klein, Mittel oder Groß.
- Überschriften-Typografie (sichtbar, wenn Element hinzufügen auf Text gesetzt ist): Passen Sie Schriftfamilie, -stärke, -größe, Zeilenhöhe, Buchstabenabstand und Texttransformation für das Textelement an.
- Textfarbe (sichtbar, wenn Element hinzufügen auf Text gesetzt ist): Legen Sie die Farbe der Textbeschriftung auf der Trennlinie fest.
- Symbolfarbe (sichtbar, wenn Element hinzufügen auf Symbol gesetzt ist): Legen Sie die Farbe des auf der Trennlinie angezeigten Symbols fest.
Abstand:
- Abstand (Außen): Steuern Sie den äußeren Abstand um Ihren Trennlinien-Block (Oben, Rechts, Unten, Links). Dies bestimmt, wie viel Platz zwischen der Trennlinie und den umgebenden Elementen auf der Seite vorhanden ist.
- Abstand (Innen): Passen Sie den inneren Abstand innerhalb Ihres Trennlinien-Blocks 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 Trennlinien-Block an, die von SeedProd automatisch für benutzerdefiniertes Styling oder zur gezielten JavaScript-Steuerung erstellt wird.
- 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 Trennzeichens beliebige HTML-Attribute hinzu. Geben Sie jedes Attribut in eine neue Zeile im Format ein: attribut-name|wert.
Gerätesichtbarkeit:
- Auf dem Desktop ausblenden: Blenden Sie den Trennzeichen-Block auf Desktop-Bildschirmen aus.
- Auf Tablets ausblenden: Blenden Sie den Trennzeichen-Block auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blenden Sie den Trennzeichen-Block auf Mobilgeräten aus.
Animationseffekte:
- Eingabeanimation: Wählen Sie einen Animationseffekt, der abgespielt wird, wenn der Trennzeichen-Block in die Ansicht gescrollt wird, z. B. Bounce, Fade In, Zoom In, Rotate In und viele mehr.
Schritt 4: Speichern Sie Ihre Änderungen
Nachdem Sie den Trennzeichen-Block konfiguriert und sein Aussehen angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Trennzeichen-Block zu Ihrer Seite hinzugefügt! Trennzeichen sind eine einfache, aber effektive Möglichkeit, visuelle Struktur zu schaffen und Ihre Besucher durch Ihre Inhalte zu führen. Experimentieren Sie mit verschiedenen Linienstilen, Farben, Breiten und Zentrierelementen, um das richtige Aussehen für Ihr Design zu finden.