check-circle Created with Sketch.

Das Modul befindet sich noch in der Bearbeitung, kann aber bereits auf Ihren Auftritten zum Einsatz kommen.

Grafik mit modularen Formen
Grafik zeigt Nutzerinnen und Nutzer von Laptop und Handy.

035 Dynamische Ebenen – Variante B

Feststehender Vordergrund vor beweglichem Hintergrund

Was sind die Dynamischen Ebenen und wofür können Sie verwendet werden?

Die Dynamischen Ebenen machen es möglich, dass Bild- und Textmaterial nicht nebeneinander, sondern voreinander positioniert werden können. Darüber hinaus ist es ein dynamisches Modul: Nutzerinnen und Nutzer lösen per Scrollen eine Bewegung innerhalb des Moduls aus.

Dynamische Ebenen Variante B

In Variante B ist der Hintergrund beweglich. Nutzerinnen und Nutzer Ihres Auftrittes bewegen Bilder per Scrollen, während ein Text im Vordergrund feststeht.

Wie wende ich das Modul an?

Sie können das Modul verwenden, um zu einem Text mehrer Abbildungen zu zeigen. Sollen z. B. mehrere Gemälde Claude Monets und dem Motiv der Seerosen zu einem Text gezeigt werden, kann mit diesem Modul eine größere Auswahl an Bildmaterial zu einem Text ausgewählt und atmosphärisch wirksam präsentiert werden. 

Wie lege ich das Modul an?

Die Dynamischen Ebenen (Variante B) sind ein sogenanntes Rahmenmodul. In der ersten Eingabemaske wählen Sie die Einstellungen für Ihren Text im Vordergrund.

Im zweiten Schritt wählen folgendes:

Ebene B Bild

Pro Ebene B Bild wählen Sie ein Bild, das im Hintergrund Ihres Textes liege soll. Es ist Ihnen überlassen, wie viele Bilder Sie verwenden möchten.

Text mit Titel zum Ausklappen

Sie können ein Text-mit-Titel-Modul anlegen. Dieser Text lässt sich dann von Nutzerinnen und Nutzern auf- und wiederzuklappen.

035 Dynamische Ebenen – Variante B (Rahmenmodul)

Text

Der Text ist auf 300 Zeichen begrenzt. Dieser steht im Vordergrund fest, während sich die Bilder im Hintergrund durch Scrollen bewegen lassen. Sollten Sie noch mehr Text zu den Hintergrundbildern angeben wollen, fügen Sie dem Rahmenmodul ein "Text mit Titel"-Modul hinzu. Der Zusatztext lässt sich später von Nutzerinnen und Nutzern auf- und wieder zuklappen.

Hinweis: Für eine optimale mobile Darstellung beschränken Sie sich auf 150 Zeichen.

Layout des Overlays

Aus Barrierefreiheitsgründen liegt der Text nicht direkt auf dem Bild. Er ist mit einer Texthinterlegung versehen, deren Farbigkeit in jedem Fall den Kontrast zur Schrift wahrt. Sie können wählen, ob die Hinterlegung "vollfächig" oder im "zeilenweisen Flattersatz" dargestellt wird. Diese Einstellung können Sie pro Textabschnitt separat wählen.

Wichtig: Wenn Sie hier "zeilenweiser Flattersatz" ausgewählt haben, dann können keine zusätzlichen Inhalte angezeigt werden. Auch wenn Sie ein "Text mit Titel" anlegen, wird dieses nicht angezeigt. Hierzu müssen Sie die Einstellung auf "vollflächig anzeigen" ändern.

Farbe des Overlays

Sie können die Farbe der Texthinterlegung aus den gewohnten Farben – primär, blass, invers und info – auswählen.

Farbstärke des Overlays

Sie können entscheiden, ob die Texthinterlegung in voller Farbigkeit oder mit leichter Transparenz dargestellt werden soll.

Hinweis: Es kann hier je nach Browser zu Abweichungen in der Darstellung kommen. Verwenden Nutzerinnen und Nutzer zum Beispiel den Firefox-Browser kann keine Transparenz dargestellt werden. In diesem Fall wäre die Farbstärke in "voller Farbigkeit".

Position des Overlays

Diese Einstellung betrifft den Text, den Sie über die Untermodule hinzufügen können. Entscheiden Sie sich, ob der Text links, rechts oder zentriert auf dem Bildschirm erscheinen soll.

Hinweis: Diese Einstellung hat keinerlei Auswirkungen auf die mobile Darstellung, hier steht der Text immer zentriert.

Abstand nach unten deaktivieren

Wenn Sie ein Häkchen setzten ist der Abstand nach unten zum nächsten Modul deaktiviert.

035E Ebene B Bild (Untermodul)

Um ein Bild im Hintergrund anzulegen, fügen Sie dem Rahmenmodul das Untermodul "Ebene B Bild" hinzu.

Erst mit mindestens einem angehängten Untermodul wird das Modul korrekt dargestellt.

Bild

Wählen Sie eine Bilddatei aus und laden Sie sie über die Medienbibliothek hoch.

Alternativer Bildtext

Aus Barrierefreiheitsgründen muss ein Alternativer Bildtext angegeben werden. Dieser sollte leicht verständlich erklären, was auf den Bild zu sehen ist. Hier finden Sie mehr Informationen zur Formulierung von guten Alternativtexten.

Bildformat

Sie können das Format des Hintergrundbildes entweder so zeigen, dass es den gesamten Bildschirm ausfüllt (vollflächig ausfüllen) oder einstellen, dass die Originalproportionen Ihres Bildes beibehalten werden (Proportionen beibehalten). Bei der Auswahl "vollflächig ausfüllen" wird das Bild gegebenfalls vom Modul beschnitten.

Hinweis: Bitte beachten Sie, dass die Einstellung auch Auswirkungen auf die mobile Darstellung haben. Prüfen Sie Ihren Auftritt und die Einstellungen vor Veröffentlichung auch auf kleinen Endgeräten.

Bildgröße

Sie haben die Möglichkeit ihr Bild bildschirmbreit anzulegen oder mit einem Farbrahmen. Dieser Farbrahmen hat den Farbton, den Sie im Modulhintergrund auswählen.

Modulhintergrund

Sie können einen Modulhintergrund auswählen. Sie können aus den Farben: primär, blass, invers und info wählen. Ist ein transparenter Modulhintergrund ausgewählt, dann wird die am Designschemagenerator ausgewählte Hintergrundgestaltung (Muster oder Farbe) sichtbar.

Hinweis: In jedem Fall, ist ein Modulhintergrund nur sichtbar, wenn Ihr Bild nicht bildschirmfüllend dargestellt wird.

020 Text mit Titel

Wenn Sie Ihrem Kurztext einen aufklappbaren Zusatztext beifügen möchten, dann fügen Sie dem Rahmenmodul ein Text mit Titel-Modul hinzu. Die zusätzlichen Inhalte können Nutzerinnen und Nutzer per Klick aufklappen. Hier ist es auch möglich, die jeweiligen Untermodule zum 020 Text mit Titel anzulegen wie z. B. eine Zwischenüberschrift oder ein Bild.

Hinweis: Wenn Sie bei "Layout des Overlays" "zeilenweiser Flattersatz" ausgewählt haben, dann können keine zusätzlichen Inhalte angezeigt werden. Auch wenn Sie ein "Text mit Titel" anlegen, wird dieses nicht angezeigt. Hierzu müssen Sie die Einstellung in "vollflächig anzeigen" ändern.

Hinweis: Es ist aktuell nicht möglich das "Text-mit-Titel"-Modul aus den Dynamischen Ebenen im Modul "Seiteninhalt" anzuzeigen.

Beispiele aus der Praxis

Unter den zwei Links finden Sie einmal einen Artikel aus "Menschen und Geschichten", die mit den Dynamischen Ebenen umgesetzt sind und zum anderen Einzelbeispiele zu den zwei Modulen und ihren Einsatzmöglichkeiten.

Redaktionelle Tipps

1) Internet Explorer

Wenn Nutzerinnen und Nutzer den veralteten Internet Explorer nutzen, kann es zu einer fehlerhaften Darstellung kommen. Dieser Browser kann nicht alle Einstellungen darstellen. Sollten hier Meldungen kommen, empfehlen Sie die Nutzung der Internetbrowser Firefox oder Edge.

2) Einstellung "bildschirmfüllend"

Beispiel einer Seite in Desktop- und mobiler Ansicht

Wenn Sie unter Bild Layout "bildschirmfüllend" auswählen, dann füllt das Bild in der Desktop- und der mobilen Ansicht jeweils den gesammten Bildschirm aus. Sie sollten jedoch beachten, dass das Bild automatisch für die mobile Ansicht beschnitten werden muss, handelt es sich um ein Querformat. Prüfen Sie daher genau, welches Bild Sie in den Hintergrund legen und ob auch der Ausschnitt in der mobilen Ansicht passend ist.

Wie die Beispielbilder zeigen, wird die Bildmitte als Fokuspunkt in der mobilen Ansicht gewählt.