Bevor Sie mit der Slidererstellung beginnen, sollten Sie sich schon ü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.
Dann sollten Sie die Bilder, die integriert werden sollen, entsprechend bearbeiten und in Ordner ins Mediaarchiv hochladen.
Dann beginnen Sie mit der Erstellung des Sliders.
| 01.
Wenn Sie im Redaktionssystem einen animierten Slider erstellen möchten, klicken Sie bitte auf "Redaktion>Slider".
| 02.
Dann bitte auf den Button "neuen Slider anlegen" klicken.
| 03.
Reiter "Einstellungen": Hier geben Sie dem Slider bitte im Feld "Headline" (1) einen für Sie passenden Namen und fügen einen entsprechenden, beschreibenden Zentraltext hinzu. (2)
| 04.
Reiter "erweiterte Konfiguration": Die Einblendeanimation des von Ihnen angelegten Sliders können Sie über ein Menü, das Sie über den kleinen Pfeil öffnen können, auswählen.
Hier stehen diverse Animationen zur Auswahl.
| 05.
Reiter "erweiterte Konfiguration": Im Feld "Intervall kann die voreingestellte Zahl 5000 (Darstellungszeit pro Slide in ms) im Normalfall stehen bleiben (1). Sollten Sie später in Ihrer Animation sehen, dass die Zeit nicht ausreicht, erhöhen Sie den Wert an dieser Stelle.
Sie können unter "erweiterte Konfiguration" auch festlegen, ob die Seitennavigation (2) im Slider (kleine Kreise auf dem Slider, die die Bildanzahl anzeigen und auch anklickbar sind) und die Vor-/Zurückbutton (3) (Pfeile links und rechts auf dem Slider) aktiv sein sollen.
Wenn alles für Sie passend eingetragen ist, bitte auf "speichern" klicken.
| 06.
Der Slider, im Beispiel mit "Slider - Lorem Ipsum" benannt, ist jetzt angelegt. Um Einzelslides innerhalb des Sliders anzulegen, klicken Sie bitte auf den Button "bearbeiten".
| 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 legen Sie bitte die Breite und die Höhe des Slides fest und tragen diese in die dafür vorgesehenen Felder ein.
(Das Bild, das Sie an späterer Stelle einfügen, muss die gleiche Größe besitzen, die Sie gerade für den Slide festgelegt haben!
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 möglichst noch lesbar sein.