DE

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.

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:

StadtLandFluss
AmsterdamArgentinienAller
BerlinBrasilienBrahmaputra
CaracasChinaColorado

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.

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.

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.

Um im Text+Bild Element mehrere Bilder anzeigen zu lassen, müssen Sie 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 bitte mehrere Inhaltslemente.