Ihr Layout für Telefone optimieren.

Ihre Seiten passen sich von allein an Telefone und Tablets an: Spalten sitzen auf breiten Bildschirmen nebeneinander und stapeln sich auf kleinen. Diese Seite zeigt Ihnen, wie Sie die Kontrolle übernehmen. Sie legen ein Spaltenlayout pro Bildschirmgröße fest, 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 verkleinert dann das Fenster, um zu zeigen, wie es verschwindet.

Bevor Sie beginnen

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

Ein Layout pro Bildschirmgröße wählen

1. Fahren Sie über die Zeile und klicken Sie auf das Grid-Icon in ihrer Kontrollleiste. Der Layoutdialog ö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, geben Sie 1/2 + 1/2 + 1/2 + 1/2 ein und klicken Sie auf Save.
5. Klicken Sie auf Save in der Symbolleiste.

Vier Hälften behalten alle vier Spalten und legen je zwei auf eine Zeile. Die Kachel mit zwei gleichen Spalten würde die Zeile auf jeder Bildschirmgröße auf zwei Spalten reduzieren.

Was Sie sehen

Auf einem Desktop sitzen die vier Spalten weiter in einer Zeile. Verkleinern Sie das Browserfenster unter 768 Pixel, und sie umbrechen zwei mal zwei. Unter 576 Pixeln stapeln sie sich, eine pro Zeile, in der Reihenfolge des Editors.

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

Die Reihenfolge auf breiten Bildschirmen spiegeln

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

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

Ein Element pro Bildschirmgröße zeigen oder verbergen

1. Öffnen Sie das More-Menü 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 genau dieser 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, sodass die Komposition ihre Proportionen behält.

Wenn Sie die Änderung nicht sehen

• Spalten stapeln sich weiter auf einem Tablet. Die Zeile hat kein Layout für diese Bildschirmgröße, sodass sich die Spalten unter 768 Pixeln stapeln. Öffnen Sie das Grid-Icon der Zeile, klicken Sie auf Add screen size und wählen Sie Small devices (≥ 576px).
• Ein Element verschwand auf jeder Bildschirmgröße. 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 aufwärts. Um die Reihenfolge auf Telefonen zu ändern, verschieben Sie stattdessen die Spalten im Editor.

Wie geht es weiter?

• Zeilen und Spalten: Die Zeilen bauen, die Sie hier responsiv machen.
• Eine Seite auf Smartphone oder Tablet bearbeiten: Seiten auf kleinem Bildschirm prüfen und richten.
• Einen Abschnitt in voller Breite anzeigen: Entscheiden, wie breit Ihr Inhalt ist.