Kompatibilität:

WebSite X5 Pro

Bei der Erstellung einer besonders komplexen responsiven Website kann es notwendig sein, nicht nur die Reihenfolge der Inhalte oder deren Sichtbarkeit zu ändern, sondern auch deren strukturelle Anordnung in den verschiedenen Breakpoints anzupassen.


Mit WebSite X5 Pro können Sie neben der Festlegung der Objekt-Reihenfolge und der Entscheidung, welche Inhalte angezeigt oder ausgeblendet werden, auch Zeilenumbrüche verwenden, um das Layout der Seiten bei niedrigeren Auflösungen präziser zu steuern.


Was sind Zeilenumbrüche

Ein Zeilenumbruch ermöglicht es, ein oder mehrere Objekte oder ganze Objektblöcke in eine neue Zeile zu verschieben, wenn die Website auf niedrigere Breakpoints wechselt.


In der Praxis handelt es sich um einen kontrollierten „Zeilenumbruch“, mit dem Sie:

  • die Lesbarkeit verbessern;
  • zu stark komprimierte Layouts vermeiden;
  • Inhalte besser verteilen;
  • eine übersichtlichere responsive Struktur erstellen;
  • die Anordnung der Elemente weiter anpassen können.


Dieses Werkzeug ist besonders nützlich, wenn das automatische Layout nicht das gewünschte Ergebnis liefert.


So legen Sie Zeilenumbrüche fest

Um einen Zeilenumbruch einzufügen:

1. Responsive Einstellungen öffnen

  • Gehen Sie zu Schritt 4 - Seiten.
  • Öffnen Sie die gewünschte Seite.
  • Klicken Sie auf die Schaltfläche Responsive, um das Fenster Responsive Einstellungen zu öffnen.

2. Zeilenumbruch-Modus aktivieren

  • Klicken Sie auf die Schaltfläche Zeilenumbrüche.
  • Im Raster erscheinen graue gestrichelte Linien an den Stellen, an denen ein Umbruch eingefügt werden kann.

3. Umbrüche einfügen oder entfernen

  • Klicken Sie auf eine graue gestrichelte Linie, um einen Umbruch einzufügen (sie wird rot).
  • Klicken Sie erneut auf eine rote Linie, um sie zu entfernen.

4. Bestätigen

  • Klicken Sie erneut auf die Schaltfläche Zeilenumbruch, um zu speichern und den Modus zu verlassen.


Bild 1. Das Raster im Zeilenumbruch-Modus


Funktionsweise in den Breakpoints

Zeilenumbrüche verändern nicht das Layout des aktuell ausgewählten Breakpoints, sondern bestimmen, wie die Seite im unmittelbar folgenden Breakpoint neu angeordnet wird.


Das bedeutet:

  • die Reihenfolge der Objekte bleibt unverändert;
  • ausgeblendete Objekte bleiben ausgeschlossen;
  • die Anordnung wird anhand der eingefügten Umbrüche neu definiert.


Praktisches Beispiel

Um den Mechanismus besser zu verstehen, betrachten Sie das Beispielbild, in dem beim Desktop-Breakpoint Zeilenumbrüche vor Objekt 3 und nach Objekt 7 eingefügt wurden:


Bild 2. Struktur für den Desktop-Breakpoint


Beachten Sie, dass das Symbol für den Zeilenumbruch die festgelegte Reihenfolge widerspiegelt. Dadurch wird beispielsweise deutlich, dass Objekt 7 über dem Block der Objekte 8, 9 und 10 positioniert wird, da die Reihenfolge in dieser Zeile von rechts nach links verläuft.


Aufgrund der festgelegten Reihenfolge, der eingefügten Zeilenumbrüche und unter Berücksichtigung, dass Objekt 2 als nicht sichtbar definiert wurde, stellt sich die Seitenstruktur im unmittelbar auf den Desktop-Breakpoint folgenden Breakpoint wie folgt dar:


Bild 3. Struktur für den auf den Desktop-Breakpoint folgenden Breakpoint


Wie Sie sehen, ist Objekt 2, das als nicht sichtbar definiert wurde, nicht mehr vorhanden, ohne dass dies die Reihenfolge der Objekte beeinflusst, die unverändert bleibt. Der Zeilenumbruch zwingt die Objekte 3 und 4 dazu, sich in der zweiten Zeile des Rasters anzuordnen, sodass Objekt 1 die erste Zeile vollständig einnimmt. Ohne den Zeilenumbruch wären die Objekte 1, 3 und 4 weiterhin nebeneinander in der ersten Zeile angeordnet und hätten jeweils ein Drittel der verfügbaren Breite eingenommen.


Analog dazu bewirkt der zweite Zeilenumbruch, dass die Objekte 8, 9 und 10 nicht mehr Teil eines einzigen Blocks sind und sich in neuen Zeilen unterhalb von Objekt 7 anordnen.


Verwaltung der Proportionen

Wenn ein Objekt mehrere Spalten einnimmt, behält WebSite X5 automatisch dessen Breitenverhältnis auch in den nachfolgenden Breakpoints bei.


Am Beispiel der Seitenkonfiguration aus Bild 1 belegt Objekt 5 im Desktop-Breakpoint 3 von 4 verfügbaren Spalten: Das entspricht 75 % der Zeilenbreite. Dieses Verhältnis bleibt auch im folgenden Breakpoint (Bild 3) erhalten, selbst wenn die anderen horizontal ausgerichteten Objekte ihre ursprüngliche Anordnung nicht mehr beibehalten.


Dadurch bleibt das visuelle Gleichgewicht auch bei Änderungen des Layouts erhalten.


Praktische Hinweise

Für einen effektiven Einsatz von Zeilenumbrüchen:

  • verwenden Sie sie, um komplexe Layouts zu vereinfachen;
  • vermeiden Sie übermäßige Fragmentierung;
  • überprüfen Sie stets das Ergebnis in den folgenden Breakpoints;
  • berücksichtigen Sie die Kombination mit ausgeblendeten Objekten;
  • kontrollieren Sie die lokale Vorschau nach jeder Änderung.


Zusammenfassung

Zeilenumbrüche sind ein fortgeschrittenes, aber sehr nützliches Werkzeug zur Optimierung des responsiven Verhaltens von Seiten.


Mit WebSite X5 Pro können Sie auch die detailliertesten Aspekte der Inhaltsanordnung visuell steuern und so Struktur, Lesbarkeit und Kontrolle verbessern, ohne manuell in den Code eingreifen zu müssen.


Richtig eingesetzt ermöglichen Zeilenumbrüche die Erstellung übersichtlicher, professioneller und effektiver responsiver Seiten auf allen Geräten.