Die Galerie vom Typ „Gitter“ kann eine maximale Breite von 1.500 Pixeln bekommen. Zusätzlich kannst du mit dem jetzt vorhandenen Papierkorb die eingestellte Breite löschen, was für die Galerie bedeutet, dass immer die max. Breite die verfügbar ist, verwendet werden soll. Hier haben wir die Galerie an erster Stelle als "Header" verwendet.

Damit ist sie gut geeignet, die neue Funktion „Volle Breite“ zu nutzen. Der Sinn der Gitter-Galerie besteht darin, beliebige Bilder in einem festen Gitter mit einem festen Abstand anzuzeigen: in Reihen und, wenn der Platz nicht reicht, weitere "Gitter" anzulegen, die man dann über Navigationspunkte erreichen kann. Daher wird diese Galerie naturgemäß niemals komplett bis an den Rand laufen. 

Bei Galerien gab es bisher zwei Optionen:

Entweder war es möglich, der Galerie eine bestimmte Breite zu geben - dann gab es dazu ein Eingabefeld und einen maximalen Wert für die Breite.

Oder die Galerie hat den größtmöglichen Platz in der Breite automatisch eingenommen, weshalb wir darauf verzichtet haben, ein Eingabefeld einzubauen.

Mit der neuen Option "Breite ausdehnen" haben wir die Galerien jetzt um eine Funktion erweitert: Alle Galerien, die keine feste Breite und damit auch kein Eingabefeld für die Breite haben, dehnen sich mit der neuen Funktion automatisch aus. 

Die Galerietypen, bei denen du eine feste Breite einstellen kannst, haben nun teilweise zusätzlich zur „Volle-Breite-Funktion“ einen Papierkorb erhalten. Der Papierkorb dient dazu, eingetragene Breiten „hineinzuwerfen“, also zu löschen.

Das bedeutet Folgendes: Hat die Galerie keinen Papierkorb, mit dem man die eingetragene Breite löschen kann, dann dehnt sich die Galerie auch mit der neuen Funktion nicht aus, sondern ist maximal so breit wie eingetragen. Hat die Galerie einen Papierkorb und du löscht damit den Wert, der im Eingabefeld „Breite“ eingetragen ist, dann bedeutet das, die Galerie dehnt sich maximal aus.

Die Dia-Show ist nur bedingt zur Ausdehnung auf „Volle Breite“ geeignet. Du kannst eine maximale Größe von 1.500 x 1.000 Pixeln einstellen. Die unter diesem Text angezeigte Diashow hat genau diese Größe. Sie wird also auf großen Bildschirmen niemals die volle Breite ausfüllen.

Auch der Slider ist nur bedingt geeignet zur Darstellung in voller Breite. Du kannst dieses Inhaltselement ebenfalls auf eine maximale Größe von 1.500 x 1.000 Pixeln einstellen.

Die unter diesem Text angezeigte Galerie vom Typ "Slider" hat genau diese Größe. Sie wird also auf großen Bildschirmen niemals die volle Breite ausfüllen.

Wir haben aus diesem Grund den neuen Slider entwickelt, der mehr Optionen bietet.

Die Galerie Karussell hat neben der festen Breite einen Papierkorb. Löschst du also den dort eingetragenen Wert, dann reagiert die Galerie, indem sie die volle Breite einnimmt. Das bedeutet allerdings, dass die beiden äußeren Bilder eventuell nur teilweise angezeigt werden, damit das Karussell auf die gesamte Bildschirmbreite ausgedehnt werden kann. Je breiter die Vorschaubilder, umso eher wird der Fall eintreten, dass kein komplettes Bild mehr am Rand des Monitors angezeigt werden kann.

Da jeder Besucher über eine andere Bildschirmauflösung verfügt, macht es auch wenig Sinn, für deinen Bildschirm jetzt genau die Werte einzutragen, die dafür sorgen, dass bei deinem Abspielgerät vollständige Bilder gezeigt werden. Am besten stellst du die Vorschaubilder so ein, dass sie dir gefallen und das ist dann o.k. so. Das System sorgt dafür, dass deine Besucher immer eine optimale Präsentation deiner Bilder zu sehen bekommen.

Wie du siehst, kann man auch eine Überschrift "ausdehnen". Dabei sollte man Folgendes beachten:

1) Die Überschrift passt sich immer der Gesamtbreite des Browsers an. Wenn der Text zu breit für den Bildschirm ist, wird eine neue Zeile erzeugt, der Text umgebrochen, wie man dazu sagt. Das ist wichtig, damit deine Seite auch auf mobilen Geräten gut aussieht. Du solltest daher tatsächlich nur dort einen manuellen Zeilenumbruch einfügen, wo es Sinn macht. Ansonsten können seltsam auslaufende Zeilen entstehen. 

2) Du kannst zwar unter "Optionen" links und rechts einen Abstand zum Rand für deine Überschrift festlegen. Das könnte auf einem normalen (großen) Bildschirm durchaus gut aussehen. Nehmen wir mal an, du setzt den Abstand links und rechts auf jeweils 200 px. So erzeugst du eine breite Überschrift oder einen breiten Text, der aber nicht bis zum Rand läuft. Wenn du deine Seite dann allerdings auf einem iPhone betrachtest, musst du dich nicht wundern, wenn der Text gar nicht oder aber nur sehr schmal in der Mitte angezeigt wird. Warum? Die von dir eingestellten Werte sind feste Größen, die auch im mobilen Modus strikt gelten. Das iPhone (oder auch jedes andere Smartphone) muss also erst einmal links und rechts jeweils 200 px freien Raum anzeigen; erst wenn dann noch Platz bleibt, wird der Text dargestellt. Also sehr wichtig: keine oder nur sehr kleine Abstände von max. 30 px links oder rechts einstellen, damit deine Seite weiterhin responsive bleibt.

Oben siehst du eine weitere Überschrift. Da wir für dieses Beispiel mehr Text brauchten, haben wir die Erklärung einfach direkt mit in die Überschrift gepackt: am besten die Seite auch mal auf einem mobilen Gerät anschauen; dann kannst du besser beurteilen, ob solch ein Text für deine Zwecke Sinn macht oder nicht.

Nachfolgend mal ein Beispiel, das eher als Blickfang dienen soll, da der Inhalt nur aus einem einzigen Wort besteht. Diesmal haben wir einen „Textabschnitt“ als Inhaltselement gewählt, weil wir in unserem Beispiel die Überschrift zusätzlich mit einer anderen Schriftfarbe versehen wollten:

Wenn du den Video-Content benutzt, dann dehnt sich dieser nicht beliebig aus. Was du allerdings gestalterisch machen kannst, zeigt das nachfolgende Beispiel: Du suchst dir ein passendes Video; dann aktivierst du die neue Funktion "Breite ausdehnen". Anschließend gibst du dem Hintergrund einfach eine eigene Farbe, wie hier zum Beispiel ein sattes Schwarz.

Das Video spielt zwar nur in der Mitte des Monitors, aber das Ganze bekommt einen interessanten Rahmen durch die bis an den Rand laufende Farbfläche.

Linien lassen sich ebenfalls relativ gut über die gesamte Breite ausdehnen und als Gestaltungselement einsetzen. Da man der Linie eine prozentuale Breite geben kann, besteht auch die Möglichkeit, Linien zwar über den Rand des Inhaltsbereichs auszudehnen, aber nicht komplett auf die volle Breite. Dazu gibt man einfach einen Wert kleiner als 100 % an.

Für die meisten anderen Inhaltselemente ist die neue Funktion „Breite ausdehnen“ aktuell nicht geeignet. Entweder, weil diese Contents bereits eine feste Breite haben und daher nicht ausgedehnt werden können. Oder sie sehen einfach nicht gut aus bei dem Versuch, sie über den gesamten Bildschirm auszudehnen.

Da du mit einem Klick die Option „Breite ausdehnen“ aktivieren bzw. wieder deaktivieren kannst, steht es dir frei, selbst auszuprobieren und zu experimentieren. Viel Spaß damit!

PS.: Und immer daran denken, dass Gestaltung davon lebt, dass man Effekte sparsam verwendet: Also lieber ein Highlight setzen als alles umzubauen.