Bevor Sie mit der Slidererstellung beginnen, sollten Sie sich überlegen, welche Größe der Slider haben soll.
Die Breite ist im Normalfall schon durch die Gegebenheiten innerhalb der Website festgelegt. Die Höhe ist variabel und muss von Ihnen bestimmt werden.
Die Bilder, die integriert werden sollen, bearbeiten Sie vorab pixelgenau in dem festgelegten Maß und laden diese in den entsprechenden Ordner ins Mediaarchiv hoch. Sollten Sie Fragen zur Größe der benötigten Bilder haben, setzen Sie sich gerne mit uns in Verbindung.
Danach beginnen Sie mit der Erstellung des Sliders unter dem Menüpunkt "Redaktion>Slider" .
Ein Slider besteht aus zwei Elementen
- dem "Slider" an sich, der quasi den Rahmen des Elements vorgibt
- sowie den "Slides", die die einzeln durchlaufenden Bilder / Objekte wiederspiegeln
Anlage des Sliders
Klicken Sie auf den Button "neuen Slider anlegen".
Reiter "Einstellungen": Hier geben Sie dem Slider im Feld "Headline" (1) einen für Sie passenden Namen und fügen einen entsprechenden, beschreibenden Zentraltext hinzu. (2) Der Beschreibungstext ist keine Pflichtangabe, dient aber zur besseren Orientierung innerhalb des CMS.
Reiter "erweiterte Konfiguration": Hier können Sie einstellen, wie der von Ihnen angelegte Slider eingeblendet werden soll. Grundsätzlich ist zu entscheiden, ob die Bilder automatisch (und in welchem Intervall) oder nur per Klick wechslen sollen. Auch die Ein- und Ausblendeanimation kann über das Dropdown-Menü bestimmt werden. Ebenso ist einstellbar, ob eine Seitennavigation angezeigt werden soll (Pfeile links und rechts auf dem Slider zum Durchklicken, sowie eine Paginationsanzeige in Form von Punkten).
Wenn alles für Sie passend eingetragen ist, bitte auf "speichern" klicken.
Anlage von Einzelslides - Einzelbilder innerhalb des Sliders
Der Slider, im Beispiel mit "Slider - Lorem Ipsum" benannt, ist jetzt angelegt. Um Einzelslides innerhalb des Sliders anzulegen, klicken Sie bitte auf das "bearbeiten"-Icon.
| 07.
Danach klicken Sie bitte auf den Button "+neuen Slide erstellen".
| 08.
Reiter "Einstellungen": Geben Sie dem Einzelslide einen für Sie passenden Namen innerhalb des Feldes "Headline".
Dann tragen Sie bitte die Breite und die Höhe des Slides - die Maße haben Sie ja schon im Vorfeld festgelegt - in die dafür vorgesehenen Felder ein.
(Bitte beachten Sie, dass auch die Bilder aller weiteren Einzelslides, die Sie irgendwann erstellen und die innerhalb des Gesamtsliders ablaufen sollen, die von Ihnen festgelegte Größe haben müssen!)
| 09.
Reiter "Einstellungen": Über den Button "+Hauptbild" kommen Sie zum Button "Mediaarchiv".
| 10.
Reiter "Einstellungen": Klicken Sie jetzt den Button "Mediaarchiv". Im Mediaarchiv können Sie dann das Foto auswählen, das Sie für den Slider in entsprechender Größe bearbeitet und dort hochgeladen hatten.
| 11.
Reiter "Einstellungen": Nach Auswahl des Bildes klicken Sie bitte auf "speichern".
| 12.
Reiter "Einstellungen": Fügen Sie bitte noch einen beschreibenden Zentraltext zum Slide 01 hinzu.
| 13.
Über den Button "+neues Textelement" können Sie dem Bild Text hinzufügen.
Über den Reiter "Inhalt" fügen Sie den vorgesehenen Text ein.
| 14.
Über den Reiter "Animation" legen Sie über die Auswahl der Einblendeanimation fest, wie der Slider animiert werden soll.
Beispielhaft: fadeInRight
| 15.
Reiter "Animation": Des Weiteren legen Sie jetzt den Start der Animation des Textes fest.
Beispielhaft: 1,0 sec.
Dann bitte auf den Button "übernehmen" klicken.
| 16.
Reiter "Formatierung": Bitte geben Sie im Feld "Schriftgröße" die gewünschte Größe ein.
Wählen Sie des Weiteren die Textfarbe aus.
(Nicht vorhandene, vorgegebene Farben können Sie auch als rgb-Wert oder #-Wert eintragen und danach auf "auswählen" klicken. Dann wird der gewünschte Farbton übernommen.)
| 17.
Reiter "Formatierung": Legen Sie die Hintergrundfarbe des Textes fest, falls erwünscht.
Mit dem Schieberegler können Sie die Transparenz festlegen, im Beispiel auf 0.8 reguliert.
| 18.
Reiter "Formatierung": Der festzulegende "Innenabstand" ist der Abstand vom Rand der Hintergrundfarbe des Textes zum Text. Hier im Beispiel auf 20 festgelegt.
Dieser ist nicht notwendig, wenn für den Text keine Hintergrundfarbe festgelegt ist!
Zusätzliche CSS können in dem Feld darunter eingepflegt werden, z.B. wenn der Text "bold" sein soll. ( font-weight: bold; ).
| 19.
Wenn Sie jetzt auf Redaktion>Slider klicken, wird Ihnen der angelegte Slider angezeigt.
Klicken Sie bitte jetzt auf das Icon "bearbeiten, und veröffentlichen Ihren Slider über den oberen Button "Veröffentlichen".
| 20.
Wenn Sie weitere Slides innerhalb Ihres Sliders erstellen möchten, gehen Sie bitte wieder den Weg über "Redaktion>Slider", wählen den Slider aus, der erweitert werden soll und klicken dann auf "+neuen Slide erstellen". (1)
Dabei gehen Sie die gleichen Schritte durch, die für den Slide 01 (unser Beispiel in der Doku) beschrieben wurden, benennen weitere dann aber mit Slide 02, Slide 03 o.ä. usw.
Einzelslides, die Sie erstellt haben, werden in der Sliderverwaltung alle auf der rechten Seite unter "verfügbare Slides" (2) dargestellt.
Somit besteht die Möglichkeit, diese in diverse Slider zu integrieren.
Bei der Gestaltung der Slides kann man seinen Ideen freien Raum lassen.
Bedenken sollte man allerdings die Textlängen und Fontgrößen im Hinblick auf "Responsive Webdesign".
Die Texte sollten auch auf einem Smartphone noch lesbar sein.