Introtext: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr
d diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Überschriften

Überschriften strukturieren Text und gliedern den Inhalt einer Seite. Für sehende Besucher sind Überschriften meist klar erkennbar.
Nutzer von Hilfsmitteln wie einem Screenreader können solche optischen Merkmale jedoch nicht wahrnehmen und brauchen "logische", im Quelltext der Seite festgehaltene Auszeichnungen.

Zur logischen Auszeichnung von Überschriften stehen die Elemente <h1> bis <h6> zur Verfügung.

Diese Abstufung ist als Untergliederung zu verstehen, das <h1>-Element entspricht der obersten Ebene.
Suchmaschinen beziehen diese Strukturierung in ihre Bewertung mit ein - je höher die Ebene, desto wichtiger der Inhalt.

Wichtig ist, dass Überschriften entsprechend ihrer Ordnung abgestuft werden.

Überschriften erster Ordnung dienen der Angabe einer Hauptüberschrift, mit Überschriften zweiter Ordnung können Kapitel ausgezeichnet werden und Überschriften dritter Ordnung können Unterkapitel kennzeichnen.
Eine Überschrift der dritten Ordnung sollte also niemals auf eine Überschrift der ersten Ordnung folgen.

Überschrift H1

Überschrift H2

Überschrift H3

Überschrift H4

Überschrift H5

Überschrift H6

Editor-Funktionen

Ein Rich Text Editor ermöglicht es Text beim Einpflegen im Backend zu formatieren – also „rich“ zu machen. So können Teile des Textes z.B. fett hervorgehoben werden, Links gesetzt oder Tabellen erstellt werden.

Nachfolgend zeigen wir Ihnen einige Gestaltungsmöglichkeiten, wie Sie Ihren Text mit dem Editor formatieren und aufbauen können.

Text-Ausrichtungen

Linksbündig:
Dieser Text wurde im RTE (Rich-Text-Editor) linksbündig gestellt. Das Icon im Editor zeigt wie in allen Editor die Ausrichtung des Textes an.

Zentriert:
Dieser Text wurde im RTE (Rich-Text-Editor) zentriert gestellt. Das Icon im Editor zeigt wie in allen Editor die Ausrichtung des Textes an.

Rechtsbündig:
Dieser Text wurde im RTE (Rich-Text-Editor) rechtsbündig gestellt. Das Icon im Editor zeigt wie in allen Editor die Ausrichtung des Textes an.

Text-Formatierungen

Hochgestellt, Tiefgestellt
Es folgt ein hochgestellter Text².
Es folgt ein tiefgestellter Text₂

Fett, Kursiv, Klein
Dieser Text ist kursiv.
Und dieser Text ist Fett.
Hier ist nur ein einzelnes Wort klein.

Farbig
Farbiger Text (Grün) sit amet, Farbiger Text (Rot) elitr, sed voluptua.

Link
Dieser Text ist verlinkt.

www.youtube.de

Abkürzungen
Dieser Text enthält eine Abk.. Abkürzungen sollten in Bezug auf Barrierefreiheit gekennzeichnet und erklärt werden.

Absatz-Formatierungen

Absatz groß:
Dies ist ein Text-Absatz in einer großen Schriftgröße.

Absatz klein:
Dies ist ein Text-Absatz in einer kleinen Schriftgröße.

Listen

Ordered List

Listenpunkt 1
Listenpunkt 2 mit Blindtext. Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.
Listenpunkt 3 mit Blindtext. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben.

Unordered List

Listenpunkt
Listenpunkt mit Blindtext. Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.
Listenpunkt

Unordered List - Listenstil Check

Listenpunkt
Listenpunkt mit Blindtext. Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.
Listenpunkt

Unordered List - Listenstil: Keine Listenpunkte

Listenpunkt
Listenpunkt mit Blindtext. Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.
Listenpunkt

Tabellen

Tabelle mit Border

Tabellenkopf (Spalte 1)	---	Tabellenkopf (Spalte 2)
Zeile 1		Zeile 2

Stil: Striped Table

Text 1	Text 2	Text 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt	At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est	justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est

Bild-Text-Ausrichtungen

In Text, right (with Link)

Bildausrichtung

In den Medieneinstellung eines Text & Media Elementes können Sie die Ausrichtung von Bild und Text Positionen bestimmen.
Dazu wählen Sie im Reiter Media unter dem Punkt Gallery Settings die gewünschte Aurichtung aus. Dieses Beispiel zeigt Ihnen die Ausrichtung In Text, right.

Rahmen um Bilder

In den Medieneinstellung können neben der Ausrichtung noch weitere Einstellungen getroffen werden. Sie können beispielsweise angeben, ob alle Bilder dieses Contentelementes einen Rahmen bekommen sollen. Vor allem bei Bildern und Videos, die einen hellen Hintegrund haben ist dies hilfreich, um das Media-Element besser vom Text abgrenzen zu können.

Verlinkung von Bildern

Desweiteren haben Sie die Möglichkeit Bildmaterial zu verlinken. Setzen Sie dafür in den Bildeinstellungen im Feld Link einen Link oder verknüpfen Sie über den Linkhandler Inhalte oder Seiten.

Bildunterschriften und copyright-Hinweis

Bilder können und sollten mit Metadaten angereichert werden. Dies kann an der Bildreferenz erfolgen oder in der Dateiliste beim Bild-Upload.
Metadaten, die in der Dateiliste hinzugefügt werden, gelten für alle Bildreferenzen. Dies ist besondern für den copyright hilfreich, weil dieser an einer Stelle zentral gepflegt werden kann. An den jeweiligen Bildreferenzen können die Default-Werte der Metadaten überschrieben werden.

In Text, right (with lightbox)

Bildausrichtung

Sie können die Ausrichtung von Bild und Text Positionen in den Medieneinstellung eines jeden Text & Media Elementes bestimmen.
Dazu wählen Sie im Reiter Media unter dem Punkt Gallery Settings die gewünschte Aurichtung aus. Dieses Beispiel zeigt Ihnen die Ausrichtung In Text, right.

Bild vergrößert in Lightbox anzeigen

Sollten Sie das Bildmaterial nur in einer kleinen Darstellung zeigen wollen, können Sie dem Nutzer dennoch die Möglichkeit geben sich das Bild in einem großen Ausschnitt anzeigen zu lassen. Wählen Sie dazu im Reiter Media das Verhalten "Enlarge on Click" aus. Dadurch wird sich das Bild, bei Klick in einer Lightbox öffnen. Für den Nutzer wird dies durch ein Icon unter dem Bild auch im Frontend sichtbar. Die Bildunterschrift und der copyright-Hinweis werden mit in die Lightbox übertragen und sind dort ebenfalls sichtbar für den User.

Um die Textausrichtung zu veranschaulichen folgt nun ein Platzhaltertext:

In Text, right (cropped)

Bildausrichtung

Sie möchten die Ausrichtung von Bild und Text Positionen bestimmen? Dazu wählen Sie im Reiter Media unter dem Punkt Gallery Settings die gewünschte Aurichtung aus. Dieses Beispiel zeigt Ihnen die Ausrichtung In Text, right.

Bild-Beschneidung

Möchten Sie nur einen bestimmten Bildausschnitt zeigen oder hervorheben. So können Sie in den Bildeinstellungen das Bild im Bild-Editor beschneiden, so dass für den User nur den bestimmten Bildausschnitt im Frontend sieht. Zusätzlich können Sie auch die Einstellung "Bei Klick vergrößern" verwenden. So kann das Bild dem User noch einmal größer in einr Lightbox angezeigt werden. Dies bietet sich vor allem für Bilder an, die Text beinhalten, wie Grafiken oder Diagramme.

In Text, right (video)

Videos einbinden

Selbstverständlich funktioniert die Ausrichtung von Text & Medien-Inhalten nicht nur mit Bildern. Sie können neben Bildmaterial auch Videomaterial für den User darstellen.

Dazu wählen Sie beim Upload oder aus der Filelist einfach das gewünschte Video aus. Dieses kann wie Bildmaterial in den gewünschten Bild-Text Ausrichtungen positioniert werden. Dieses Beispiel zeigt. Das Video in der Ausrichtung In Text, right.

Auch bei der Videoeinbindung empfehlen wir das Video zuerst über die Dateiliste hochzuladen. Nur so können die Metadaten mit Default-Werten versehen und der Speicherort für das Video ausgewählt werden.

Auch alle weitere Funktionen wie die Angabe von Metadaten, Rahmen und Größe sind bei der Videoeinbindung vorhanden.

Wenn Sie das Video im autoplay starten möchten ist dies natürlich möglich. Das Video startet auch erst, wenn es in den viewport kommt.

Bitte beachten Sie, dass Videos von externen Anbietern aus Datenschutzgründen vom User erst bestätigt werden müssen, damit sie angezeigt werden können. Dies gilt für vimeo-Video, für youtube-Videos genauso wie für youtube-iframes. Siehe hierzu auch unsere Beispiele zum external Content.

In Text, left

Bildausrichtung

In den Medieneinstellung eines Text & Media Elementes können Sie die Ausrichtung von Bild und Text Positionen bestimmen. Dazu wählen Sie im Reiter Media unter dem Punkt Gallery Settings die gewünschte Aurichtung aus. Dieses Beispiel zeigt Ihnen die Ausrichtung In Text, left.

Um die Textausrichtung zu veranschaulichen folgt nun ein Platzhaltertext:

Ein kleines Bächlein namens Duden fließt durch ihren Ort
und versorgt sie mit den nötigen Regelialien.
Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.

Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.

Beside Text, right

Bildausrichtung

In diesem Beispiel sehen Sie die Ausrichtung Beside Text, right. Dabei wird das Bild rechts neben dem Text positioniert. Sie wählen dazu im Reiter Media unter dem Punkt Gallery Settings die gewünschte Aurichtung aus.

Um die Textausrichtung zu veranschaulichen folgt nun ein Platzhaltertext:

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.

Beside Text, left (cropped)

Bildausrichtung

In diesem Beispiel sehen Sie die Ausrichtung Beside Text, left. Dabei wird das Bild links neben dem Text positioniert. Sie wählen dazu im Reiter Media unter dem Punkt Gallery Settings die gewünschte Aurichtung aus.

Um die Textausrichtung zu veranschaulichen folgt nun ein Platzhaltertext:

Above, center

Bildausrichtung

Sie können die Ausrichtung von Bild und Text Positionen in den Medieneinstellung eines jeden Text & Media Elementes bestimmen. Dazu wählen Sie im Reiter Media unter dem Punkt Gallery Settings die gewünschte Aurichtung aus. Dieses Beispiel zeigt Ihnen die Ausrichtung Above, center.

Above, right

Sie können die Ausrichtung von Bild und Text Positionen in den Medieneinstellung eines jeden Text & Media Elementes bestimmen. Dazu wählen Sie im Reiter Media unter dem Punkt Gallery Settings die gewünschte Aurichtung aus. Dieses Beispiel zeigt Ihnen die Ausrichtung Above, right.

Above, left

Sie können die Ausrichtung von Bild und Text Positionen in den Medieneinstellung eines jeden Text & Media Elementes bestimmen. Dazu wählen Sie im Reiter Media unter dem Punkt Gallery Settings die gewünschte Aurichtung aus. Dieses Beispiel zeigt Ihnen die Ausrichtung Above, left.

Below, center

Nun drehen wir das ganze einmal um. In diesem Beispiel sehen Sie die Ausrichtung Below, center. Wie bereits in den anderen Beispielen können Sie diese Ausrichtung ebenfalls unt dem Reiter Media einstellen und ändern.

Below, right

Sie können nicht nur die Ausrichtung below, center wählen. In diesem Beispiel sehen Sie die Ausrichtung Below, right. Das Bild steht nun rechts unter dem Text. Auch hier gilt die Einstellungen im Reiter Media vorzunehmen umd diese Ausrichtung darzustellen.

Below, left

Das letzte Beispiel der Ausrichtungen von Bild und Textelementen zeigt Below, left. Wie bereits in den weiteren Beispielen erlernt, finden Sie die Einstellungen in dem Reiter Media.