Eine Zeile hinzufügen.
Eine Zeile teilt einen Abschnitt in Spalten, sodass Sie Inhalte nebeneinander legen können: drei Leistungen, ein Foto neben seinem Text, eine Sidebar neben einem Artikel. Sie wählen die Aufteilung aus zwölf Presets und können Telefonen ein eigenes Layout geben. Lesen Sie diese Seite, um eine Zeile hinzuzufügen; für eine Zeile in einer Spalte siehe Verschachtelung.
Eine Zeile hinzufügen
Das Beispiel fügt einem Abschnitt eine Zeile mit drei Spalten hinzu, eine für jede Leistung, die ein Team anbietet.
- Klicken Sie auf + auf einem Abschnitt, um den Element-Picker zu öffnen.
- Wählen Sie Row aus dem Tab Layout. Sie kommt mit zwei gleichen Spalten.
- Klicken Sie auf das Grid-Icon (Column layout) in der Kontrollleiste der Zeile, wählen Sie ein Spalten-Preset wie drei gleiche Spalten und klicken Sie auf Save.
- Klicken Sie auf + in einer Spalte, um Inhalt hinzuzufügen.
- Klicken Sie auf Save in der Symbolleiste, um die Seite zu speichern.
Das Grid-Icon sitzt direkt hinter dem Zieh-Anfasser der Zeile. Ein Preset ändert die Spalten, sobald Sie darauf klicken; Cancel stellt das alte Layout wieder her.
Was Sie sehen
Die drei Leistungen sitzen nebeneinander, jede Spalte ein Drittel der Abschnittsbreite. Auf Bildschirmen unter 768 Pixeln stapeln sich die Spalten: Jede nimmt die volle Breite ein, in der Reihenfolge der Seite.
Spalten sind nur so hoch wie ihr Inhalt, sodass eine kurze Spalte vor ihren Nachbarn endet. Sie bemerken es, sobald Spalten eine Hintergrundfarbe bekommen; Equal-height columns gleicht sie aus.
Ihre Zeile einrichten
Spaltenlayouts
Das Grid-Icon öffnet ein Panel für jede Bildschirmgröße mit eigenem Layout. Jedes Panel zeigt diese zwölf Presets als Kacheln:
| Preset | Layout |
|---|---|
| 1/1 | Eine Spalte in voller Breite |
| 1/2 + 1/2 | Zwei gleiche Spalten |
| 1/3 + 1/3 + 1/3 | Drei gleiche Spalten |
| 1/4 + 1/4 + 1/4 + 1/4 | Vier gleiche Spalten |
| 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 | Sechs gleiche Spalten |
| 1/4 + 1/2 + 1/4 | Schmal, breit, schmal |
| 1/6 + 4/6 + 1/6 | Schmal, sehr breit, schmal |
| 1/4 + 3/4 | Viertel links, drei Viertel rechts |
| 3/4 + 1/4 | Drei Viertel links, Viertel rechts |
| 2/3 + 1/3 | Breit links, schmal rechts |
| 1/3 + 2/3 | Schmal links, breit rechts |
| 5/12 + 7/12 | Etwas schmal links, etwas breit rechts |
Für jede andere Aufteilung klicken Sie auf Custom Layout und geben Sie die Breiten als
Brüche ein, etwa 1/6 + 5/6. Breiten, die zusammen mehr als 1 ergeben, umbrechen auf
eine neue Zeile. Wenn Sie den Dialog erneut öffnen, ist Custom Layout markiert und
zeigt das Layout, etwa Custom Layout (1/6 + 5/6).
Ein Layout pro Bildschirmgröße
Das erste Panel, Medium devices (≥ 768px), setzt das Layout ab Tablets aufwärts. Um auch Telefone zu ändern, klicken Sie oben im Dialog auf Add screen size. Ein Panel für Extra small (< 576px) öffnet sich; wählen Sie bei Bedarf eine andere Größe aus dessen Liste und dann ein Preset. Remove screen size löscht ein Panel wieder.
Zeilen- und Spalteneinstellungen
Öffnen Sie More > Settings in der Kontrollleiste der Zeile, oder in der Leiste der Spalte für die Spalteneinstellung.
| Einstellung | Element | Funktion | Standard |
|---|---|---|---|
| Equal-height columns | Row | Streckt jede Spalte auf die Höhe der höchsten | Off |
| Mirror row | Row | Zeigt die Spalten ab 768 Pixeln in umgekehrter Reihenfolge; gestapelte Spalten behalten ihre Seitenreihenfolge | Off |
| Vertical centering | Column | Zentriert den Inhalt in einer Spalte, die höher ist als er | Off |
Mirror row passt zu einer Seite aus abwechselnden Zeilen: Foto links, dann Foto rechts, während Telefone immer zuerst das Foto zeigen.
Spalten verschieben und entfernen
Ziehen Sie eine Spalte an ihrem Anfasser, oder nutzen Sie More > Move Left oder Move Right in ihrer Leiste. Spalten haben kein Delete: Wählen Sie stattdessen ein Preset mit weniger Spalten. Inhalte gehen dabei nie verloren; sie wandern in die letzte verbleibende Spalte.
Wenn Sie es nicht sehen
- Vertikale Zentrierung einer Spalte ändert nichts. Die Spalte ist nur so hoch wie ihr Inhalt, also gibt es keinen Raum zum Zentrieren. Schalten Sie Equal-height columns in den Einstellungen der Zeile ein.
- Die Spalten stapeln sich auf einem Telefon. Unter 768 Pixeln ist das der Standard. Klicken Sie auf das Grid-Icon, dann auf Add screen size, und wählen Sie ein Preset für Extra small (< 576px).
- Text ist in eine andere Spalte gesprungen. Sie haben ein Preset mit weniger Spalten gewählt, und der Inhalt der entfernten Spalten ist in die letzte gewandert. Drücken Sie Strg+Z (Cmd+Z auf einem Mac), um die Änderung rückgängig zu machen.
- Eine Spalte hat kein Delete in ihrem More-Menü. Spalten werden über das Layout entfernt. Klicken Sie auf das Grid-Icon der Zeile und wählen Sie ein Preset mit weniger Spalten.
Wie geht es weiter?
- Verschachtelung: Eine Zeile in eine Spalte legen für ein feineres Grid.
- Sections: Dem Band um Ihre Spalten einen eigenen Hintergrund geben.
- Responsives Design: Wie sich Ihr Layout an jede Bildschirmgröße anpasst.