Hauptslider

Owned by Sebastian Meyer
Last updated: Jun 07, 2019 by Chris Podubrin
4 min read

Einleitung

Der Hauptslider ist ein großflächiger Slider und wird meist auf der Startseite eingesetzt. Er ist meist das Erste, was der Kunde vom Shop sieht.

Einstellungen

Reiter "Slides"

Hier werden die Slides für den Slider konfiguriert. Wichtig: die Konfiguration erfolgt getrennt für Deskop (+ Tablet) und Smartphone-Ansichten, da das Anzeigeformat auf Smartphones oft zu sehr von klassischen Ansichten abweicht. Außerdem bietet dies die Möglichkeit, mobil optimierte Bilder zu verwenden.

Du kannst die aktuell bearbeitete Ansicht über die Buttons jederzeit zwischen Desktop und Smartphone wechseln.

Über den Button "Neuen Slide hinzufügen" fügst Du einen neuen Slide hinzu und kannst diesen dann über den Stift-Button bearbeiten:

Erstellung/Bearbeitung eines Slides

  1. Interne Benennung des Slides
    1. Um die einzelnen Slides organisieren zu können, kannst du jedem Slide eine Interne Bezeichnung geben

  2. Hier legst Du das Hintergrundbild für den Slide fest. Die empfohlene Mindestgrößen sind:
    1. Desktop/Tablet: 1416x620 Pixel (Breite * Höhe)
    2. Mobile: 768x440 Pixel (Breite * Höhe)


      (Wenn Du den Slider auf voller Breite anzeigen lassen willst, sollte das Bild entsprechend breiter gewählt werden - die Höhe bleibt dabei fix auf dem oben genannten Wert.

      → siehe auch Bild-Uploads/-Verwaltung) 

  3. Ganzer Slider klickbar
    1. Wenn diese Option aktiviert ist, ist der ganze Slide anklickbar. Ansonsten ist nur der Button anklickbar.

  4. Eigener Inhalt 
    1. Du kannst neben den Standard-Einstellungen auch eigenen HTML-Inhalt in den Slides verwenden.

  5. Überschrift groß/klein/Kurzbeschreibung
    1. Dir stehen im Slide bereits verschiedene Textbausteine zur Verfügung, welche du einzeln nutzen und mit individueller Schriftkonfiguration versehen kannst.

  6. Button-Text
    1. Hier legst Du den Text auf dem Button fest.

  7. Button-Link
    1. Hier legst Du fest, wohin der Button (bzw. der ganze Slide, wenn die Option aktiviert ist) verlinkt.

      → siehe Dynamische Verlinkung


Tipp

Die Reihenfolge der Slides kannst Du einfach per Drag & Drop ändern.


Reiter "Globale Einstellungen"

  1. Anzeige-Stil
    1. Wenn Du hier Full-Size auswählst, wird der Slider über die volle Browser-Fenster-Breite gestreckt. Beachte, dass Du für diese Darstellung entsprechend passendes Bildmaterial haben solltest, da die Bilder sonst durch die Streckung unscharf werden können.
    2. Wenn Du hier Boxed auswählst, passt sich der Slider in die Breite des Shop-Inhalts ein.

  2. Automatischer Wechsel in Sekunden
    1. Wenn Du möchtest, dass der Slider automatisch durch die Sliders schaltet, kannst Du das hier aktivieren, in dem Du eine Zahl ungleich 0 einträgst. Bei 0 gibt es keine automatische Weiterschaltung, ansonsten gibt die Zahl der Sekunden zwischen den automatischen Umschaltungen an.
    2. Der Slider wechselt nicht automatisch, solange der Kunde die Maus über dem Slider positioniert hat.

  3. Bubbles anzeigen
    1. Mit Bubbles sind die kleinen Kreise zur Navigation gemeint, die unter dem Slider angezeigt werden. Diese zeigen auch die Anzahl der Slides im Hauptslider an.

  4. Timer anzeigen
    1. Wenn Du den automatischen Wechsel aktiviert hast, zeigt der Timer die ungefähre Zeit bis zur Umschaltung an. Es handelt sich dabei um einen Farbbalken unter dem Slider, der sich synchron zur automatischen Umschaltung füllt.

  5. Fade-Effekt
    1. Es gibt einen Standard-Effekt und einen weiteren, welchen du mit dieser Option aktivieren kannst. Einfach mal ausprobieren, dann weißt du, was wir meinen.

  6. Automatische Höhe
    1. Normalerweise hat, sofern nichts weiter eingestellt wurde, der Slider eine Höhe von 620 Pixeln. Ist diese Option jetzt aber aktiviert worden, so passt sich die Höhe dynamisch dem jeweiligen Bildmaterial im Slide an.

  7. Eigene Höhe
    1. Neben der festen oder automatischen Höhe kannst du aber auch selbst entscheiden, welche Höhe der Slider haben soll. Aktivierst du diese Option, kannst du die Höhe für folgende Ansichten festlegen:
      1. XS = Smartphone
      2. SM = Tablet quer
      3. MD = Tablet quer
      4. LG = Desktop

  8. Abstand oben/unten
    1. Hiermit kannst Du einstellen, ob der Slider nach oben und unten etwas mehr Abstand zu anderen Elementen haben sollen. Ist diese Option deaktiviert, "dockt" der Slider direkt unter dem Element darüber "an". (Im Standardfall also ans Hauptmenü.)
    2. Wenn der Slider aber nicht das erste Element ist, kann es nützlich sein, den zusätzlichen Abstand aktivieren zu können.

  9. Individuelle Farben
    1. Hier legst Du fest, ob individuelle Farben zum Einsatz kommen sollen.
      1. Farbe Sliderpfeile
        1. Hiermit legst Du die Farbe für die Slider-Navigation fest (Pfeile + ggf. Bubbles). Wenn hier eine Farbe eingestellt ist, werden die Kreise im Hintergrund der Pfeile nicht mehr angezeigt.

  10. Zeitsteuerung
    1. Der gesamte Slider kann zeitgesteuert angezeigt werden.
      1. → siehe Zeitsteuerung

  11. Kundengruppen eingrenzen
    1. Du kannst das Element auf bestimmte Kundengruppen eingrenzen (Sichtbarkeit)

  12. Eigene CSS-ID/Klassen
    1. Wie an bei fast allen Widgets kannst du auch hier eigene CSS-IDs und -Klassen verwenden