Scrollbars erstellen

Schritt 1: Auswählen der Inhaltsart "Scrollbars"

Wählen Sie anfangs die Inhaltsart "Scrollbars" aus.

Dadurch sollte sich ein Fenster mit der Überschrift "Neue Scrollbar" öffnen. In diesem können Sie die Einstellungen rund um die Scrollbar festlegen und die Bilder dazu auch gleich hochladen.

In unserem Beispiel erstellen wir für unsere Startseite eine Scrollbar, die die Logos der Marken, welche in dem Shop angeboten werden, aufzeigt.

Schritt 2: Beschreibung wählen und Speichern

Wählen sie in dem Fenster als erstes eine Beschreibung. Diese dient nur der Übersichtlichkeit und wird nicht auf Ihrer Webseite angezeigt. Deswegen können Sie diese nach Belieben wählen.

In unserem Beispiel beschreiben wir die Scrollbar als "Scrollbar: Marken".

Danach speichern Sie direkt, um die Einstellungen zum Pflegen der Bilder für später einzublenden.

Schritt 3: Element-Breite und -Höhe wählen

Daraufhin wählen Sie die Element-Breite und -Höhe aus.

Dies nimmt Einfluss auf die Größe, in welcher die einzelnen Bilder dann tatsächlich angezeigt werden. Deswegen sollten Sie auch hier das Format bzw. Seitenverhältnis der Originalbilder beachten und die Element-Größe danach wählen, damit es nicht zu Verzerrungen oder Unschärfe kommt.

In unserem Beispiel legen wir als Element-Breite 105 Pixel und als Element-Höhe 75 Pixel fest, da die Logos eben diese Größe haben.

Schritt 4: Breite und Höhe wählen

Unter den Feldern "Breite" und "Höhe" kann man die Breite und die Höhe der gesamten Scrollbar einstellen.

Wenn Sie mehrere Elemente nebeneinander angezeigt haben wollen, müssen Sie somit die Breite der Scrollbar anpassen, sodass diese mindestens so breit ist, wie die Element-Breite multipliziert mit den gleichzeitig gezeigten Elementen. Die Höhe der Scrollbar sollte mindestens der Höhe der Elemente betragen.

In unserem Beispiel wählen wir als Breite 1360 Pixel und als Höhe 75 Pixel.

Schritt 5: Pfeilposition und Elementanzeige anpassen

Als nächstes können Sie entscheiden, wo und ob Pfeile an der Scrollbar angezeigt werden sollen, durch welche der Besucher manuell auf die nächsten Bilder umschalten kann. Dies können Sie durch das Drop-Down neben "Pfeile" anpassen.

Wir lassen für unser Beispiel "Innen anzeigen" ausgewählt.

Darunter können Sie festlegen wie viele Elemente gleichzeitig in der Scrollbar angezeigt werden sollen. Wie oben bereits erwähnt ist hier die Breite der Scrollbar zu beachten.

Im Beispiel stellen wir fünf gleichzeitig angezeigte Elemente ein.

Außerdem können Sie wieder darunter anpassen, wie viele neue Elemente pro Scroll weitergeschaltet werden sollen. Das heißt, wenn der Besucher auf den Pfeil klick oder eben die Anzeigedauer abgelaufen ist, wird diese Anzahl an Elementen durch neue ersetzt.

Bei unserer Scrollbar soll nur ein Element pro "Scroll" ausgetauscht werden.

Schritt 6: Anzeige- und Effekt-Dauer bestimmen

Nun bestimmen Sie noch die Anzeige- und die Effekt-Dauer.

Die Anzeigedauer legt fest, wie viele Millisekunden gewartet wird, bevor der nächste Scroll ausgelöst wird.

Die Effekt-Dauer legt fest, wie lange (in Millisekunden) der Scroll-Effekt angezeigt werden soll.

Bei diesen Einstellungen bietet es an, diese erstmal auf den Standart-Einstellungen zu lassen und diese später anzupassen, wenn es schneller bzw. langsamer gehen soll.

In unserem Beispiel lassen wir die Effekt-Dauer auf 1000ms und die Anzeigedauer auf 3000ms eingestellt.

Nun haben Sie alle Einstellungen zur Scrollbar an sich getroffen.

Schritt 7: Bilder pflegen

Somit können Sie anfangen, Ihre Bilder zu pflegen.

Dazu klicken Sie unter der Überschrift "Scrollbar Bilder" auf das Plus mit dem danebenliegenden Schriftzug "Neu".

Daraufhin sollte sich ein Fenster mit der Überschrift "Neues Scrollbar-Bild" öffnen, in welchem Sie das jeweilige Bild hochladen können. Dies funktioniert, indem Sie auf "Datei auswählen" klicken. Dadurch können Sie das gewünschte Bild in dem Explorer Ihres Computers wählen.

Wenn neben dem "Datei auswählen"-Button ein Datei- bzw. Bild-Name steht, haben Sie das jeweilige Bild erfolgreich ausgewählt.

In unserem Beispiel handelt es sich hierbei, um das "Titleist"-Logo.

Schritt 8: Bild-Beschreibung und -Text wählen

Danach legen Sie eine Beschreibung für Ihr hochgeladenes Bild fest. Diese dient nur der Übersichtlichkeit und wird nicht auf Ihrer Webseite angezeigt. Deswegen können Sie diese nach Belieben wählen.

Rechts unten haben Sie noch die Möglichkeit einen Bild-Text zu pflegen. Dieser wird unter dem jeweiligen Bild in der Scrollbar angezeigt.

In unserem Beispiel wählen wir als Beschreibung "titleist" aus. Jedoch wollen wir bei der Scrollbar keinen Text angezeigt bekommen, weswegen wir das Feld "Bild-Text" leer lassen.

Schritt 9: Link hinzufügen

Darüber hinaus haben Sie noch die Option an Ihrem Bild einen Link zu hinterlegen, auf welchen der Besucher weitergeleitet wird, sobald er auf das dazugehörige Bild in der Scrollbar klickt.

Diesen Link geben Sie einfach in das Feld "Link" ein. Sollten Sie innerhalb der gleichen Webseite verlinken wollen, wird die Domain-Adresse (also das "www.domain.de") nicht benötigt und es reicht die Navigation dahinter.

In unserem Beispiel fügen wir bei Link also "/b2c/de/shop/marken/top-marken-golf/titleist/" ein.

Nun vergessen Sie nicht Ihr Bild zu Speichern und zur Übersicht zurückzukehren. Dies funktioniert mit nur einem Klick auf "Speichern und schließen".

Somit haben Sie das erste Bild Ihrer Scrollbar gepflegt. Diesen Vorgang wiederholen Sie, bis Sie alle Bilder Ihrer Scrollbar eingefügt haben. Ihre Bilder werden dann in der Liste unter "Scrollbar Bilder" angezeigt. Sollten Sie eines der Bilder bearbeiten wollen, dann können Sie dies durch Doppelklick darauf.

Zuletzt speichern Sie die gesamte Scrollbar und schon wird diese auf Ihrer Seite angezeigt.