Versionen im Vergleich

Version Alte Version 4 Neue Version Aktuell
Änderungen wurden vorgenommen von

Silvio Haase (Unlicensed)

Igor Seifert

Gespeichert am

Schlüssel

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

Teaser

Überblick

Name

contentclass-snippet.gifTeaser

Ordner

folderopen.gifInhalts - Templates

Styleguide

noch nicht vorhandenhttps://www.styleguide.sachsen.de/teaser-4741.html

Verwandte Themen

Boxenbereich

Inhaltsverzeichnis

Inhalt
minLevel1
maxLevel4
outlinefalse
stylenone
typelist
printabletrue

1. Einleitung

Der Seiteninhalt “Teaser” und seine drei Varianten mit einer unterschiedlichen Anzahl möglicher Links, wird genutzt, um Anreißertexte und Anreißerbilder zu erstellen und um auf bestimmte Inhaltsseiten, oft Nachrichtenmeldungen, weiterzuleiten. Über So können wichtige Themen über attraktive Bilder und kurze Texte sollen Besucher dazu vorgestellt und in den Vordergrund gebracht werden, der Verlinkung um den Besucher der Webseite dazu zu bringen, den entsprechenden Verlinkungen zu folgen. Die eigentliche Information findet sich normalerweise erst auf der sogenannten Folgeseite (Link). Gelegentlich ist Ist der Informationsgehalt einer Meldung jedoch so klein, dass keine Folgeseite notwendig ist, sondern kann die Information auch vollständig im Teaser abgebildet werden kann. Bei nur einem Link im Teaser wird die gesamte Fläche verlinkt und der Link ausgeblendet.

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

2. Verschiedene Darstellungsmöglichkeiten

Darstellung_1.pngImage RemovedDarstellung_1.pngImage AddedDie Anzahl an einzelnen Boxen in einem Boxenbereich kann individuell und den jeweiligen Ansprüchen bestimmt werden.

Unterhalb des Teasers können je nach Ansprüchen und Bedürfnissen mehrere Links hinzugefügt werden.
Je nach Seitenaufteilung der gesamten Seite (mit oder ohne Marginalspalte), variiert die Breite der Darstellung.
In der Beispielabbildung ist die Seitenaufteilung “Navigation-Inhalt-Marginalspalte” gewählt.

Info

Siehe dazu Kapitel Auswahl der Seitenaufteilung und Kapitel 7.


Darstellung_2.pngImage Removed

6 Marginalinhalte in der Marginalspalte.

Darstellung_2.pngImage Added

2.2 Teaser untereinander

Soll auf verschieden Themen gleichzeitig aufmerksam gemacht werden, können mehrere Teaser

Der Boxenbereich mit 3 Teaserboxen mit Bild in voller Seitenbreite bei einer Seitenaufteilung “Navigation-Inhalt breit”. Bei der Größe und Ausrichtung der Boxen kann zwischen einem 2- oder 3 spaltigen Layout gewählt werdenuntereinander platziert werden. Häufig wird dies auf Startseiten verwendet.
Je nach Seitenaufteilung der gesamten Seite (mit oder ohne Marginalspalte), variiert die Breite der Darstellung.

Info

Siehe dazu Kapitel Auswahl der Seitenaufteilung.

Darstellung_3.pngImage RemovedDarstellung_3.pngImage Added

2.3 Teaser

Die Abbildung zeigt 4 Teaserboxen mit Bild in einem Boxenbereich im 2-spaltigen Layout

mit großem Bild

Die Größe des Bildes kann bei der Bearbeitung eingestellt werden. In der Beispielabbildung wurde bei der Bildgröße “halbe Breite links” gewählt. Je nach Seitenaufteilung der gesamten Seite (mit oder ohne Marginalspalte), variiert die Breite der Darstellung.

Info

Siehe dazu Kapitel Auswahl der Seitenaufteilung

, Kapitel7.5 Die Marginalspalte

.

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

3. Verwendung im SmartEdit

3.1 Erstellen des Seiteninhalts “Teaser”

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

Info

Der “Teaser” wird standardgemäß ohne Links erstellt, welche in einem späteren Arbeitsschritt zusätzlich eingefügt werden können. Es besteht aber auch die Möglichkeit den Seiteninhalt “Teaser” bereits mit Links (ein bis drei Links) zu erstellen. Dazu stehen die Seiteninhalte “Teaser mit Bild und Verweis” zur Verfügung (siehe Punk 5 in diesem Abschnitt).

Symbol

Aktion

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 “Inhalts - Templates” auswählen

Hinweis

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

Content_Klassen-Ordner.png
5contentclass-snippet.gif

Content-Klasse “Teaser” auswählen

  • individuelle Auswahl eines Boxenbereich mit 2 oder 4 einzelnen Boxenoptional stehen auch die Content-Klassen mit bereits vorhandenen Links zur Verfügung. Die Arbeitsschritte zum Erstellen der Seiteninhalte sind gleich und unterscheiden sich lediglich in dem Punkt “icon_reddot_openpage.pngImage Added Link”. Siehe dazu Abschnitt 3.1.1 Bearbeiten des Seiteninhalts “Teaser”Abbildung 1 und Abbildung 2.


Hinweis

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

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 “Teaser”

Die Abbildung zeigt das Beispiel mit 2 Akkordeoneinträgenohne Links. Diese können später manuell hinzugefügt werden. Siehe dazu auch Kapitel Linkliste.

Dartsellung_nach_Erstellen_Teaser.png

3.1.1 Bearbeiten des Seiteninhalts “Teaser”

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

Darstellung nach erstellen Erstellen des Teasers.

Dartsellung_nach_Erstellen_Teaser.png


Darstellung nach Erstellen des Teasers mit 2 Verweisen (Links).

Darstellung_mit_Links.pngImage Added

Bezeichnung

Beschreibung

icon_reddot_openpage (1).png Teaser öffnen

Seiteninhalt zur Bearbeitung öffnen

icon_reddot_closepage (1).png Teaser schließen

Bearbeitung beenden

icon_reddot.png Überschrift

Einfügen einer Überschrift - dies ist optional.

icon_reddot_openform.png Schnellbearbeitung

Bearbeitung der Teaserinhalte
siehe dazu Abschnitt 3.1.2 Schnellbearbeitung - Inhalte des Teasers

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.png Seite für andere Projekte freigeben

Siehe dazu Kapitel 7.10 9 Projektfremde Seite verknüpfeneinbinden

icon_reddot_multilink.png Links

Verlinkung auf eine interne oder externe Seite oder Download-Link hinzufügen, sortieren oder entfernen.
Siehe dazu auch Kapitel Linkliste.

Bezeichnung

Beschreibung

icon_reddot_openpage.pngImage Added Link

Wurde bei der Auswahl der Content-Klasse ( siehe 3.1 Erstellen des Seiteninhalts “Teaser” Punkt 5) der Teaser mit Verweis (Link) erstellt, so kann hier der jeweilige Link bearbeitet werden.
Siehe dazu auch Kapitel Linkliste.

3.1.2 Schnellbearbeitung - Inhalte des Teasers

Symbol

Aktion

1icon_reddot_openpage.pngImage Removed

Boxenbereich öffnen

Boxenbereich_oeffnen.pngImage Removed2icon_reddot_multilink.pngImage Removed

Boxen

Boxen.pngImage Removed3

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

icon_reddot_multilink.pngImage Removed

Seiteninhalte_allgemein.pngImage Removed

folderopen.gifImage Removed

contentclass-snippet.gifImage Removed

Symbol

Aktion

1icon_reddot_openform.png

Schnellbearbeitung

seite_oeffnen_green.pngImage Removed2

Seiteninhalte

3AMnu_ConnectNewPage.gifImage Removed

Seite erstellen & verknüpfen

seite_erstellen_green.pngImage Removed
4

Content-Klassen Ordner “Inhalts - Templates” auswählen

Hinweis

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

Content_Klassen-Ordner.pngImage Removed5

Content-Klasse “Teaser” auswählen

  • individuelle Auswahl eines Boxenbereich mit 2 oder 4 einzelnen Boxen

Hinweis

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

Content_Klassen.pngImage Removed6

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.pngImage Removed7

Mit “OK” bestätigen

ok_green.pngImage Removed8

Darstellung nach Erstellung “Teaser”

Die Abbildung zeigt das Beispiel mit 2 Akkordeoneinträgen.

Dartsellung_nach_Erstellen_Teaser.pngImage Removed

3.2.3 Boxen sortieren

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

Symbol

Aktion

1icon_reddot_openpage.pngImage Removed

Boxenbereich öffnen

Boxenbereich_oeffnen.pngImage Removed

2icon_reddot_multilink.pngImage Removed

Boxen

Boxen.pngImage Removed3

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

3.2.4 Boxen entfernen

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

Schnellbearbeitung.pngImage Added
2

Elemente im Formular bearbeiten

  • Überschrift des Teasers

    • Einfügen der Teaser-Überschrift

  • Auswahl der Bildgröße

    • für die Größe der Darstellung des Bildes gibt es 2 Optionen (im Beispiel wird “Viertel Breite links” verwendet. Siehe auch 2. Verschiedene Darstellungsmöglichkeiten)

      • “Viertel Breite links”
        oder

      • “Halbe Breite links”

  • Bild zum Teaser (optional)

  • Teasertext

    • Einfügen eines entsprechenden Textes (Anreißertext)

  • mit “OK” bestätigen

Schnellbearbeiung_Dialog.pngImage Added
3

Darstellung nach Bearbeiten der Inhalte

Darstellung_nach_Schnellbearbeitung.pngImage Added

Panel
panelIconId1f50d
panelIcon:mag:
panelIconText🔍
bgColor#E3FCEF

4. Häufig gestellte Fragen (FAQ)

Frage

Antwort

Warum wird der Link zum Teaser nicht angezeigt?

Der Linkname und die Überschrift ist im aktuellen Styleguide identisch. Zur Verbesserung der BITV der Link ausgeblendet.