Layout auf Telefonen lauffähig machen.

Ihre Seiten passen sich Telefonen und Tablets von selbst an: Spalten sitzen auf breiten Bildschirmen nebeneinander und stapeln sich auf kleinen. Diese Seite zeigt, wie Sie die Kontrolle übernehmen. Sie setzen ein Spaltenlayout pro Bildschirmgröße, spiegeln die Reihenfolge auf breiten Bildschirmen und zeigen Elemente nur auf manchen Geräten. Das Beispiel macht aus einer Zeile mit vier Spalten zwei mal zwei auf Tablets.

Das Video verbirgt ein Foto auf Telefonen und verengt dann das Fenster, um es verschwinden zu lassen.

Bevor Sie beginnen

• Eine Zeile mit vier gleichen Spalten auf der Seite; siehe Zeilen und Spalten.

Layout pro Bildschirmgröße wählen

1. Zeigen Sie auf die Zeile und klicken Sie auf das Rastersymbol in ihrer Steuerungsleiste. Der Layout-Dialog öffnet sich mit einem Panel Medium devices (≥ 768px).
2. Klicken Sie auf Add screen size. Ein zweites Panel öffnet sich, eingestellt auf Extra small (< 576px).
3. Wählen Sie im Dropdown dieses Panels Small devices (≥ 576px).
4. Klicken Sie auf Custom Layout, tippen Sie 1/2 + 1/2 + 1/2 + 1/2 und klicken Sie auf Save.
5. Klicken Sie in der Symbolleiste auf Save.

Vier Halbe behalten alle vier Spalten und legen zwei pro Zeile. Die Kachel mit zwei gleichen Spalten würde die Zeile auf jeder Bildschirmgröße auf zwei Spalten stutzen.

Was Sie sehen

Auf einem Desktop sitzen die vier Spalten weiterhin in einer Zeile. Verengen Sie das Browserfenster unter 768 Pixel und sie brechen zu zweit um. Unter 576 Pixeln stapeln sie sich, eine pro Zeile, in der Reihenfolge, die Sie im Editor sehen.

Ein Layout gilt ab seiner Bildschirmgröße aufwärts, bis eine größere Bildschirmgröße ein eigenes Layout hat. Jede neue Zeile beginnt mit einem Layout für Medium devices (≥ 768px), daher stapeln sich ihre Spalten auf Telefonen und kleinen Tablets. Remove screen size in einem Panel löscht dieses Layout wieder.

Reihenfolge auf breiten Bildschirmen spiegeln

Öffnen Sie das Menü More der Zeile, wählen Sie Settings und schalten Sie Mirror row ein. Ab 768 Pixeln zeigen sich die Spalten in umgekehrter Reihenfolge; auf kleineren Bildschirmen stapeln sie sich in Editor-Reihenfolge.

Nutzen Sie es für alternierende Zeilen aus Bild und Text. Stellen Sie das Bild im Editor an erste Stelle, sodass Telefone es über dem Text zeigen, und spiegeln Sie jede zweite Zeile, sodass Desktops das Bild rechts zeigen.

Element pro Bildschirmgröße zeigen oder verbergen

1. Öffnen Sie das Menü More des Elements und wählen Sie Settings.
2. Wählen Sie unter HTML classes einen Chip aus der Gruppe Responsive Visibility, zum Beispiel Hidden on extra small devices, phones (<576px).
3. Klicken Sie auf Save.

Jeder Chip Hidden on verbirgt das Element auf nur einer Bildschirmgröße. Jeder Chip Visible on zeigt es auf dieser einen Größe und verbirgt es überall sonst.

Bildschirmgrößen

Ein Element Positioned layers hat einen eigenen Schalter Responsive, standardmäßig aus. Schalten Sie ihn ein, um Canvas-Höhe und Text mit der Fensterbreite zu skalieren, damit die Komposition ihre Proportionen behält.

Wenn Sie die Änderung nicht sehen

• Spalten stapeln sich weiterhin auf einem Tablet. Die Zeile hat kein Layout für diese Bildschirmgröße, daher stapeln sich die Spalten unter 768 Pixeln. Öffnen Sie das Rastersymbol der Zeile, klicken Sie auf Add screen size und wählen Sie Small devices (≥ 576px).
• Ein Element ist auf jeder Bildschirmgröße verschwunden. Es trägt zwei Chips Visible on, und jeder verbirgt es, wo der andere es zeigt. Behalten Sie einen, oder nutzen Sie Chips Hidden on, einen pro zu verbergender Größe.
• Mirror row tut nichts auf einem Telefon. Mirror row wirkt ab 768 Pixeln. Um die Reihenfolge auf Telefonen zu ändern, verschieben Sie stattdessen die Spalten im Editor.

Wie geht es weiter?

• Zeilen und Spalten: bauen Sie die Zeilen, die Sie hier responsiv machen.
• Seite auf Telefon oder Tablet bearbeiten: Seiten auf kleinem Bildschirm prüfen und richten.
• Abschnitt von Kante zu Kante: entscheiden, wie breit Ihr Inhalt läuft.