Versionen im Vergleich

Version Alte Version 63 Neue Version 64
Änderungen wurden vorgenommen von

XIMA Redakteur

XIMA Redakteur

Gespeichert am

Schlüssel

  • Diese Zeile wurde hinzugefügt.
  • Diese Zeile wurde entfernt.
  • Formatierung wurde geändert.

Highlightslider

Überblick

Name

contentclass-snippet.gif Slider

Ordner

folderopen.gif Erweiterungs- und Sonder - Templates

Styleguide

https://www.styleguide.sachsen.de/highlight-slider-4044.html

Inhaltsverzeichnis

Inhalt
minLevel1
maxLevel5
outlinefalse
stylenone
typelist
printabletrue

1. Einleitung

Ein Highlightslider ist ein Seiteninhalt, welcher ausschließlich im Kopfbereich oberhalb des Hauptinhalts einer Webseite platziert wird. Die einzelnen Inhalte wechseln automatisch in einem zeitlichen Rhythmus, können aber auch manuell ausgewählt oder angehalten werden. Dieser spezielle Seiteninhalt steht nur auf der Startseite einer Webseite zur Verfügung und 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. Bsp. Bilder mit Text und/oder auch Videos mit und ohne Text eingebunden werden.

Panel
panelIconId1f5a5
panelIcon:desktop:
panelIconText🖥️
bgColor#EAE6FF

2. Verschiedene Darstellungsmöglichkeiten

Seitenvorscau_Slide_Bild_Text.png

2.1 Highlightslider mit Slide Bild und Text

Ein Highlightslider wird unabhängig von der Seitenaufteilung immer in der Aufteilung “Navigation-Inhalt breit” dargestellt. Diese ist voreingestellt und kann nicht geändert werden.

Info

Siehe dazu Kapitel Auswahl der Seitenaufteilung

Seitenvorscau_Slide_Video.png

2.2 Highlightslider mit Video (ohne Text)

Die Inhalte des Highlightslider können den Bedürfnissen entsprechend angepasst und ausgewählt werden. Es stehen vier Vorlagen dafür zur Verfügung.

Info

Siehe dazu auch Abschnitt 3.3 Slides

Seitenvorschau_Slide_Video_Text.png

2.3 Highlightslider mit Video und Text

Die Vorlage “Video mit Text” eignet sich auch als Teaser für bestimmte Themen der gesamten Seite und ist ein beliebtes Mittel bei der Gestaltung.

Info

Siehe dazu auch Abschnitt 3.3 Slides

Seitenvorscau_Slide_Bild.png

2.4 Highlightslider mit Bild (ohne Text)

Im Highlightslider kann auch nur ein einzelnes Bild eingebunden werden und kann als gestalterisches Mittel zur Einleitung der gesamten Seite dienen.

Info

Siehe dazu auch Abschnitt 3.3 Slides

Panel
panelIconId270f
panelIcon:pencil2:
panelIconText✏️
bgColor#FFEBE6

3. Verwendung im SmartEdit

3.1 Erstellen des Seiteninhalts “Slider im Highlightbereich”

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

Info

In jedem Projekt ist bereits initial ein Highlightslider vorhanden und muss nur in Ausnahmefällen manuell erstellt werden.

Aktion

Vorschau im CMS

1

Seite öffnen

seite_oeffnen_green.png
2icon_reddot_multilink.png

Seite im Highlights-Bereich hinzufügen, sortieren, löschen (Maximale Anzahl an Seiten: 1)

Seite_oeffnen.png
3AMnu_ConnectNewPage.gif

Seite erstellen & verknüpfen

seite_erstellen_green.png
4

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
5

Mit “OK” bestätigen

ok_green.png
6

Darstellung nach Erstellung “Highlightslider”.

Darstellung_Slider_Highlightbereich.png

3.2 Bearbeiten des Seiteninhalts “Slider im Highlightbereich”

Bearbeitungsmodus.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 Slides automatisch oder manuell wechseln

icon_reddot_multilink.png Slides

einzelne Slide sortieren oder entfernen

Die schrittweise Erläuterungen der einzelnen Schritte werden in den Kapiteln 7.7 Sortieren von Seiteninhalten und 7.8 Entfernen von Seiteninhalten erklärt.

add.png Neuer Eintrag

einzelne Slides hinzufügen

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

3.3 Slides

3.3.1 Slide hinzufügen - Neuer Eintrag

In diesem Abschnitt wird erklärt, wie ein Slide hinzugefügt werden kann. Je nach gewünschter Anzahl an Slides (empfohlen maximal 6) müssen diese Schritte wiederholt werden.

Symbol

Aktion

1add.png

Neuer Eintrag

Slides_hinzufügen_Neuer_Eintrag.png
2

  • Es öffnet sich ein neues Fenster, mit den verschiedenen 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 eines “Slide”

Die Abbildung zeigt das Beispiel “Slide Video und Text”

Darstellung_Slide_Video_Text.png

3.3.2 Slides bearbeiten

3.3.2.1 Slide Video und Text

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

Info

Die Bearbeitungsmöglichkeiten der Vorlagen “Slide Video” und “Slide Video und Text” unterscheiden sich nur wenigen Punkten. Überschrift und Text und der Verweis (Linkname / Linkziel)stehen nicht zur Auswahl (siehe Abbildung 1 und 2 zum Vergleich). Zur Vereinfachung wird daher auf eine extra Beschreibung in diesem Kapitel verzichtet.

Darstellung nach erstellen des Slide. Der Seiteninhalt ist zur Bearbeitung der bereits geöffnet.

edit_slide_video_text.pngBearbeiten_Slide_Video.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.9 Projektfremde Seite einbinden

edit.gif Slide-Darstellung

Ändert das Layout des Slide.

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

icon_reddot.png Überschriften

Einfügen einer Überschrift - dies ist optional.

icon_reddot.png Video-Titel

Status
colourBlue
titleBARRIEREFRREIHEIT

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 Bild und Asset-Attribute

icon_reddot (1).png Transkript

inhaltliche Beschreibung des Videos in Textform.

icon_reddot (1).png Text

Inhaltsbearbeitung des Slide 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 des Slide.

Darstellung_nach_Bearbeitung.png

Darstellung nach Bearbeiten des Slide in der Seitenvorschau.

Darstellung_Bearbeitung_Seitenvorschau.png

3.3.2.2 Slide Bild und Text

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

Info

Die Bearbeitungsmöglichkeiten der Vorlagen “Slide Bild” und “Slide Bild und Text” unterscheiden sich nur wenigen Punkten. Überschriften und Text stehen nicht zur Auswahl (siehe Abbildung 1 und 2 zum Vergleich). Zur Vereinfachung wird daher auf eine extra Beschreibung in diesem Kapitel verzichtet.

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

edit_slide_bild_text.pngimage-20240917-133906.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.9 Projektfremde Seite einbinden

edit.gif Slide-Darstellung

das Layout dieses Slide ändern.

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

icon_reddot.png Überschriften

Einfügen einer Überschrift - dies ist optional.

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 Bild und Asset-Attribute

icon_reddot (1).png Text

Inhaltsbearbeitung des Slide 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 des Slide.

Darstellung_nach_Layou_aendern_2.png

Darstellung nach Bearbeiten des Slide in der Seitenvorschau.

Darstellung_nach_Layou_aendern.png

3.3.3 Slide-Darstellung

In diesem Abschnitt wird erklärt, wie nachträglich das Layout eines bereits bestehenden Slide geändert werden kann. Über die Option “Slide-Darstellung” 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 der “Slide Bild” in “Slide Bild mit Text” geändert.)

  • Mit “Speichern” bestätigen

Layout_veraendern.png
3

Darstellung nach Änderung des Layout.

Darstellung_Layout_geaendert.png

3.3.4 Slides sortieren

In diesem Abschnitt wird erklärt, wie einzelne Slides sortiert werden können. Da dieser Bearbeitungsschritt bei vielen Seiteninhalten gleich ist, ist die detaillierte Beschreibung im Kapitel 7.7 Sortieren von Seiteninhalten zu finden.

1icon_reddot_multilink (1).png

Slides

Slides_sortieren.png
2

Die weiteren Bearbeitungsschritte sind im Kapitel 7.7 Sortieren von Seiteninhalten ab Punkt 2 beschrieben.

3.3.5 Slides entfernen

In diesem Abschnitt wird erklärt, wie einzelne Slides entfernt werden können. Da dieser Bearbeitungsschritt bei vielen Seiteninhalten gleich ist, ist die detaillierte Beschreibung im Kapitel 7.8 Entfernen von Seiteninhalten zu finden.

1icon_reddot_multilink (1).png

Slides

Slides_sortieren.png
2

Die weiteren Bearbeitungsschritte sind im Kapitel 7.8 Entfernen von Seiteninhaltenab Punkt 2 von Seiteninhalten beschrieben.

Panel
panelIconId1f50d
panelIcon:mag:
panelIconText🔍
bgColor#E3FCEF

4. Häufig gestellte Fragen (FAQ)

Frage

Antwort

Können die Inhalte im Highlightslider auch im Inhaltsslider verwendet werden?

Ja, hierbei werden die selben Vorlagen für Seiteninhalte verwendet. Der Unterschied zum Slider im Inhaltsbereich besteht lediglich in der Darstellung. Zudem kann ein Slider im Highlightbereich nur einmal auf der Startseite im Kopfbereich eingesetzt werden.

Können andere Seiteninhalte im Highlightbereich verwendet werden?

Nein, für den Kopfbereich der Startseite ist ausschließlich der Slider einsetzbar. Dies ist für die Seite konfiguriert und kann nur in Abstimmung mit der SK geändert bzw. angepasst werden.

Ist ein Highlighbereich auf der Startseite obligatorisch?

Nein, der Highlightbereich (Kopfbereich) der Startseite muss nicht eingesetzt werden. Im Regelfall ist jedoch der Highlightslider auf jeder Startseite initial bereits eingerichtet und muss nur in Ausnahmefällen manuell erstellt werden.