Der Bildkarussell-Block ermöglicht es Ihnen, eine rotierende Diashow von Bildern auf Ihrer SeedProd-Seite anzuzeigen. Jede Folie unterstützt eine optionale Beschriftung, eine Kopfzeile, eine Unterüberschrift und eine Call-to-Action-Schaltfläche – was ihn zu einem flexiblen Block für Fotogalerien, vorgestellte Bildershows und Banner-ähnliche Hero-Bereiche macht.
Das Karussell unterstützt Autoplay, Navigationspfeile, Lightbox-Anzeige, Bildüberlagerungen und Folien-spezifische Bannerinhalte mit vollständig anpassbarer Typografie und Animationseffekten.
Hinzufügen des Bildkarussell-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Bildkarussell-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke den Bildkarussell-Block per Drag & Drop in den gewünschten Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Bildkarussell-Block, um seine Einstellungen zu öffnen. Der Tab Inhalt ist in zwei Abschnitte unterteilt: Karussellbilder und Karusselleinstellungen.
Karussellbilder:
Dieser Abschnitt listet alle Folien in Ihrem Karussell auf. Klicken Sie auf eine Folienzeile, um ihre individuellen Einstellungen zu erweitern, oder ziehen Sie Folien, um sie neu anzuordnen. Sie können auch jede Folie mit den Symbolen, die beim Überfahren mit der Maus erscheinen, duplizieren oder löschen.
- Bild: Laden Sie ein Bild aus Ihrer WordPress-Mediathek für diese Folie hoch oder wählen Sie es aus, oder geben Sie eine direkte Bild-URL ein.
- Beschriftung: Geben Sie optionalen Beschriftungstext ein, der unter dem Bild angezeigt wird, wenn Beschriftungen aktiviert sind.
- Kopfzeilentext anzeigen: Schalten Sie diese Option ein, um Felder für Kopfzeile und Unterüberschrift anzuzeigen, die als Überlagerung auf der Folie angezeigt werden.
- Kopfzeile: Geben Sie den Kopfzeilentext ein, der auf der Folienüberlagerung angezeigt wird (sichtbar, wenn Kopfzeilentext anzeigen aktiviert ist).
- Unterüberschrift: Geben Sie den Unterüberschriftentext ein, der unter der Kopfzeile auf der Folienüberlagerung angezeigt wird (sichtbar, wenn Kopfzeilentext anzeigen aktiviert ist).
- Schaltfläche anzeigen: Schalten Sie diese Option ein, um eine Call-to-Action-Schaltfläche auf der Folienüberlagerung hinzuzufügen.
- Schaltflächentext: Geben Sie die Beschriftung für die Schaltfläche ein (sichtbar, wenn Schaltfläche anzeigen aktiviert ist).
- Schaltflächenlink: Geben Sie die URL ein, zu der die Schaltfläche verlinkt. Klicken Sie auf das Einstellungen-Symbol, um die Optionen „In neuem Fenster öffnen“ und „No Follow“ anzuzeigen.
Klicken Sie unten in der Liste auf + Bilder hinzufügen, um eine neue Folie zu Ihrem Karussell hinzuzufügen.
Karusselleinstellungen:
- Navigationsfarbmodus: Wählen Sie die Farbe der Navigationspfeile und Punkte – Dunkel oder Hell –, um sicherzustellen, dass sie sich von Ihren Bildern abheben.
- Anzuzeigende Folien: Legen Sie fest, wie viele Folien gleichzeitig sichtbar sind – 1 bis 6.
- AutoPlay: Schalten Sie Autoplay ein oder aus, um zu steuern, ob die Folien automatisch weitergeschaltet werden.
- Autoplay-Geschwindigkeit: Legen Sie die Verzögerung zwischen den Folienübergängen in Sekunden fest (sichtbar, wenn Autoplay aktiviert ist).
- Beschriftung anzeigen: Schalten Sie diese Option ein, um den Beschriftungstext unter jeder Folie anzuzeigen.
- Navigation anzeigen: Schalten Sie die Navigationspfeile und Punkte ein oder aus.
- Farbe der Bildüberlagerung: Fügen Sie eine Farbschicht über jedem Folienbild hinzu, indem Sie den Farbwähler verwenden.
- Deckkraft der Bildüberlagerung: Legen Sie die Deckkraft der Überlagerung von 0 (transparent) bis 1 (vollständig deckend) fest.
- Ausrichtung der Beschriftung: Legen Sie die horizontale Ausrichtung des Beschriftungstextes fest – Links, Mitte oder Rechts.
Karussell-Banner-Einstellungen:
- Vertikale Position: Legen Sie die vertikale Position des Header-/Button-Overlay-Inhalts auf der Folie als Prozentsatz von 0 bis 100 fest.
- Horizontale Position: Legen Sie die horizontale Position des Overlay-Inhalts als Prozentsatz von 0 bis 100 fest.
- Farbe des Banner-Buttons: Legen Sie die Hintergrundfarbe des Call-to-Action-Buttons auf jeder Folie fest.
- Button-Größe: Wählen Sie die Größe des Banner-Buttons – Klein, Mittel, Groß, X Groß oder 2X Groß.
- Radius des Banner-Buttons: Legen Sie den Radius des Banner-Buttons von 0 bis 100 Pixel fest, um die Rundung der Ecken zu steuern.
- Ausrichtung des Header-Textes: Legen Sie die horizontale Ausrichtung des Header-Overlay-Textes fest – Links, Mitte oder Rechts. Unterstützt gerätespezifische Werte.
- Ausrichtung des Subheader-Textes: Legen Sie die horizontale Ausrichtung des Subheader-Overlay-Textes fest – Links, Mitte oder Rechts. Unterstützt gerätespezifische Werte.
- Ausrichtung des Karussell-Buttons: Legen Sie die horizontale Ausrichtung des Overlay-Buttons fest – Links, Mitte oder Rechts. Unterstützt gerätespezifische Werte.
Schritt 3: Vorlage auswählen (Optional)
Der Tab Vorlagen bietet vordefinierte Stilvorgaben für Ihr Karussell. Klicken Sie auf eine beliebige Vorlagen-Miniaturansicht, um sofort eine Kombination aus Rahmen-, Schatten- und Bildstilen auf alle Folien Ihres Karussells anzuwenden.
Schritt 4: Design anpassen
Im Tab Erweitert können Sie die Typografie, Bildstile und Abstände Ihres Bildkarussell-Blocks anpassen.
Stile:
- Typografie der Beschriftung: Passen Sie Schriftfamilie, -stärke, -größe, Zeilenhöhe, Buchstabenabstand und Texttransformation für Beschriftungen an. Unterstützt gerätespezifische Werte.
- Farbe der Beschriftung: Legen Sie die Textfarbe für Beschriftungen fest.
- Typografie des Banner-Headers: Passen Sie die Schrifteinstellungen für den Header-Overlay-Text der Folie an.
- Farbe des Banner-Headers: Legen Sie die Textfarbe für den Header-Overlay der Folie fest.
- Typografie des Banner-Subheaders: Passen Sie die Schrifteinstellungen für den Subheader-Overlay-Text der Folie an.
- Farbe des Banner-Subheaders: Legen Sie die Textfarbe für den Subheader-Overlay der Folie fest.
- Typografie des Banner-Buttons: Passen Sie die Schrifteinstellungen für den Text des Banner-Button-Overlays an.
Stiloptionen für Slider-Bilder:
- Schatten: Fügen Sie jedem Folienbild einen Schlagschatten hinzu. Wählen Sie aus Keine, Haarlinie, Klein, Mittel, Groß, X Groß oder 2X Groß.
- Bildrahmen: Fügen Sie jedem Folienbild einen Rahmen hinzu, mit Radiusregelung zur Abrundung der Ecken.
Abstand:
- Abstand: Steuern Sie den äußeren Abstand um Ihren Bildkarussell-Block (Oben, Rechts, Unten, Links). Unterstützt gerätespezifische Werte für Desktop, Tablet und Mobilgeräte.
- Abstand: Passen Sie den Innenabstand Ihres Bildkarussell-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 Bildkarussell-Block an, die von SeedProd automatisch für benutzerdefinierte Stile oder JavaScript-Ziele 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 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 Bildkarussell-Block auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blenden Sie den Bildkarussell-Block auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blenden Sie den Bildkarussell-Block auf Mobilgeräten aus.
Animationseffekte:
- Erscheinungsanimation: Wählen Sie einen Animationseffekt für den Moment, in dem der Karussell-Block ins Sichtfeld gescrollt wird.
- Kopfzeilen-Animationseffekte: Wählen Sie eine Animation für den Text der Folien-Overlay-Kopfzeile, wenn jede Folie erscheint.
- Unterkopfzeilen-Animationseffekte: Wählen Sie eine Animation für den Unterkopfzeilentext des Folien-Overlays.
- Schaltflächen-Animationseffekte: Wählen Sie eine Animation für die Schaltfläche des Folien-Overlays.
Schritt 5: Änderungen speichern
Wenn Sie die Konfiguration des Bildkarussell-Blocks abgeschlossen und sein Aussehen angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Bildkarussell-Block zu Ihrer Seite hinzugefügt! Karussells sind eine großartige Möglichkeit, mehrere Bilder in einem kompakten, ansprechenden Format zu präsentieren. Verwenden Sie die Banner-Einstellungen, um Overlay-Texte und Handlungsaufforderungen zu jeder Folie hinzuzufügen, oder halten Sie es einfach als eine saubere Bildergalerie. Experimentieren Sie mit automatischen Wiedergabegeschwindigkeiten, Navigationsstilen und Bild-Overlays, um ein Karussell zu erstellen, das perfekt zu Ihrer Seite passt.