Gestaltungsmöglichkeiten
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.
Ü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 bis zur Verfügung.
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.
Headline 01
Headline 02
Headline 03
Headline 04
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
Dieser Text ist kursiv.
Und dieser Text ist Fett.
Link
Dieser Text ist verlinkt.
Zitat
Das ist ein Text mit angwendetem Zitat-Stil.
Gelber Button Stil (verlinkbar)
Das ist ein Text mit gelben Button Stil
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
Tabellen
Tabellenkopf (Spalte 01) | Tabellenkopf (Spalte 02) |
Zeile 01 (Spalte 01) | Zeile 01 (Spalte 02) |
In text, right
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
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, 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.
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, 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
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, 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.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
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
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, 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.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
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
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, 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.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
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
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, right.
Above, left
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, left.
Below, center
Bildausrichtung
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
Bildausrichtung
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
Bildausrichtung
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.