Allgemeine Beschreibung
Der “Hero-Slider” ist ein vielseitiges Portlet, das es dir ermöglicht, beeindruckende Hero-Banner in Deinem Webshop zu erstellen. Du kannst mehrere Bilder oder Banner hinterlegen, die automatisch durchsliden oder erst nach Klicken durch den Besucher wechseln. Der Hero-Slider bietet eine Vielzahl von Anpassungsmöglichkeiten, darunter die Hinzufügung von Buttons, das Anpassen von Texten, Verlinkungen und Farbüberlagerungen auf den Slides . Darüber hinaus kannst du die Bewegungen der einzelnen Slides nach deinen Wünschen anpassen.Einsatzmöglichkeiten (Inspiration)
- Produktdarstellung: Präsentiere deine Produkte oder Dienstleistungen mit hochwertigen Bildern und überzeugenden Handlungsaufforderungen.
- Aktuelle Angebote: Zeige Sonderangebote, Rabatte oder Aktionen auf auffälligen Slides, um die Aufmerksamkeit der Besucher zu gewinnen.
- Veranstaltungen: Bewerbe bevorstehende Veranstaltungen oder Events mit ansprechenden Bildern und den entsprechenden Details.
- Markenbotschaft: Kommuniziere die Kernbotschaft und Werte deiner Marke durch visuell ansprechende Slides und aussagekräftige Texte.
Featureübersicht:
- Mehrere Bilder/Banner: Du kannst mehrere Bilder oder Banner hochladen, die im Slider angezeigt werden sollen.
- Automatisches oder manuelles Sliden: Wähle zwischen automatischem Durchsliden der Bilder oder einem Wechsel erst nach Klicken durch den Besucher.
- Anpassbare Texte: Passe die Texte auf den Slides individuell an, einschließlich Schriftart, Farbe, Größe und Ausrichtung.
- Button-Funktionen: Füge Buttons hinzu, die die Besucher zu spezifischen Seiten oder Aktionen führen können. Passe die Button-Texte und -Stile nach Bedarf an.
- Verlinkungsoptionen: Verlinke die Slides mit internen oder externen Seiten, um die Navigation zu erleichtern oder wichtige Informationen bereitzustellen.
- Farbüberlagerung: Füge Farbüberlagerungen auf den Slides hinzu, um die Bildästhetik zu betonen oder den Text besser lesbar zu machen.
- Individuelle Bewegungseffekte: Passe die Bewegungen der Slides an, wie z. B. Fade-In oder Slide-In-Effekte, um eine dynamische Präsentation zu schaffen.
- Responsives Design: Der Hero-Slider passt sich verschiedenen Bildschirmgrößen und Geräten an, um eine optimale Darstellung sicherzustellen.
Settings:
Slides
1. Lade hier ein Bild für den Hero-Slider hoch 2. Gib den Titel für den Banner an. Dieser Textinhalt stellt den größten auf dem Banner dar 3. Gebe hier eine passende Beschreibung an. 4. Hier kannst du einen Alternativtext hinterlegen, falls das Bannerbild nicht korrekt angezeigt werden kann. 5. Hier hast du die Möglichkeit die Slides zu verlinken. Beispiel: Auf eine Angebotsseite in Deinem Shop 6. Durch Klick auf diese Schaltfläche kannst du weitere Slides hinzufügen 7. Drag & Drop: Verändere die Reihenfolge der Slides 8. Dupliziere die Slides 9. Lösche den Slide
Verlinkungen
Button anzeigen, wenn Slide verlinkt wurde: Auswahl zwischen:
- Ja = Ein Button wird auf dem Banner erzeugt, anstatt den ganzen Slide zu verlinken
- Nein = Wenn ein Slide verlinkt wurde, dann reicht ein Klick auf irgendeine Fläche im Banner, um weitergeleitet zu werden
- Linkbutton = Wird verwendet, um auf eine in- bzw. externe URL zu verweisen. Durch Angabe einer #-ElementID kann auch auf ein bestimmtes Element innerhalb der Seite verwiesen werden ➝ Buttonlink = Legt die Zielseite/ das Zielelement des Buttons fest
- Funktionsbutton = Wird verwendet um bestimmte Events auszulösen. So kann beispielsweise unser PopUp-Container getriggert werden. ➝ EventID = Hier kann eine eindeutige EventID vergeben werden, die an anderen Stellen als Auslöser definiert werden kann
- Full = Vollständig gefüllter Button
- Outlined = Umrandeter Button ohne Füllung
- Plain Text = Button ohne Umrandung und Füllung
- Link = Lässt den Button wie einen Link aussehen
- Primary
- Secondary
- Warning
- Danger
- Info
- Sucess
- Dark
- Light Diese Farben orientieren sich an deinem Template und können nur dort geändert werden
- Content Width = Die Breite orientiert sich an dem Inhalt des Buttons
- Full Width = Der Button verwendet immer die maximal mögliche Breite
- links, zentriert und rechts Außerdem lässt sich die Ausrichtung je nach Displaygröße steuern (XS als kleinste Displaygröße; XL als größte Displaygröße)
- Nein = Es wird kein Icon verwendet
- Ja = Es öffnet sich eine Vielzahl an Icons zur Auswahl und ein Icon wird auf dem Button angezeigt
- Vor dem Text = Icon wird vor dem Text angezeigt
- Nach dem Text = Icon wird nach dem Text angezeigt
Darstellung
Slide Darstellungsoptionen
Bilder ausgrauen und bei Hover hervorheben: Bilder werden in Graustufen dargestellt. Wenn man mit der Maus über den Inhalt fährt, werden sie farbig dargestellt. Bild soll Hintergrundbild sein: Konvertiert das Bild zu einem Hintergrundbild (CSS) Position des Hintergrundbilds: Ausrichtung des Bildes. Legt fest an welcher Kante sich das Bild innerhalb des Containers orientieren soll, wenn es größer als der Container ist. Farbüberlagerung: Farblicher Hintergrund, der über dem Bild und unter dem Text liegt. Kann zur besseren Lesbarkeit des Textes beitragen, wenn keine Hintergrundfarbe für die Textbox gewählt wurde. Beim Erstellen für das Oberlay den Deckraftregler/Alphakana beachten und auf einen geringen Wert stellen!Indikatoren
Vor- und Zurückbutton anzeigen: Zeige Indikatoren zur Steuerung der Slides an Seitenindexierung anzeigen: Zeige Indikatoren an, auf welchem Slide man sich befindet Vor- und Zurückbutton Typ: Auswahl zwischen:- Chevron (>)
- Doppeltes Chevron (>>)
- Einfacher Pfeil (➝)
Textoptionen
Textposition Vertikal: Lege die vertikale Ausrichtung des Textinhalts fest Auswahl zwischen:- oben
- zentriert
- unten
- links
- zentriert
- rechts
- kein Abstand
- p-1 bis p-7
- maximaler Abstand
- kein Abstand
- m-1 bis m-7
- maximaler Abstand
Größe und Abstände
Anzahl der sichtbaren Produkt je Displaygröße: Definiere hier, wieviele Slides gleichzeitig je nach Displaygröße angezeigt werden sollen (XS kleinste; XL größte) Bildbreite verwenden: Durch eine feste Bildbreite richtet sich die Anzahl der sichtbaren Slides nach der Bildbreite und ist unabhängig von der oberen Einstellung. Anzahl der Slides um die verschoben wird: Lege fest um wieviele Slides je nach Displaygröße verschoben werden soll (XS kleinste; XL größte) Lücke zwischen des Slides: Definiere wieviel Abstand zwischen den einzelnen Slides sein soll (Standard: 1rem) Höhe Slider: Hier kannst du dem Slider eine feste Höhe zuweisen, damit alle Inhalte immer gut sichtbar sind
Bewegung
Ausrichtung Slider: Lege fest, ob der Slider von links nach rechts oder von rechts nach links scrollen soll Übergangsgeschwindigkeit in ms: Definiere, wie viel Zeit zwischen dem Wechsel der Slides vergehen soll Ziehen per Maus: Entscheide, ob man die Slides durch Ziehen mit der Maus verschieben kann Automatisch abspielen aktivieren: Lege fest, ob die Slides automatisch durchscrollen sollen Abspielinternvall in ms: Bestimme das Zeitintervall in dem der Slider automatisch verschoben werden soll Hat nur eine Funktion, wenn automatisches abspielen aktiviert ist! Pausieren bei Hover?: Lege fest, ob das automatisch Scrollen pausiert werden soll, wenn jemand mit der Maus auf dem Slider ist