Inhaltselemente Text
Einleitung
TYPO3 bietet zwei Inhaltselemente für Textinhalte:
- Text
- Text & Medien
Beide Elemente eignen sich für Fließtext und strukturierte Inhalte. Der Unterschied liegt in der Mediennutzung:
Während das Element Text ausschließlich für Text vorgesehen ist, ermöglicht Text & Medien die kombinierte Darstellung von Text mit Bildern oder Videos.
Das passende Element hängt vom Inhalt und dem gewünschten Layout ab:
- Text wird oft für kurze, reine Textabschnitte verwendet – zum Beispiel in der rechten Spalte oder zur Einführung auf einer Seite.
- Text & Medien kommt zum Einsatz, wenn Textinhalte durch ein oder mehrere Medien ergänzt werden sollen.
Reiter Allgemein
Im Reiter „Allgemein“ werden die grundlegenden Einstellungen für das Inhaltselement vorgenommen. Hier wird entschieden, wie der Inhalt auf der Seite erscheint und welche Überschrift genutzt wird.
Inhaltselement
- Typ
Zeigt den aktuell gewählten Inhaltstyp an (z. B. Text & Medien). Dieser kann bei Bedarf geändert werden. - Spalte
Legt fest, in welchem Bereich der Seite das Element angezeigt wird (z. B. Inhaltsbereich, rechte Spalte etc.). - Container
Wird nur angezeigt, wenn das Element in einem Container (z. B. Spaltenlayout) liegt. Es zeigt an, zu welchem Container das Inhaltselement gehört.
Überschriften
- Überschrift
Hauptüberschrift des Inhaltselements. Sie wird je nach Seitentemplate unterschiedlich dargestellt. Eine sinnvolle, sprechende Überschrift hilft Leser*innen bei der Orientierung. - Typ (H2–H4)
Legt die HTML-Ebene der Überschrift fest. Standard ist in der Regel H2.
💡 Tipp: Man kann auch verborgen auswählen, dann wird die Überschrift nicht angezeigt. - Ausrichtung
Steuert die optische Platzierung der Überschrift (z. B. linksbündig oder zentriert). Wird nicht immer benötigt. - Datum
Optionales Feld zur Anzeige eines Datums oberhalb der Überschrift. Kann z. B. für News-Beiträge genutzt werden. In der Regel nicht erforderlich. - Link
Verlinkt die Überschrift mit einer Seite oder URL. Dies kann nützlich sein, wenn das gesamte Element auf eine andere Seite verweist.
Weitere Felder
- Unterüberschrift
Zusätzlicher erklärender Text unterhalb der Hauptüberschrift. Diese wird kleiner dargestellt und kann z. B. als kurzer Teaser genutzt werden. - Text
Das eigentliche Textfeld, in dem Inhalte über den RTE (Rich Text Editor) eingegeben und formatiert werden.
Textfeld & RTE-Symbolleiste
Das Textfeld wird über den Rich Text Editor (RTE) gesteuert. Dieser Editor bietet die Möglichkeit, Inhalte zu strukturieren und übersichtlich darzustellen.
Funktionen der Symbolleiste
| Symbol | Funktion | Hinweis zur Anwendung |
|---|---|---|
| Stile | Absatz, Zitat etc. | Strukturierung über vordefinierte Formatierungen |
| B | Fett | Für wichtige Begriffe oder Hervorhebungen |
| I | Kursiv | Für Fachbegriffe oder Zitate |
| 𝑥₂ | Tiefgestellt | Z. B. chemische Formeln |
| 𝑥² | Hochgestellt | Z. B. Fußnoten oder mathematische Ausdrücke |
| (–) | Geschützter Bindestrich | Verhindert Trennung am Zeilenende |
| • : | Aufzählung / nummerierte Liste | Strukturierung von Listen |
| ▶ ◀ | Einzug erhöhen / verringern | Einrückungen in Listen |
| ❝❞ | Zitat | Für wörtliche Zitate |
| 📃 | Textausrichtung | Links, zentriert, rechts, Blocksatz |
| 🔗 | Link einfügen | Verlinkung von Texten |
| ↩ ↪ | Rückgängig / Wiederherstellen | Letzte Änderungen zurücknehmen |
| Tx | Formatierung entfernen | Entfernt alle Formatierungen im markierten Bereich |
| Ω | Sonderzeichen einfügen | Öffnet Zeichenauswahl |
| </> | Quellcode anzeigen | HTML-Quelltext direkt bearbeiten |
ℹ️ Je nach Berechtigungen oder Inhaltstyp können manche Symbole nicht sichtbar oder deaktiviert sein.
Hinweise zur Formatierung
- Formatierungen unterstützen die Lesbarkeit – sie sollten bewusst und sparsam eingesetzt werden.
- Für strukturierte Inhalte wie Überschriften, Zitate oder Listen stehen passende Formatvorlagen im Editor zur Verfügung.
- Die Formatvorlagen sind auf das Erscheinungsbild der Website abgestimmt und sorgen für eine konsistente Darstellung.
- Statt manueller Hervorhebungen (z. B. eigene Farben oder Größen) sollte auf die vorhandenen Stile zurückgegriffen werden.
- Für Listeninhalte bitte die Aufzählungs- oder Nummerierungsfunktion nutzen – keine manuellen Zeichen verwenden.
- Um die Lesbarkeit zu verbessern, empfiehlt es sich, mit Absätzen zu arbeiten und nicht mit einfachen Zeilenumbrüchen (⇧ Shift + ⏎ Enter).
💡 Tipp:
Einheitlich formatierte Inhalte wirken professionell und unterstützen die barrierefreie Darstellung – auch auf mobilen Geräten oder bei der Nutzung von Screenreadern.
Reiter Medien
Der Reiter „Medien“ erscheint nur beim Inhaltselement „Text & Medien“. Hier werden Bilder, Videos oder andere Mediendateien eingebunden und gestaltet.
⚠️ Wichtiger Hinweis zur Dateiverwaltung
Medien nicht direkt im Element hochladen.
Dateien immer zuerst in der Dateilisteablegen und anschließend über „Mediendatei hinzufügen“ auswählen.
So bleibt die Dateiverwaltung übersichtlich und es können z. B. auch Alt-Texte und Metadaten einheitlich gepflegt werden.
🔹 Medien hinzufügen
- Mediendatei hinzufügen: Öffnet die Dateiliste zur Auswahl bestehender Dateien.
- Dateien auswählen und hochladen: Sollte vermieden werden (s. Hinweis oben).
- Medien nach URL hinzufügen: Externe Videos (z. B. YouTube, Vimeo) können per Link eingebunden werden.
Zugelassene Formate sind z. B. jpg, png, mp4, pdf, svg, mp3 und viele mehr (siehe grüne Liste im Backend).
🔹 Medienanpassungen
- Breite/Höhe jedes Elements (Pixel)
Definiert feste Maße für die Anzeige. Wird das Feld leer gelassen (empfohlen), wird die Größe automatisch angepasst. - Rahmen um jedes Element
Fügt eine sichtbare Umrandung hinzu. Sollte nur verwendet werden, wenn es zur Gestaltung passt.
🔹 Galerieeinstellungen
- Position und Ausrichtung
Legt fest, wo das Bild im Verhältnis zum Text angezeigt wird – z. B. oben mittig, links, rechts, unterhalb.
👉 Die gewählte Position wirkt sich direkt auf das Layout aus. - Anzahl an Spalten
Bestimmt, wie viele Bilder nebeneinander angezeigt werden, wenn mehrere Medien eingebunden sind.
🔹 Verhalten
- Bei Klick vergrößern
Aktiviert eine Lightbox – das Bild öffnet sich beim Anklicken in einer größeren Ansicht. - Lightbox-Effekte
Auswahl des Anzeigestils für die Lightbox (z. B. mit Schließbutton).
🔹 Weitere Optionen
- Spacing
Steuert den Außenabstand des Mediums – z. B. Standardabstand oder engere Darstellung. - Copyright-Anzeige erlauben
Blendet einen Urheberrechtshinweis ein (z. B. aus den Metadaten der Datei). - RollOver-Effekt
Zeigt beim Überfahren des Bildes mit der Maus einen Effekt (abhängig vom Template).
💡 Tipp:
Bilder sollten immer mit Alternativtext versehen werden – dieser kann in der Dateiliste unter „Metadaten“ gepflegt werden.
Weitere Informationen: Bilder&Medien
Bildverknüpfung im Inhaltselement
Nach dem Hinzufügen eines Mediums im Reiter „Medien“ erscheinen weitere Optionen direkt unter dem eingefügten Bild.
🔹 Alternativer Text (Alt-Text)
- Der alternative Text beschreibt die Funktion oder den Inhalt des Bildes – wichtig für Screenreader und Barrierefreiheit.
- Er wird nicht sichtbar auf der Seite angezeigt, aber von assistiven Technologien vorgelesen.
- Dekorative Bilder sollten auch einen Alt-Text bekommen.
👉 Wenn kein „Standardwert“ gesetzt ist, sollte das Kontrollkästchen „Elementspezifischen Wert setzen“ aktiv sein.
🔹 Beschreibung (Bildunterschrift)
- Optional: Die Beschreibung wird als sichtbare Bildunterschrift ausgegeben, je nach Template.
- Inhaltlich kann sie das Bild näher erläutern oder einen Kontext bieten.
ℹ️ Hinweis zur Bildunterschrift
- Bildunterschriften bieten zusätzlichen Kontext und helfen beim Verständnis – besonders bei erklärenden, journalistischen oder dokumentarischen Inhalten.
- Sie eignen sich z. B. bei:
- Abbildungen mit informativem Charakter (z. B. Diagramme, Screenshots)
- Fotos mit erklärungsbedürftigem Inhalt
- Bildern, die Teil eines inhaltlichen Zusammenhangs sind
- Nicht notwendig sind sie bei:
- rein dekorativen Bildern (z. B. Stimmungsbilder oder Platzhalter)
Medien, die bereits im Text ausführlich beschrieben sind
💡 Tipp: Die Bildunterschrift sollte knapp formuliert und nicht einfach identisch mit dem Alt-Text sein.
🔹 Link
- Das Bild kann mit einer Seite oder einer externen URL verlinkt werden.
- Die Verlinkung gilt nur für dieses Inhaltselement – sie überschreibt ggf. globale Links aus der Dateiablage.
🔹 Titel
- Der Bildtitel ist optional. Er kann als Tooltipp erscheinen (z. B. beim Darüberfahren mit der Maus), wird aber nicht überall verwendet.
🔹 Bildbearbeitung
- Über „Editor öffnen“ kann ein Bild direkt zugeschnitten oder ein bestimmter Bereich definiert werden.
- Achtung: Diese Bearbeitung gilt nur für diese eine Verwendung des Bildes.
Reiter Erscheinungsbild
Im Reiter „Erscheinungsbild“ lassen sich Gestaltung und Abstände des Inhaltselements steuern. Diese Einstellungen beeinflussen, wie viel Platz um das Element herum sichtbar ist und welches Layout verwendet wird.
💡 Tipp: Zu viel Abstand oder zu viele Gestaltungselemente können Inhalte unübersichtlich wirken lassen. Die Standardeinstellungen reichen in den meisten Fällen aus.
🔹 Layout des Inhaltselements
- Layout
Steuert die generelle Darstellung, z. B. Bildbreite oder Position innerhalb des Contents.
(Beispiel: Bildbreite 60 % zeigt Text und Bild nebeneinander in einem bestimmten Verhältnis.) - Rahmen
Fügt dem Inhaltselement ggf. eine sichtbare Umrandung oder ein spezielles Layout hinzu (abhängig vom Template).
🔹 Abstände außen und innen
- Abstand davor / danach
Regelt den äußeren Abstand zu den benachbarten Inhaltselementen.
👉 „Zweifacher Abstand“ sorgt z. B. für extra Raum nach unten. - Innenabstand davor / danach / seitlich / innen
Steuert den Abstand innerhalb des Elements, z. B. zwischen Text und Rand.
Kann genutzt werden, um mehr „Luft“ um Inhalte zu schaffen, besonders bei farbigen Hintergründen oder Containern.
🔹 Weitere Optionen
- In Menüs zeigen
Nur relevant, wenn das Inhaltselement automatisch im Menü (z. B. als Abschnittsnavigation) erscheinen soll.
Standardmäßig deaktiviert. - Glossar: Inhalt parsen
Aktiviert oder deaktiviert die automatische Erkennung von Glossarbegriffen im Text (funktioniert nur, wenn das Glossar-Plugin verwendet wird).
🔹 Hintergrund & Containerfunktionen
- Verhält sich wie ein Container
Aktiviert Container-Funktionalität – z. B. für spezielle Layouts oder wenn innerhalb des Elements weitere Inhalte gruppiert werden sollen. - Großes Hintergrundbild
Erlaubt die Auswahl eines Hintergrundbildes, das hinter dem gesamten Inhaltselement angezeigt wird.
👉 Ideal für visuelle Highlights (z. B. Zitatboxen, Infobereiche). - Hintergrundfarbe / Textfarbe
Ermöglicht individuelle Farbgestaltung des Elements – abhängig von den Möglichkeiten des Templates.
Hinweis: Die Farben sollten mit Bedacht gewählt werden, um Kontraste und Barrierefreiheit zu gewährleisten. - Inhaltselement passt sich dem Fenster an (object-fit)
Passt das Element ggf. in Breite oder Höhe dynamisch an die Fenstergröße an – sinnvoll für bestimmte Bild- oder Layoutsituationen.
Reiter Sprache
Im Reiter „Sprache“ wird festgelegt, in welcher Sprachversion das Inhaltselement erscheint.
- Sprache auswählen
Standardmäßig steht hier Deutsch (DE).
Bei mehrsprachigen Seiten wird hier die passende Sprache ausgewählt – z. B. Englisch, Französisch etc.
💡 Hinweis:
Die Sprachzuordnung ist wichtig für die korrekte Ausgabe auf mehrsprachigen Seiten und wird häufig in Verbindung mit Sprachvarianten und Übersetzungen genutzt.
Mehr Infos auf der Seite Mehrsprachigkeit
Reiter Zugriff
Hier lassen sich Sichtbarkeit und Veröffentlichungszeitpunkte steuern.
💡 Tipp: Wenn Inhalte nur für bestimmte Zielgruppen (z. B. interne Bereiche) gedacht sind, unbedingt auch auf Seitenebene die passenden Berechtigungen setzen.
🔹 Sichtbarkeit
- Sichtbarkeit des Inhaltselements
Über den Schalter kann das Element sichtbar oder unsichtbar geschaltet werden.
🔹 Veröffentlichungszeitraum
Veröffentlichungsdatum / Ablaufdatum
Hier kann ein Zeitraum definiert werden, in dem das Inhaltselement sichtbar ist.
👉 Das ist z. B. für temporäre Hinweise oder Aktionsinhalte nützlich.
🔹 Zugriff
Zugriffsrechte
Das Element kann gezielt für bestimmte Frontend-Benutzergruppen sichtbar gemacht werden.
Auch ein Ausblenden für nicht eingeloggte Nutzer*innen ist möglich.
🔹 Admin-Schutz
Bearbeitung erfordert Admin-Rechte
Aktiviert einen Schreibschutz – das Element kann nur noch von Administrator*innen geändert werden.
Reiter Kategorien
- Hier können dem Inhaltselement eine oder mehrere Kategorien zugewiesen werden.
- Diese Zuordnung wird z. B. für Filterfunktionen, News, thematische Gruppierungen oder strukturierte Ausgaben genutzt.
ℹ️ Hinweis:
Die Auswahl an Kategorien ist abhängig von der TYPO3-Konfiguration. Falls keine benötigt werden, kann dieser Reiter ignoriert werden.
Reiter Hinweis
- Dieses Feld dient der internen Beschreibung des Inhaltselements.
- Die eingegebenen Informationen sind nur im Backend sichtbar und helfen z. B. bei der späteren Pflege oder Zusammenarbeit im Redaktionsteam.
💡 Beispiel für gute Hinweise:
„Element nicht löschen – wird auch auf Seite XY verwendet“
„Bild von Veranstaltung 2024, ggf. später ersetzen“
Den Hinweis sieht man hinterher auch am Ende des Inhaltselements in der Übersicht der Seite.