Kompatibilität:

WebSite X5 Pro

Wenn Sie eine responsive Website erstellen, kann es notwendig sein, nicht nur die Reihenfolge und Sichtbarkeit der Inhalte anzupassen, sondern auch die Art und Weise, wie sich die Objekte anordnen, wenn der verfügbare Platz kleiner wird.


Mit WebSite X5 Pro können Sie zusätzlich zur Festlegung der Objektreihenfolge und zur Auswahl der ein- oder auszublendenden Inhalte Zeilenumbrüche verwenden, um das Seitenlayout bei niedrigeren Auflösungen genauer zu steuern und festzulegen, wo Objekte in eine neue Zeile wechseln sollen.


Was sind Zeilenumbrüche?

Mit einem Zeilenumbruch können Sie erzwingen, dass ein oder mehrere Objekte oder ganze Objektblöcke in eine neue Zeile verschoben werden, wenn die Website zu niedrigeren Breakpoints wechselt.


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

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


Zeilenumbrüche sind besonders nützlich, wenn die automatisch berechnete Anordnung nicht das gewünschte Ergebnis liefert.


Abschnitte und Zeilenumbrüche: Was ist der Unterschied?

Abschnitte und Zeilenumbrüche können ähnlich wirken, weil beide eine Trennung in der Anordnung der Inhalte einführen, erfüllen jedoch unterschiedliche Funktionen.


Abschnitte organisieren die Struktur des Layout-Rasters. Sie ermöglichen es beispielsweise, in verschiedenen Bereichen der Seite eine unterschiedliche Anzahl oder Breite von Spalten zu verwenden.


Zeilenumbrüche dagegen gehören zu den Responsive-Einstellungen und legen fest, wo Objekte in den nachfolgenden Ansichten in eine neue Zeile wechseln sollen. Sie verändern die Grundstruktur der Seite nicht.


#tip - Weitere Informationen zu Abschnitten finden Sie unter Seitenabschnitte. Wie erstellt man Layouts mit unterschiedlichen Strukturen?


So legen Sie Zeilenumbrüche fest

So fügen Sie einen Zeilenumbruch ein:

1. Öffnen Sie die Responsive-Einstellungen

  • 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. Wählen Sie die Ausgangsansicht

Verwenden Sie die Responsive Bar, um die Ansicht auszuwählen, die Sie bearbeiten möchten.


Beachten Sie, dass die festgelegten Zeilenumbrüche die aktuell ausgewählte Ansicht nicht verändern, sondern bestimmen, wie die Objekte in der unmittelbar folgenden Ansicht angeordnet werden.

3. Aktivieren Sie den Modus Zeilenumbruch

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

4. Fügen Sie Umbrüche ein oder entfernen Sie sie

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

5. Bestätigen Sie

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

Sie können den Vorgang in den nachfolgenden Ansichten wiederholen und bei Bedarf weitere Zeilenumbrüche einfügen.


Bild 1. Das Raster im Modus Zeilenumbruch


So funktionieren Zeilenumbrüche an den verschiedenen Breakpoints

Zeilenumbrüche verändern das Layout der aktuell ausgewählten Ansicht nicht, sondern bestimmen, wie die Seite in der unmittelbar folgenden Ansicht neu angeordnet werden soll.


Wenn Sie beispielsweise einen Zeilenumbruch einfügen, während die Desktop-Ansicht ausgewählt ist, ändert sich das Desktop-Layout nicht: Der Effekt wird in der folgenden Ansicht sichtbar.


Dabei gilt:

  • Die Reihenfolge der Objekte bleibt unverändert;
  • als ausgeblendet festgelegte Objekte bleiben ausgeschlossen;
  • die Anordnung der Objekte wird anhand der eingefügten Zeilenumbrüche neu festgelegt.

Wenn Sie zu niedrigeren Auflösungen wechseln, können Sie weitere Zeilenumbrüche hinzufügen, um das Layout weiter anzupassen.


In der Smartphone-Ansicht müssen keine weiteren eingefügt werden: Die weiterhin sichtbaren Objekte werden vollständig linearisiert und entsprechend der festgelegten Reihenfolge untereinander angeordnet.

Praktisches Beispiel

Um den Mechanismus besser zu verstehen, betrachten Sie eine Seite, auf der in der Desktop-Ansicht zwei Zeilenumbrüche eingefügt wurden: einer vor Objekt 3 und einer nach Objekt 7.


Bild 2. Struktur für den Desktop-Breakpoint


Das Symbol des Zeilenumbruchs berücksichtigt die festgelegte Reihenfolge. Im Beispiel lässt sich daran erkennen, dass Objekt 7 oberhalb des Blocks aus den Objekten 8, 9 und 10 positioniert wird, weil die Reihenfolge in diesem Bereich der Seite von rechts nach links verläuft.


Unter Berücksichtigung der festgelegten Reihenfolge, der eingefügten Zeilenumbrüche und der Tatsache, dass Objekt 2 ausgeblendet wurde, nimmt die Seite in der folgenden Ansicht diese Struktur an:


Bild 3. Struktur für den Breakpoint nach dem Desktop-Breakpoint


Objekt 2 ist nicht mehr vorhanden, dies verändert jedoch nicht die Reihenfolge der anderen Objekte. 


Der Zeilenumbruch zwingt die Objekte 3 und 4 dazu, in Zeile 2 des Rasters angeordnet zu werden, sodass Objekt 1 die gesamte Zeile 1 einnehmen kann. Ohne den Zeilenumbruch wären die Objekte 1, 3 und 4 weiterhin nebeneinander in Zeile 1 angeordnet und hätten jeweils 1/3 der verfügbaren Breite eingenommen.


Entsprechend führt der zweite Zeilenumbruch dazu, dass die Objekte 8, 9 und 10 nicht mehr Teil eines einzigen Blocks sind und in neuen Zeilen unterhalb von Objekt 7 angeordnet werden.


Auf diese Weise können Sie das Layout ändern, ohne die logische Reihenfolge der Inhalte zu verändern.


So verhalten sich Zeilenumbrüche auf einer Seite mit mehreren Abschnitten

Wenn die Seite in mehrere Abschnitte unterteilt ist, verwaltet WebSite X5 das responsive Verhalten für jeden Abschnitt separat.


Zeilenumbrüche dienen daher weiterhin dazu, zu steuern, wie die Objekte eines Abschnitts in den nachfolgenden Ansichten angeordnet werden sollen.


Sie erstellen, löschen oder verändern keine Abschnitte: Sie wirken sich ausschließlich auf die responsive Anordnung der Objekte aus.


Proportionen verwalten

Wenn ein Objekt mehrere Spalten belegt, behält WebSite X5 sein Breitenverhältnis auch an den nachfolgenden Breakpoints automatisch bei.


Wenn ein Objekt beispielsweise in der Desktop-Ansicht 3 von 4 Spalten belegt, nutzt es 75 % des verfügbaren Platzes in der Zeile.


Wenn sich die Anordnung in der nächsten Ansicht ändert, behält WebSite X5 dieses Verhältnis so weit wie möglich bei, auch wenn die anderen Objekte nicht mehr auf dieselbe Weise nebeneinander angeordnet sind.


Dadurch bleibt die Anordnung der Inhalte ausgewogener, während sich das Layout an die verschiedenen Auflösungen anpasst.


Praktische Tipps

So verwenden Sie Zeilenumbrüche effektiv:

  • fügen Sie sie ein, wenn Sie genau steuern möchten, wo Objekte in eine neue Zeile wechseln sollen;
  • vermeiden Sie zusätzliche Zeilenumbrüche, wenn die automatische Anordnung bereits ein gutes Ergebnis liefert;
  • gehen Sie von der Desktop-Ansicht zu den schmaleren Ansichten über;
  • berücksichtigen Sie immer die kombinierte Wirkung von Zeilenumbrüchen und ausgeblendeten Objekten;
  • verwenden Sie Zeilenumbrüche, um die Anordnung zu vereinfachen, ohne das Layout unnötig zu zergliedern;
  • prüfen Sie das Ergebnis immer in den nachfolgenden Ansichten und in der Vorschau.


Zusammenfassung

Zeilenumbrüche sind ein fortgeschrittenes, aber sehr nützliches Werkzeug, um das responsive Verhalten von Seiten gezielt zu optimieren.


Mit WebSite X5 Pro können Sie auch detailliertere Aspekte der Inhaltsanordnung visuell verwalten und so Struktur, Lesbarkeit und Kontrolle über das Layout verbessern, ohne den Code manuell bearbeiten zu müssen.


Richtig eingesetzt ermöglichen Ihnen Zeilenumbrüche, übersichtlichere, professionellere und wirkungsvollere responsive Seiten für jedes Gerät zu erstellen.