admorris Pro - Pro Slider

Pro Slider

Allgemein

Verwenden Sie den Pro Slider um direkt unterhalb des Headermenüs beliebige Bilder oder Videos in einem Slider auf voller Breite anzeigen zu lassen. Es stehen verschieden Optionen zur Verfügung um die Darstellung an Ihre Wünsche anzupassen. Durch die, im Hintergrund ablaufenden, Source-Sets Generierung für Bilder wird die Performance auf verschiedenen Geräten sichergestellt.

Der Pro Slider bietet sich hervorragend für die Verwendung auf der Startseite an, jedoch haben Sie auch die Möglichkeit mehrere Pro Slider zu erstellen und diese für bestimmte andere Seiten, Sprachen und Kundengruppen zu aktivieren.
Jeder Pro Slider enthält Slides welche die einzelnen Bilder oder Videos enthalten. Für jeden Slide können Sie individuelle Einstellungen treffen und an Ihre Anforderungen anpassen. Verändern Sie Inhalt, Position, Ausrichtung, Farben, Animation und den Gerätetyp im Handumdrehen .


Mit dem admorris Pro Template gibt es auch die Möglichkeit, Kategoriebannerbilder über die JTL-Wawi zu pflegen und die Darstellung anzupassen. Eine Anleitung dazu: Kategoriebilder & Attribute

Wo finde ich die Pro Slider Einstellungen?

Der Pro Slider ist Teil des admorris Pro - Templates welches Sie im admorris Pro - Plugin steuern. Von Ihrem JTL Shop Backend gelangen Sie über „Plugins → Installierte Plugins → admorris Pro“ zum Plugin. Unter „Layout & Design → Pro Slider“ finden Sie die Einstellungen.

Einrichtung eines Pro Sliders

  1. Klicken Sie auf „Slider hinzufügen“. Sie gelangen direkt zu den Slider Einstellungen.
  2. Vergeben Sie einen Internen Namen und treffen Sie Ihre gewünschten Einstellungen.
  3. Klicken Sie auf Speichern und Sie werden zu den Slides weitergeleitet.

Einrichtung der Slides

  1. Klicken Sie auf „Hinzufügen“ um einen neuen Slide zu erstellen. Es wird unterhalb ein neues Einstellungsfenster hinzugefügt.
  2. Hinterlegen Sie ein Bild indem Sie auf „Durchsuchen“ klicken. Es öffnet sich der customElfinder im OPC-Ordner. Innerhalb können Sie weitere Ordner anlegen und Ihre Bilder organisieren.
    1. Per Drag-and-Drop können Sie ein Bild von Ihrem PC direkt in das Elfinder Fenster ziehen und hochladen.
    2. Bitte beachten Sie Bildgrößen und Bildverhältnisse.
  3. Treffen Sie die gewünschten Einstellungen und befüllen Sie beliebige Textfelder.
  4. Klicken Sie ganz oben auf „Speichern“ um die Einrichtung abzuschließen.
In der Pro Slider Übersicht sollte der Slider-Balken nun grün dargestellt werden. Ist dieser noch grau, prüfen Sie über das Zahnradmenü ob die Einstellungen „Aktivieren“ ausgewählt ist. 


Pro Slider Übersicht



Hier sind alle angelegten Slider aufgelistet und neue Slider können über „Slider hinzufügen“ erstellt werden. Anhand der Farbe erkennen Sie den aktuellen Status des Sliders:
Grün: Slider aktiv
Grau: Slider inaktiv


Icons auf der rechten Seite:
  1. Slider löschen
  2. Zu den Slider-Einstellungen
  3. Zu den Slides

Slider Einstellungen



Allgemein

Interner Name

Um bei mehreren Pro Slidern den Überblick zu behalten sollten eindeutige Namen vergeben werden.

Hintergrundfarbe

Diese Einstellungen legt die Rahmenfarbe fest wenn Sie beim Seitenverhältnis „Fullscreen mit Rahmen“ wählen.

Aktiviert

Wählen Sie ob der Slider im Shop angezeigt werden soll oder nicht. Ist diese Einstellung nicht aktiviert dann wird der Slider in der Übersicht grau angezeigt und im Shop nicht ausgeführt.
Ist sie aktiviert wird der Slider in der Übersicht grün gefärbt und im Shop angezeigt.

Autoplay

Deaktivieren Sie diese Einstellung wenn die einzelnen Slides nicht automatisch wechseln sollen. Ist die Einstellung aktiv wird nach der eingestellten Verzögerung auf den nächsten Slide gewechselt.

Loop

Bei aktiver Einstellung werden alle vorhandenen Slides durchlaufen und beginnen im Anschluss wieder von vorne. Ist die Einstellung deaktiviert bleibt der Slider beim letzten Slide stehen und beginnt nicht automatisch von vorne.


Darstellung

Slide Transition

Stellen Sie hier eine globale Übergangsanimation für den Wechsel zwischen Slides ein. Diese kann später noch bei jedem Slide einzeln geändert werden.

Seitenverhältnis

Legen Sie fest in welcher Größe der Slider angezeigt werden soll und wie sich dieser auf verschiedenen Bildschirmgrößen verhält. Nützliche Informationen zu Bildgrößen finden Sie hier.

Responsive

Es werden Ihnen weitere Einstellungsmöglichkeiten zur Steuerung der Höhe angezeigt:

Sie legen mit diesen Werten fest wie hoch der Slider bei bestimmten Breiten angezeigt werden soll.
Die Werte können nach belieben angepasst werden, jedoch empfehlen wir sich an den vorgegebenen Breiten zu orientieren. 
In den Bereichen dazwischen passt sich der Slider automatisch an die Displaygröße an. Es ist zu beachten, dass Teile des Bildes bei kleineren Displays nicht mehr sichtbar sind. Sie haben bei den einzelnen Slides, Einstellungen um zu bestimmen welcher Teil des Bildes sichtbar bleiben sollen.
Sie können eigene Bilder für Mobilgeräte bei den Slides hinterlegen. Dies ermöglicht es Ihnen z.B.: ein Hochformat Bild für kleinere Displays anzuzeigen.

Fixes Seitenverhältnis

Bei dieser Auswahl bleibt immer das komplette Bild sichtbar und behält des Seitenverhältnis des ersten hinterlegten Slides bei. Zu beachten ist, dass dadurch das Bild auf Mobilgeräten meist sehr klein wird damit weiterhin das ganze Bild angezeigt werden kann. Hier empfiehlt es sich, Bilder speziell für Mobilgeräte zu hinterlegen.

Fullscreen

Das hinterlegte Bild wird immer auf die volle Breite und Höhe des sichtbaren Bildschirmbereichs angepasst. Bitte beachten Sie, dass auch hier Teile des Bild abgeschnitten werden um den ganzen Bildschirmbereich abdecken zu können.
Zum Verständnis: Hat ein Bild nicht die ausreichende Höhe um auf einem Gerät den ganzen Bildschirm abzudecken, so wird das Bild vergrößert und auf den Seiten abgeschnitten. 
Sie können bei den einzelnen Slides festlegen welcher Teil des Bildes sichtbar bleiben soll.

Fullscreen mit Rahmen

Diese Auswahl verhält sich gleich wie „Fullscreen“ lediglich wird um den Slide ein Rahmen mit der gewählten Hintergrundfarbe des Sliders hinzugefügt.

Verzögerung (in ms)

Legen Sie fest wie lange ein Slide angezeigt wird bis zum Nächsten gewechselt wird. Dies greift nur wenn Sie auch die Option „Autoplay“ aktiviert haben.

Parallax

Aktivieren Sie diese Einstellung um einen modernen Parallax Effekt beim Scrollen zu erzielen. Hier ein Beispiel.
Beachten Sie bitte bei der Verwendung der Parallax Funktion die hinterlegten Bilder um etwa 20% größer zu wählen.

Shuffle

Durch das aktivieren dieser Option werden die Slides nicht einfach der Reihe nach angezeigt sondern durchgemischt und in zufälliger Reihenfolge durchlaufen.

Pausieren bei Hover

Diese Option pausiert den Wechsel zum nächsten Slide solange sich der Mauscursor (Desktop) oder der Finger (Mobil) im Bild befindet.


Wählen Sie aus den verfügbare Icons eines aus welches im Slider für die Weiter/Zurück – Navigation verwendet werden soll.
Wählen Sie aus den verfügbaren Icons eines aus welches mittig am unteren Rand des Sliders anzeigt, wie viele Slides vorhanden sind. Weiters kann über diese Icons zwischen den Slides gewechselt werden.
Die Farbe der Navigations-Elemente wird durch die Textfarbe des jeweiligen Slides bestimmt.
Aktivieren Sie diese Option wenn die zuvor ausgewählten Icons nur angezeigt werden sollen wenn sich der Mauscursor innerhalb des Slides befindet.
Aktivieren Sie diese Option um die zuvor ausgewählten Icons auf Mobilgeräten nicht anzuzeigen.


Sichtbarkeit

Seitentyp

Hier legen Sie fest für welche Seite in Ihrem Shop dieser Slider angezeigt werden soll. Es ist nur möglich eine Seite pro Slider festzulegen.
Ihnen steht eine Auswahl der Standardseiten des JTL-Shops zur Verfügung. (z.B.: Warenkorb, Mein Konto, Startseite, News etc.)
Weitere Möglichkeiten:
  1. Artikeldetails: Geben Sie den Artikelnamen im Feld  „Artikel“ ein. Eine Livesuche hilft Ihnen den richtigen Artikel zu finden. Sie können auch anhand der Artikelnummer suchen und Ihnen wird der Artikelname vorgeschlagen.
  2. Artikelliste: Sie können mithilfe der Filter festlegen in welchen Artikellisten der Slider angezeigt werden soll.
    1. Kein Filter: Auf allen Artikellisten wird der Slider angezeigt.
    2. Tag: Wird nur auf Artikellisten mit einem bestimmten Tag angezeigt.
    3. Merkmal: Wird nur auf Artikellisten mit einem bestimmten Merkmal/Attribut angezeigt.
    4. Kategorie: Wählen Sie gezielt eine Kategorie in welcher der Slider angezeigt werden soll.
    5. Hersteller: Wählen Sie einen Hersteller aus. Der Slider wird nur auf der Artikelliste dieses Herstellers angezeigt.
    6. Suchbegriff: Wählen Sie einen Suchbegriff aus. Der Slider wird auf allen Artikellisten angezeigt welche diesen Suchbegriff in der JTL-Wawi zugewiesen haben.

Reichweite

Sprache

Wählen Sie aus für welche Sprachen im Shop der Slider angezeigt werden soll. Dies ermöglicht es Ihnen einen eigenen Slider für jede Sprache anzulegen und mit verschiedenen Inhalten zu befüllen.

Kundengruppe

Hiermit können Sie festlegen, dass nur bestimmte Kundengruppen diesen Slider sehen können. Dies ermöglicht es Ihnen z.B. Ihren B2B Kunden einen anderen Inhalt anzuzeigen als den Endkunden.
Vergessen Sie nicht Ihre Einstellungen zu speichern.

Slides

Allgemein

Hier hinterlegen Sie die einzelnen Slider-Bilder, bestimmen die Ausrichtung, den Inhalt und das Verhalten.
Ganz oben finden Sie folgende Einstellungen:

  1. zurück: Sie gelangen zurück zu den Slider-Einstellungen
  2. Hinzufügen: Fügen Sie einen weiteren Slide zu diesem Slider hinzu. Nach dem anklicken wird ein weiterer Slide ganz unten angefügt.
  3. Zurücksetzten: Sie können damit, alle noch nicht gespeicherten, Änderungen rückgängig machen.
  4. Speichern: Speichern Sie nach dem anlegen und konfigurieren von Slides Ihre Einstellungen.
  5. Slider Einstellungen: Über diesen Button gelangen Sie zurück zu den Slider-Einstellungen.

Nachdem Sie auf Hinzufügen geklickt haben, wird unterhalb ein neues Einstellungsfenster für den Slide hinzugefügt:



  1. Pfeile: Mithilfe der Pfeile links oben können Sie die Reihenfolge der Slides ändern.
  2. Desktop/Mobil: Legen Sie fest für welche Gerätetypen dieser Slide angezeigt werden soll. Dadurch können Sie für Mobilgeräte eigene Slides anlegen welche beispielsweise ein Bild im Hochformat enthalten.
  3. Löschen: Löschen Sie damit diesen Slide.
Beachten Sie, dass nach Änderungen der Speichern-Button gedrückt wird um diese zu übernehmen.


Media


Hintergrundfarbe

Legen Sie eine Farbe fest welche als Hintergrund verwendet wird sollten Sie kein Bild/Video hinterlegt haben. Weiters wird diese Farbe während des Ladevorganges angezeigt sollte das Bild/Video noch nicht vollständig geladen sein.

Slidetyp - Bild

Klicken Sie auf Durchsuchen um den custom ElFinder von admorris Pro zu öffnen. Nach dem öffnen befinden Sie sich im „opc“-Ordner (media/image/storage/opc) und können direkt per Drag-and-Drop Bilder von Ihrem Computer hochladen. In diesem Zuge werden gleich Source-Sets der Bilder erzeugt welche sich positiv auf die Performance auswirken.
Wählen Sie das gewünschte Bild für den Slider aus.

Bildausrichtung X

Wenn ein Bildschirm zu klein für das gesamte Bild ist, werden Teile des Bildes abgeschnitten. Mit dieser Einstellungen legen Sie fest welcher Teil des Bildes sichtbar bleiben soll.
Sie können Links/Zentriert/Rechts wählen. Je nachdem wird die andere Seite, oder bei „Zentriert“ beide Seiten, des Bildes abgeschnitten sollte das Bild im gesamten nicht mehr Platz haben.
Sie können auch einen Prozentualen Wert angeben um die Ausrichtung zu verfeinern. (50% = Zentriert)

Bildausrichtung Y

Gleicher Verwendungszweck wie die „Bildausrichtung X“ allerdings legen Sie hierbei fest welcher Teil in der Höhe erhalten bleiben soll wenn das Bild nicht vollständig Platz hat.

Slidetyp - Video

  1. Youtube: Hinterlegen Sie lediglich die Video-ID des gewünschten Videos. Dies ist der letzte Teil der Video URL. Bsp.: Wenn Sie bei einem Youtube-Video auf „Teilen“ klicken wird Ihnen die URL zum Video angezeigt:

Nehmen Sie davon nur den letzten Teil nach dem / . In diesem Beispiel also: jWdNPHtygpc und hinterlegen Sie diese Video-ID im Slide.
  1. Vimeo: Wie bei Youtube können Sie hier lediglich die Video-Id hinterlegen oder den gesamten Link. Klicken Sie bei einem Vimeo-Video auf „Share“ und kopieren Sie den Link.
Bitte beachten Sie, dass Youtube und Vimeo Cookies verwenden und Sie diese über den Consent Manager blockiert werden müssen.
  1. HTML5:  Sie können ein Video auch direkt von Ihrem Server laden und abspielen. Wir empfehlen diese Variante, da Sie meist performanter ist und keine Probleme mit Cookies verursachen kann. Laden Sie ein Video auf Ihren Server hoch und hinterlegen Sie den Ordnerpfad in dem Feld „Video-URL“.


Inhalt

Sie haben verschieden Felder um Texte und eine Verlinkung in Ihr Slider-Bild einzufügen.

Sie können in den Textfeldern auch HTML verwenden.


Hier sehen Sie wie diese Textfelder im Slider angezeigt werden:

Weiters kann über Text-Alignment und Position bestimmt werden wie die Texte ausgerichtet sind und an welcher Position im Slide diese angezeigt werden sollen.
  1. Link: Hinterlegen Sie eine Verlinkung für den Slide. Wenn Sie „Button anzeigen“ aktiv haben, wird diese Verlinkung auf den Button gelegt. Sollten Sie den Button nicht verwenden, so wir das gesamte Slider-Bild verlinkt.
Wenn Sie innerhalb Ihres Shops verlinken möchten, verwenden Sie den relativen Link.
Beispiel: https://ihr-shop.de/kategorie01 → /kategorie01 ist der relative Link.
Wenn dieser verwendet wird, öffnet sich der Link im selben Tab.
Wenn Sie den kompletten Link verwenden, öffnet sich ein neuer Tab. Sollten Sie auf eine externe Seite verlinken, so ist immer der komplette Link zu verwenden.


Animation


Slide Transition

Hier legen Sie speziell für diesen Slide eine Übergangsanimation fest. Sie haben bereits in den „Slider-Einstellungen“ eine Slide Transition festgelegt. Diese wird verwendet wenn Sie „Globale Transition Einstellung“ beibehalten. Diese können Sie jedoch ändern und für jeden Slide extra bestimmen.

Template

Hier haben Sie verschieden Presets zur Auswahl welche die Animation für das Anzeigen der Texte festlegt. Wählen Sie eine aus, speichern und laden Sie die Seite in Ihrem Shop neu um die verschiedenen Animationen zu sehen.

Trennlinie

Sie können eine Trennlinie zwischen dem Titel und dem Text aktivieren und mit der Einstellung „Länge der Trennlinie (px)“ die Länge festlegen.

Ken Burns Effekt

Aktivieren Sie diese Einstellung um einen ein ZoomIn oder ZoomOut Effekt auf den Slide zu legen. Nach dem aktivieren können Sie die Einstellungen „Effekt“ und „Ken Burns Animations Dauer (in ms)“ verändern.
Eine Dauer von 3000-5000ms ist in der Regel ein gute Wahl.

Vergessen Sie nicht auf „Speichern“ zu klicken um alle Ihre Änderungen zu übernehmen.


    • Related Articles

    • Custom JavaScript Code im admorris Pro Template

      Shop5 Die Funktionsweise Javascript über loadjs zu laden, funktioniert immer noch, aber es gibt im Shop5 inzwischen einen einfacheren Weg. Inline Scripts Wenn Sie ein Inline-Skript einfügen wollen, das jQuery oder eine andere vom Template geladene ...

    • Cookiehinweis Pro ab Version 2.4

      Unser Cookiehinweis Pro wurde mit Version 2.4 komplett überarbeitet und bietet jetzt eine Vielzahl an neuen Möglichkeiten. Der Cookiehinweis Pro hängt sich an den bestehenden JTL-Cookiehinweis an und verbessert die Funktionen und die Optik. Der Sales ...

    • JTL-Shop 5.2 Update mit admorris Pro

      Bevor Sie ein Update in Erwägung ziehen, beachten Sie folgende Punkte: Ist Ihr Server mit den Anforderungen des JTL-Shop 5.2 kompatibel? PHP 8.1 fähig! Sind alle Ihre notwendigen Plugins bereits kompatibel? Wenden Sie sich dazu am besten direkt an ...

    • admorris Pro Update von Shop4 auf Shop5

      Achtung: Stellen Sie vor dem Shopupdate sicher, dass Sie die Systemvoraussetzungen für den JTL-Shop5 erfüllen. Insbesondere, dass Ihr Webserver auf 64bit basiert! Wenn Sie im Shop5 Pluginupdates auf einem 32bit System durchführen, werden wichtige SQL ...

    • JTL Paypal Checkout & admorris Pro Template

      Plugins des JTL-Shops sind standardmäßig für das NOVA Template vorkonfiguriert. Es kann daher sein, dass für andere Templates einige Einstellungen angepasst werden müssen – so auch der Fall bei der Nutzung des JTL PayPal Checkout-Plugins in ...