T3Doku > Webdesign > Gestaltung der Inhaltselemente

Webseiten gestalten

Neue Gestaltungsmöglichkeiten der Inhaltselemente

Im Juli 2025 haben wir einige Anpassungen am Webdesign vorgenommen und neue Gestaltungsmöglichkeiten für die Inhaltselemente hinzugefügt. Im Folgenden finden Sie einen Überblick über die Änderungen. In der Videoaufzeichnung der TYPO3-Austauschrunde vom 01.08.2025 erhalten Sie ebenfalls einen Überblick (das Video ist nur im TU-Netz verfügbar).

Anpassungen im Backend

Im Backend wurden einige Felder, die keine Funktion (mehr) haben, entfernt.
Das Feld Unterüberschrift, das einen Button generiert, wurde entsprechend umbenannt.
Zudem wurde allen Inhaltslementen in ihren Eigenschaften der Reiter Sprache hinzugefügt, um alternative Sprachversionen korrekt anlegen zu können - mehr dazu erfahren Sie in unserer Anleitung zur Mehrsprachigkeit.

Überschriften

Für viele Inhaltselemente, für die bisher keine Überschrift im Frontend angezeigt wurde, ist dies nun möglich.
Zudem kann die Überschrift auch verborgen werden oder auf die Klasse H3 umgestellt werden.
Für Inhaltselemente, deren Überschrift nicht im Frontend ausgegeben wird, wird dies nun mit einem Hinweis im Backend vermerkt.

Bilder

Es können im Inhaltselement Bilder nun zwei Bilder nebeneinander dargestellt werden, mit einer festgelegten Illustration.
Auch im Element Text+Bild können zwei Bilder nebeneinander neben dem Text stehen.
Die Einstellungen für die Bildillustration sowie für den Imageslider und das Imagegrid wurde aus dem Reiter Appearance zum Reiter Bilder verschoben.
Die Bildillustrationen wurden umbenannt.
Das System wählt automatisch eine Illustration aus, je nach Bildausrichtung. Die Illustration kann natürlich weiterhin geändert oder ausgeschaltet werden.
Im Inhaltselement Text+Bild umfließt der Text nun das Bild in der Position Bild im Text.

Erscheinungsbild: Abstände, Ausrichtung, Hintergrundfarben, Trennlinien

Im Reiter Erscheinungsbild in den Elementeigenschaften vieler Inhaltselemente finden Sie nun neue Einstellungmöglichkeiten. Sie sehen nicht in jedem Element alle Schaltflächen, sondern immer nur diejenigen, dir für das Inhaltselement sinnvoll genutzt werden können.

Rahmen: Mit den Einstellungen Indent oder Extend können Sie das Element mittiger einrücken oder weiter nach links. Kein Rahmen entfernt den Container rund um das Element - das kann z.B. im Akkordeon sinnvoll sein um einen unnötigen Weißraum zu vermeiden.
Abstand davor: Verkleinert oder vergrößert den Weißraum über dem Element.
Abstand danach: Verkleinert oder vergrößert den Weißraum unter dem Element.
Frame Options: Gibt dem Element eine Trennlinie ober- oder unterhalb. Standardmäßig ist diese grau, die Einstellung farbig stellt die Linie türkis dar.
Hintergrundfarbe: Hier können Sie dem Element eine hell- oder dunkelgraue Hintergrundfarbe geben.

Tabellen

Eine weitere Neuerung: Tabellen im Rich Text Editor haben nun die gleiche Schriftgröße wie der Fließtext.

Beispiel:

Stadt	Land	Fluss
Amsterdam	Argentinien	Aller
Berlin	Brasilien	Brahmaputra
Caracas	China	Colorado

Das Tabellen-Element richtet sich im Standard und mit wenigen Spalten nun auch am Text-Element aus. Größere Tabellen sowie die komplexe Tabelle stellen sich jedoch breiter dar, um horizontales Scrollen zu vermeiden.

Beispiel: Tabellen-Inhaltselement

Stadt	Land	Fluss
Dublin	Dänemark	Donau
Edinburgh	Ecuador	Elbe
Florenz	Finnland	Fulda

Beispiel Gestaltung

Hier sehen Sie ein Text-Element mit den folgenden Einstellungen:

Der Hintergrund ist grau.
Der Abstand nach unten wurde verkleinert.
Es wurde eine türkise Trennlinie oberhalb eingerichtet.
Die Überschrift entspricht der Klasse H2 (Standard).

Teil des Beispiels

Hier sehen Sie ein Text+Bild-Element mit den folgenden Einstellungen:

Der Hintergrund ist grau.
Der Abstand nach oben wurde verkleinert.
Es wurde eine türkise Trennlinie unterhalb eingerichtet.
Die Überschrift entspricht der Klasse H3.
Der indent, also die Ausrichtung vom linken Bildschirmrand, entspricht standardmäßig nun dem des Text-Elements.

So haben wir nun das Text-Element und das Text+Bild-Element miteinander gruppiert und vom Rest der Seite abgehoben.

Auswirkungen auf bestehende Webseiten

Bestehende Formatierungen auf Ihren Webseiten bleiben zum Großteil erhalten. Dies betrifft die Bildillustrationen, die Position von Bildern sowie Bilderslider und Grids.

Neu ist, dass das Text+Bild Element sich bezüglich seines Abstands vom linken Bildschirmrand nun am Textelement ausrichtet, wenn das Bild im Text, über oder unter dem Text positioniert wurde oder auch, wenn gar kein Bild hinterlegt wurde. Diese bestehenden Elemente rutschen nun weiter in die Mitte. Zudem umfließt der Text in der Einstellung "Bild im Text" nun das Bild.

Viele weitere Elemente können Sie über die Einstellungen in den Elementeigenschaften unter Erscheinungsbild nun ebenfalls zentrieren - dieses Update ist also ein guter Anlass, Ihre Webseiten noch einmal kritisch auf das Erscheinungsbild hin zu überprüfen und ggf. anzupassen.

Ebenso wird die Schrift in Tabellen nun in derselben Schriftgröße dargestellt wie der Fließtext.

Es kann auch vorkommen, dass nun Element-Überschriften ausgegeben werden, die vorher im Frontend nicht sichtbar waren - z.B. bei Video- oder Bilder-Elementen, deren Überschriften bisher nicht ausgegeben wurden.

Bitte überprüfen Sie Ihre Webseiten einmal, ob alles weiterhin gut aussieht, und melden Sie uns fehlerhafte Nebeneffekte des Updates an webmaster[at]tuhh.de.

Troubleshooting

Die Bilder auf meiner Webseite sehen nun riesig aus.

Sehen Bilder, die im Inhaltselement Nur Bilder hinterlegt wurden, nun außergewöhnlich groß aus, können Sie dies beheben, indem Sie in den Elementeigenschaften im Reiter Erscheinungsbild den Wert der Schaltfläche Rahmen auf Standard setzen. Wir arbeiten aber aktuell auch an einer Lösung, die den Wert automatisch wieder auf "Standard" setzt - Sie müssen also nicht zwingend aktiv werden, das Problem wird sich in den nächsten Tagen von selbst lösen.

Update: Dieser Fehler wurde in der Zwischenzeit behoben.

Meine Texte und Bilder sind nun weiter mittig als vorher.

Neu ist, dass das Text+Bild Element sich bezüglich seines Abstands vom linken Bildschirmrand nun am Textelement ausrichtet, wenn das Bild im Text, über oder unter dem Text positioniert wurde oder auch, wenn gar kein Bild hinterlegt wurde. Diese bestehenden Elemente rutschen nun weiter in die Mitte. Das wurde auch auf bestehende Inhaltselemente so ausgerollt. Die Umstellung kann zurückgenommen werden, indem Sie in den Elementeigenschaften den Wert der Schaltfläche Rahmen auf Erweitern / Extend setzen.

Die Buttons auf meiner Webseite stehen nun weiter links als der Text.

Es gibt zwei Ursachen für dieses Problem.

1) Sie haben das Element Text+ Bild mit der Ausrichtung des Bildes links, oben oder unten gewählt. In diesem Fall verhält sich der Button fehlerhaft. Wir arbeiten bereits an einer Lösung. Update: Dieser Fehler wurde in der Zwischenzeit behoben.

2) Sie haben den Button mit einem Text+Bild Element generiert, welches jedoch gar kein Bild enthält. Bitte stellen Sie das Element dann auf Text um.

Das Text+Bild Element zeigt nur noch ein Bild an, obwohl ich mehrere Bilder hinterlegt habe.

Wenn Sie im Text+Bild Element mit der Positionseinstellung Bild im Text mehrere Bilder hinterlegt haben, wird aktuell leider nur das erste Bild angezeigt. Wir arbeiten an einer Lösung. Update: Diese Problem wurde mittlerweile behoben.

Um im Text+Bild Element mehrere Bilder anzeigen zu lassen, können Sie alternativ den Wert in den Elementeigenschaften im Reiter Erscheinungsbild den Wert für die Anzahl der Spalten auf 2 setzen. Wählen Sie zudem als Position der Bilder Neben dem Text.So sieht das Ergebnis dann aus. Sollen die Bilder untereinander angezeigt werden, wählen Sie als aktuellen Workaround bitte mehrere Inhaltslemente.

Meine Webseite gibt einen 503 Fehler aus.

Bitte prüfen Sie im Backend der Seite, ob auf der Seite ein Text+Medien Inhaltselement genutzt wird. Dieses verursacht den Fehler. Bitte wandeln Sie das Element in Text+Bild um. Achtung: Sie müssen das Bild dann neu verknüpfen - prüfen Sie vor der Umwandlung des Elements, wo das Bild im Dateiupload liegt, um sich langes Suchen zu ersparen. Den Ablageort sehen Sie, wenn Sie im Text+Medien Element im Reiter Medien neben dem Bild auf das i-Symbol klicken.