Zum Ende der Metadaten springen
Zum Anfang der Metadaten

Inhaltsslider

Überblick

Name

contentclass-snippet.gifSlider

Ordner

folderopen.gif Erweiterungs- und Sonder - Templates

Styleguide

https://www.styleguide.sachsen.de/inhalts-slider-5675.html

Inhaltsverzeichnis


1. Einleitung

Ein Slider ist ein Seiteninhalt bei dem einzelne Inhalte automatisch in einem zeitlichen Rhythmus wechseln oder auch manuell ausgewählt oder angehalten werden können. Ein Slider zeigt verschiedene bildhafte Beiträge mit Texten an und kann bewusst die Aufmerksamkeit eines Besuchers auf sich ziehen und bietet somit einen Einstieg in bestimmte Themen der Webseite. Inhaltlich stehen verschieden Auswahlmöglichkeiten zur Verfügung. So können z. B. Bilder mit Text und/oder auch Videos mit und ohne Text eingebunden werden.

2. Verschiedene Darstellungsmöglichkeiten

Darstellung_slide_bild_text_marginal.png

2.1 Slider mit Slide Bild und Text

In der Abbildung ist ein Beitrag als Slide Bild und Text dargestellt. Je nach Seitenaufteilung (mit oder ohne Marginalspalte), variiert die Breite der Darstellung. In der Beispielabbildung ist die Seitenaufteilung “Navigation-Inhalt Marginalspalte” (mit Marginalspalte) gewählt.

Darstellung_Slider_Video.png

2.2 Slider mit Slide Video (ohne Text)

Je nach Seitenaufteilung (mit oder ohne Marginalspalte), variiert die Breite der Darstellung. In der Abbildung ist ein Beitrag als Slide Video bei einer Seitenaufteilung “Navigation-Inhalt breit” (ohne Marginalspalte) dargestellt.

Darstellung_Slider_Bild_Text.png

2.3 Slider mit Slide Bild und Text

Je nach Seitenaufteilung (mit oder ohne Marginalspalte), variiert die Breite der Darstellung. In der Abbildung ist ein Beitrag als Slide Bild und Text bei einer Seitenaufteilung “Navigation-Inhalt breit” (ohne Marginalspalte) dargestellt.



3. Verwendung im SmartEdit

3.1 Erstellen des Seiteninhalts “Slider” ohne Slide

Schrittweise Erläuterung für die Erstellung eines neuen Seiteninhalts basierend auf der CMS-Vorlage “Slider”.

Aktion

Vorschau im CMS

1

Seite öffnen

seite_oeffnen_green.png
2icon_reddot_multilink.png

Seiteninhalte

Seiteninhalte_allgemein.png
3AMnu_ConnectNewPage.gif

Seite erstellen & verknüpfen

seite_erstellen_green.png
4folderopen.gif

Content-Klassen Ordner “Erweiterungs- und Sonder - Templates” auswählen

Das Bildschirmfoto bildet eine allgemeine Darstellung aller Content-Klassen Ordner ab. Kann ggf. abweichen.

Content_Klassen-Ordner.png
5

Content-Klasse “Slider” auswählen

Content_Klassen.png
6

Es erscheint ein Dialogfenster mit einem aus der Content-Klasse generierten Seitennamen, der mit der späteren Überschrift des neuen Seiteninhalts belegt werden sollte.
Diese Überschrift wird nicht auf der erstellten Seite angezeigt. Sie dient als CMS-interne Überschrift.

überschrift_seite_green.png
7

Mit “OK” bestätigen

ok_green.png
8

Darstellung nach Erstellung “Slider”.

Darstellung_Slider.png

3.1.1 Bearbeiten des Seiteninhalts “Slider ohne Slides”

Bearbeiten_Slider.png

Bezeichnung

Beschreibung

icon_reddot_openpage (1).png Slider öffnen

Seiteninhalt zur Bearbeitung öffnen

icon_reddot_closepage (1).png Slider schließen

Bearbeitung beenden

icon_reddot (1).png Einstellungen

einstellen ob Slider automatisch sliden soll oder nicht

icon_reddot_multilink.png Slides

einzelne Slides hinzufügen, sortieren oder entfernen

Die schrittweise Erläuterung der einzelnen Schritte wird im Abschnitt 3.3 Slides erklärt.

add.png Neuer Eintrag

einzelne Slides hinzufügen unter Verwendung des “Layout Selector”.

Die schrittweise Erläuterung der einzelnen Schritte wird im Kapitel Inhaltsslider im Abschnitt 3.3.3 Slide hinzufügen - Neuer Eintrag erklärt.


3.2 Erstellen des Seiteninhalts “Slider mit Slide”

Bei der Verwendung dieser Variante wird ein Slider mit einem Slide erstellt. Die Auswahl des Slide ist individuell anpassbar. Jeder weitere Slide muss manuell hinzugefügt werden. Die einzelnen Schritte zur Erstellung von Slides sind im Abschnitt 3.3 Slides erklärt.

Aktion

Vorschau im CMS

1

Seite öffnen

seite_oeffnen_green.png
2icon_reddot_multilink.png

Seiteninhalte

Seiteninhalte_allgemein.png
3AMnu_ConnectNewPage.gif

Seite erstellen & verknüpfen

seite_erstellen_green.png
4folderopen.gif

Content-Klassen Ordner “Slider” auswählen

Das Bildschirmfoto bildet eine allgemeine Darstellung aller Content-Klassen Ordner ab. Kann ggf. abweichen.

Content_Klassen-Ordner.png
5contentclass-snippet.gif

Auswahl einer gewünschten Content-Klasse:

  • Slide aus anderem Projekt

  • Slide Bild

  • Slide Bild und Text

  • Slide Video

  • Slide Video und Text

auswählen

Content_Klassen.png
6

Es erscheint ein Dialogfenster mit einem aus der Content-Klasse generierten Seitennamen, der mit der späteren Überschrift der neuen Seite belegt werden sollte.
Diese Überschrift wird nicht auf der erstellten Seite angezeigt. Sie dient als CMS-interne Überschrift.

überschrift_seite_green.png
7

Mit “OK” bestätigen

ok_green.png
8

Darstellung nach Erstellung eines “Slider mit Slide”

Im Beispiel wurde “Slide Bild und Text” gewählt

Darstellung_nach_Auswahl.png

3.3 Slides

3.3.1 Slide hinzufügen

In diesem Abschnitt wir erklärt, wie ein Slide einem Slider hinzugefügt werden kann. Je nach gewünschter Anzahl an Slide (maximal 6) müssen diese Schritte wiederholt werden. Dabei stehen zwei Möglichkeiten zur Verfügung.

Symbol

Aktion

1icon_reddot_multilink (1).png

Slides

Bearbeiten_Slider_Slides_hinzufuegen.png
2AMnu_ConnectNewPage.gif

Seite erstellen und verknüpfen

Seite_erstellen_ohne_Eintraege.png
3folderopen.gif

Content-Klassen Ordner “Erweiterungs- und Sonder - Templates” auswählen

Das Bildschirmfoto bildet eine allgemeine Darstellung aller Content-Klassen Ordner ab. Kann ggf. abweichen.

Content_Klassen-Ordner.png
4contentclass-snippet.gif

Content-Klasse “Slide x” auswählen

  • individuelle Auswahl der Slides

(im Beispiel wurde “Slide Video und Text” ausgewählt)

Die einzelnen Optionen und die schrittweise Erläuterungen werden im Abschnitt 3.3.3 Slides hinzufügen - Neuer Eintrag erklärt.

Auswahl_Content-Klasse.png
5

Es erscheint ein Dialogfenster mit einem aus der Content-Klasse generierten Seitennamen, der mit der späteren Überschrift der neuen Seite belegt werden sollte.
Diese Überschrift wird nicht auf der erstellten Seite angezeigt. Sie dient als CMS-interne Überschrift.

überschrift_seite_green.png
6

Mit “OK” bestätigen

ok_green.png
7

Darstellung nach Erstellung “Slide

Die Abbildung zeigt das Beispiel “Slide Video und Text”

Darstellung_nach_Auswahl_video_text.png

3.3.2 Slide bearbeiten

3.3.2.1 Slide Video und Text

Schrittweise Erläuterung für das Bearbeiten eines neuen Seiteninhalts basierend auf der CMS-Vorlage “contentclass-snippet.gif Slide Video und Text”.

Dartsellung nach erstellen des Slide aus der Vorlage “Slide Video und Text”. Der Seiteninhalt ist zur Bearbeitung der bereits geöffnet.

edit_slide_video_text.png

Bezeichnung

Beschreibung

icon_reddot_closepage (1).pngSlide Video und Text schließen

Bearbeitung beenden

icon_reddot (1).pngSeite für andere Projekte freigeben

Siehe dazu Kapitel 7.10 Projektfremde Seite verknüpfen

edit.gif Slide-Darstellung

Ändert das Layout des Slide.

Die einzelnen Schritte werden im Abschnitt Slide-Darstellung erklärt.

icon_reddot.png Überschriften

Einfügen einer Überschrift - dies ist optional.

icon_reddot.png Video-Titel

BARRIEREFRREIHEIT

Titel (Überschrift) Video

icon_reddot_obligatory.png YouTube Video

Auswahl eines YouTube Video

Videos werden in der Regel im zentralen YouTube-Kanal des Freistaates Sachsen hochgeladen und von dort aus auf den Webseiten des Freistaates Sachsen eingebettet.
Es gibt verschieden Möglichkeiten ein Video auszuwählen. Die einzelnen Schritte sind im Kapitel YouTube-Video/Stream - Abschnitt3.2.1 Videoauswahl erklärt.

icon_reddot.png Vorschaubild

Beim Aufrufen einer Seite werden Videos zwar angezeigt, starten aber nicht von selbst. Für das Abspielen von integrierten Youtube-Videos muss der Nutzer vorher den Datenschutzhinweis akzeptieren. Dazu wird vorab ein gestaltetes Vorschaubild für jedes Video angezeigt (Standardeinstellung im CMS).
Bei Bedarf kann das Vorschaubild auch ersetzt werden. Dabei ist das YouTube Logo sowie der Play-Button im Vorschaubild zu platzieren. Die entsprechenden Icons können hier heruntergeladen werden → YouTube-Logo und Play-Button zum Download.

Hinweis.png Wie bearbeite ich Alt-texte, Bild-Titel und Bild-Rechte?

Siehe dazu Kapitel 7.6.1.2 Bild und Asset-Attribute

icon_reddot (1).png Transkript

inhaltliche Beschreibung des Videos in Textform.

icon_reddot (1).png Text

Inhaltsbearbeitung des Akkordeoneintrages mit Hilfe des Text-Editor. Hier können die Inhalte (z.Bsp. Texte, Tabellen und/oder Grafiken) platziert werden. Das Arbeiten mit dem Text-Editor wird im Abschnitt “Text bearbeiten - Der Texteditor” beschrieben.

icon_reddot (1).png Linkname

Name / Bezeichnung des Links

link.png Linkziel

Seite auf die verlinkt werden soll (interne oder externe Seite)

Darstellung nach Bearbeiten Slide Video und Text.

Darstellung_bearbeiten_slide_video_text.png

Darstellung nach Bearbeiten des Slide in der Seitenvorschau.

Darstellung_Slider_Video_Text.png
3.3.2.2 Slide Bild und Text

Schrittweise Erläuterung für das Bearbeiten eines neuen Seiteninhalts basierend auf der CMS-Vorlage “contentclass-snippet.gif Slide Bild und Text”.

Ansicht nach erstellen des Akkordeon aus der Vorlage “Slide Bild und Text”. Der Seiteninhalt ist zur Bearbeitung der bereits geöffnet.

edit_slide_bild_text.png

Bezeichnung

Beschreibung

icon_reddot_closepage (1).png Slide Bild und Text schließen

Bearbeitung beenden

icon_reddot (1).png Seite für andere Projekte freigeben

Siehe dazu Kapitel 7.10 Projektfremde Seite verknüpfen

edit.gif Slide-Darstellung

das Layout dieses Slide ändern.

Die einzelnen Schritte werden im AbschnittSlide-Darstellung erklärt.

icon_reddot.png Überschriften

Einfügen einer Überschrift - dies ist optional.

icon_reddot.png Video-Titel

BARRIEREFRREIHEIT

Titel (Überschrift) Video

icon_reddot_obligatory.png Bild

Einfügen eines Bildes. Die Auswahl eines Bildes erfolgt über den Asset Manager.

Siehe dazu Kapitel 8. »Asset-Manager« - Die Bild-und PDF-Verwaltung des zCMS

Hinweis.png Wie bearbeite ich Alt-texte, Bild-Titel und Bild-Rechte?

Siehe dazu Kapitel 7.6.1.2 Bild und Asset-Attribute

icon_reddot (1).png Text

Inhaltsbearbeitung des Akkordeoneintrages mit Hilfe des Text-Editor. Hier können die Inhalte (z.Bsp. Texte, Tabellen und/oder Grafiken) platziert werden. Das Arbeiten mit dem Text-Editor wird im Abschnitt “Text bearbeiten - Der Texteditor” beschrieben.

icon_reddot (1).png Linkname

Name / Bezeichnung des Links

link.png Linkziel

Seite auf die verlinkt werden soll (interne oder externe Seite)

Darstellung nach Bearbeiten Slide Bild und Text.

Darstellung_bearbeiten_slide_bild_text.png

Darstellung nach Bearbeiten Slide in der Seitenvorschau.

Darstellung_Slider_Bild_Text.png
3.3.2.3 Slide Video

Schrittweise Erläuterung für das Bearbeiten eines neuen Seiteninhalts basierend auf der CMS-Vorlage “contentclass-snippet.gif Slide Video”.

Ansicht nach erstellen des Akkordeon aus der Vorlage “Slide Video und Text”. Der Seiteninhalt ist zur Bearbeitung der bereits geöffnet.

edit_slide_video.png

Bezeichnung

Beschreibung

icon_reddot_closepage (1).png Slide Video schließen

Bearbeitung beenden

icon_reddot (1).png Seite für andere Projekte freigeben

Siehe dazu Kapitel 7.10 Projektfremde Seite verknüpfen

edit.gif Slide-Darstellung

das Layout dieses Slide ändern.

Die einzelnen Schritte werden im Abschnitt Slide-Darstellung erklärt.

icon_reddot.png Video-Titel

BARRIEREFRREIHEIT

Titel (Überschrift) Video

icon_reddot_obligatory.png YouTube Video

Auswahl eines YouTube Video

Videos werden in der Regel im zentralen YouTube-Kanal des Freistaates Sachsen hochgeladen und von dort aus auf den Webseiten des Freistaates Sachsen eingebettet.
Es gibt verschieden Möglichkeiten ein Video auszuwählen. Die einzelnen Schritte sind im Kapitel YouTube-Video/Stream - Abschnitt3.2.1 Videoauswahl erklärt.

icon_reddot.png Vorschaubild

Beim Aufrufen einer Seite werden Videos zwar angezeigt, starten aber nicht von selbst. Für das Abspielen von integrierten Youtube-Videos muss der Nutzer vorher den Datenschutzhinweis akzeptieren. Dazu wird vorab ein gestaltetes Vorschaubild für jedes Video angezeigt (Standardeinstellung im CMS).
Bei Bedarf kann das Vorschaubild auch ersetzt werden. Dabei ist das YouTube Logo sowie der Play-Button im Vorschaubild zu platzieren. Die entsprechenden Icons können hier heruntergeladen werden → YouTube-Logo und Play-Button zum Download.

Hinweis.png Wie bearbeite ich Alt-texte, Bild-Titel und Bild-Rechte?

Siehe dazu Kapitel 7.6.1.2 Bild und Asset-Attribute

icon_reddot (1).png Transkript

inhaltliche Beschreibung des Videos in Textform.

Darstellung nach Bearbeiten des Slide Video

Darstellung_bearbeiten_slide_video.png

Darstellung nach Bearbeiten des Slide in der Seitenvorschau.

Darstellung_Slider_Video.png
3.3.2.4 Slide Bild

Schrittweise Erläuterung für das Bearbeiten eines neuen Seiteninhalts basierend auf der CMS-Vorlage “contentclass-snippet.gif Slide Bild”.

Ansicht nach erstellen des Akkordeon aus der Vorlage “Slide Video und Text”. Der Seiteninhalt ist zur Bearbeitung der bereits geöffnet.

edit_slide_bild.png

Bezeichnung

Beschreibung

icon_reddot_closepage (1).png Slide Bild schließen

Bearbeitung beenden

icon_reddot (1).png Seite für andere Projekte freigeben

Siehe dazu Kapitel 7.10 Projektfremde Seite verknüpfen

edit.gif Slide-Darstellung

das Layout dieses Slide ändern.

Die einzelnen Schritte werden im Abschnitt Slide-Darstellung erklärt.

icon_reddot_obligatory.png Bild

Einfügen eines Bildes. Die Auswahl eines Bildes erfolgt über den Asset Manager.

Siehe dazu Kapitel 8. »Asset-Manager« - Die Bild-und PDF-Verwaltung des zCMS

Hinweis.png Wie bearbeite ich Alt-texte, Bild-Titel und Bild-Rechte?

Siehe dazu Kapitel 7.6.1.2 Bild und Asset-Attribute

icon_reddot (1).png Linkname

Name / Bezeichnung des Links

link.png Linkziel

Seite auf die verlinkt werden soll (interne oder externe Seite)

Darstellung nach Bearbeiten des Slide Bild (ohne Text)

Darstellung_bearbeiten_slide_bild.png

Darstellung nach Bearbeiten des Slide in der Seitenvorschau.

Darstellung_Slider_Video.png


3.3.3 Slide hinzufügen - Neuer Eintrag

Symbol

Aktion

1add.png

Neuer Eintrag

Slides_hinzufügen_Neuer_Eintrag.png
2

  • Es öffnet sich ein neues Fenster, mit den verschiedene zur Auswahl stehenden Slides:

    • Video mit Text

    • Video ohne Text

    • aus anderem Projekt

    • Bild mit Text

    • Bild ohne Text

  • mit “Anlegen” bestätigen

(Im Beispiel wurde “Slide Video und Text” gewählt)

Layout_Selector_Auswahl.png
3

Darstellung nach Erstellung “Slide

Die Abbildung zeigt das Beispiel “Slide Video und Text”

Darstellung_nach_Auswahl_video_text.png

3.3.4 Slide-Darstellung ändern

In diesem Abschnitt wird erklärt, wie nachträglich das Layout eines bereits bestehenden Slide geändert werden kann. Auf diesem Weg, mit Hilfe des “Layout Selector”, können Änderungen vorgenommen werden, ohne den Slide zu entfernen und durch einen neuen zu ersetzen. In der nachfolgenden Erklärung wird als Beispiel das Layout des Slide “Slide Bild” in “Slide Bild und Text” geändert.

Symbol

Aktion

1edit.gif

Slide-Darstellung

Slide-Darstellung.png
2

  • Auswahl des Layout

    • zur Auswahl stehen folgende Content-Klassen zur Verfügung:

      • Video mit Text

      • Video ohne Text

      • aus anderem Projekt

      • Bild mit Text

      • Bild ohne Text

(im Beispiel wurde “Bild mit Text” gewählt)

  • Mit “Speichern” bestätigen

Layout_veraendern.png
3

Darstellung nach Änderung des Layout

aktuell funktioniert der “Layout Selector” nicht. Die Abbildung wird später hinzugefügt


3.3.5 Slide sortieren

3.3.6 Slide entfernen

Vorschlag: Die Beschreibung zu “Einträge sortieren” und “Einträge entfernen” kommen in einem eigenen Kapitel, in dem dies ausführlich beschrieben ist. Die Methodik ist bei allen Templates gleich, die Beschreibungen und Screenshots sind auch gleich. So spart man sich “zu komplexe” Inhalte der einzelnen Kapitel zur Beschreibung der Contenklassen.

Das Gleiche gilt für “Seite erstellen” !

4. Häufig gestellte Fragen (FAQ)

Frage

Antwort

  • Keine Stichwörter