Gestaltungselemente
Gestaltungsmöglichkeiten
TYPO3 bietet für Text-und-Medien-Elemente von Haus aus einige Gestaltungsmöglichkeiten.
Wir möchten Sie Ihnen nachfolgend vorstellen, damit Sie einen Überblick bekommen was mit Ihrem TYPO3-System bei der Content-Pflege alles möglich ist.
Folgende Themenbereich finden Sie auf dieser Seite:
Ü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 Text2.
Es folgt ein tiefgestellter Text2
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.
Abkürzungen
Dieser Text enthält eine Abk.. Abkürzungen sollten in Bezug auf Barrierefreiheit gekennzeichnet und erklärt werden.
Absatz-Formatierungen
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:
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.
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:
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.
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.
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.