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.
  • 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

  1. Listenpunkt 1
  2. 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.
  3. 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.