Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Wenn Sie im Redaktionssystem einen animierten Slider erstellen möchten, klicken Sie bitte auf Redaktion > Slider.

Image Removed

Dann bitte 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

Anchor
Slider
Slider
Anlage des Sliders

Klicken Sie auf den Button "neuen Slider anlegen" klicken.


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) Der Beschreibungstext ist keine Pflichtangabe, dient aber zur besseren Orientierung innerhalb des CMS.


Reiter "erweiterte Konfiguration": Die Einblendeanimation des von Ihnen angelegten Sliders Hier können Sie über ein Menü, das Sie über den kleinen Pfeil öffnen können, auswählen.
Image RemovedReiter "erweiterte Konfiguration": Im Feld "Intervall kann die 5000 (Darstellungszeit pro Slide in ms) stehen bleiben (1), wenn Sie später keinen zu langen Text einfügen, der gelesen werden muss. Ansonsten ändern Sie hier die Zeit entsprechend um.
Sie können unter "erweiterte Konfiguration" auch festlegen, ob die Seitennavigation (2) im Slider (Punkte auf dem Slider, die die Bildanzahl anzeigen und auch anklickbar sind) und die Vor-/Zurückbutton (3) (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 ) aktiv sein sollenzum Durchklicken, sowie eine Paginationsanzeige in Form von Punkten).

Image Added

Wenn alles für Sie passend eingetragen ist, bitte auf "speichern" klicken.


Anchor
Einzelslide

Image Removed

...

Einzelslide
Anlage von Einzelslides - Einzelbilder innerhalb des Sliders

 Um Einzelslides innerhalb eines Sliders anzulegen, klicken Sie bitte auf den Button das "bearbeiten"-Icon.


Danach klicken Sie bitte auf den Button "+neuen Slide erstellen".


Reiter "Einstellungen": Geben Sie dem Einzelslide einen für Sie passenden Namen innerhalb des Feldes "Headline". Auch hier besteht die Möglichkeit einen Beschreibungstext für die interne Auflistung hinzuzufügen.

Dann legen tragen Sie bitte die Breite und die Höhe des Slides fest und tragen diese - die Maße haben Sie ja schon im Vorfeld festgelegt - 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!)


Reiter "Einstellungen": Über den Button "+Hauptbild" kommen Sie zum Button "Mediaarchiv".

Image Removed

Reiter "Einstellungen": Klicken Sie jetzt den Button "Mediaarchiv". Im  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.

Image RemovedImage Added


Reiter "Einstellungen": Nach Auswahl des Bildes klicken Sie bitte auf "speichern".

Reiter "Einstellungen": Fügen Sie bitte noch einen beschreibenden Zentraltext zum Slide 01 hinzu.Image Removed


Über den Button "+neues Textelement" können Sie dem Bild Text hinzufügen.

...


Über den Reiter "Animation" legen Sie über die Auswahl der Einblendeanimation fest, wie der Slider animiert werden soll. 
Beispielhaft: fadeInRight

Image Removed

Reiter "Animation": für das gerade angelegte Textfeld fest.  Des Weiteren legen Sie jetzt den Start der Animation des Textes fest.
Beispielhaft: 1,0 sec.

Dann bitte auf den Button "übernehmen" klicken.

Image Removed

Ist keine separate Animation gewünscht, nehmen Sie hier keine Einstellungen vor.

Image Added


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 ausgegebenübernommen.)


Reiter "Formatierung": Legen Sie die Hintergrundfarbe des Textes fest, falls erwünscht. Mit dem Schieberegler können Sie die auch eine Transparenz festlegen, im Beispiel auf 0.8 reguliert.


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; ).

Wenn Sie jetzt auf Redaktion>Slider klicken, wird Ihnen der angelegte Slider angezeigt.

...

Haben Sie das zusätzliche Textfeld nach Ihren Wünschen konfiguriert, klicken Sie bitte auf den Button "übernehmen".

Veröffentlichen eines Sliders

Haben Sie alle Einstellungen getroffen, muss der Slider noch auf der passenden Seite innerhalb Ihres Webauftritts veröffentlicht werden,

Klicken Sie dazu beim gewünschten Slider auf das Icon "bearbeiten, " und veröffentlichen Ihren Slider über den oberen blauen Button "Veröffentlichen", der Ihnen im oberen Bereich der Seite angezeigt wird.



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 auch die Möglichkeit, Einzelslides diese in diverse Slider zu integrieren.


Info
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.