Rows (Zeilen) und Columns (Spalten) bilden das Grundgerüst einer mit WPBakery aufgebauten Seite. Sie bestimmen, wie die einzelnen Inhalte angeordnet werden.
Das Grundprinzip lautet:
Row → Column → Inhaltselement
Eine Row enthält also eine oder mehrere Columns. Die eigentlichen Inhalte wie Texte, Bilder oder Buttons befinden sich innerhalb dieser Columns.
Rows#
Eine Row bildet einen horizontalen Bereich einer Seite. Mehrere Rows werden auf einer Seite untereinander angeordnet.
Rows können beispielsweise verwendet werden, um eine Seite in unterschiedliche Inhaltsbereiche zu gliedern:
- Einleitung
- Text mit Bild
- weiterer Inhaltsbereich
- Kontaktinformationen
Über die Einstellungen einer Row können – abhängig vom jeweiligen Seitenaufbau – unter anderem Abstände, Hintergrund und das Verhalten auf unterschiedlichen Bildschirmgrößen beeinflusst werden.
Columns#
Jede Row enthält mindestens eine Column.
Eine einzelne Column kann die gesamte verfügbare Breite einnehmen. Eine Row kann aber auch in mehrere Columns aufgeteilt werden.
Beispiele sind:
1/1 – eine Spalte über die gesamte Breite
1/2 + 1/2 – zwei gleich breite Spalten
1/3 + 2/3 – eine schmale und eine breite Spalte
1/3 + 1/3 + 1/3 – drei gleich breite Spalten
Die Spaltenaufteilung kann in WPBakery direkt bei der jeweiligen Row eingestellt werden. Allerdings ist zu beachten, dass zur Angabe einer Spaltenbreite nur die Werte 1/1, 1/2, 1/3, 1/4, 1/6 und 1/12 oder vielfaches davon (zum Beispiel: 5/12) verwendet werden dürfen. Eine Angabe wie 1/5 oder 2/11 ist unzulässig.
Spaltenaufteilungen ändern#
Die Aufteilung einer bestehenden Row kann nachträglich verändert werden. Dabei ist allerdings zu beachten, dass sich dadurch auch die verfügbare Breite der darin enthaltenen Elemente ändert.
Ein Text oder Bild, das für eine breite Column vorgesehen war, kann in einer deutlich schmaleren Column anders wirken oder mehr Platz in der Höhe benötigen.
Nach einer Änderung der Spaltenaufteilung sollte die Seite deshalb immer in der Vorschau kontrolliert werden.
Verschachtelte Inhalte#
In bestimmten Layouts können weitere Zeilen und Spalten innerhalb bestehender Strukturen verwendet werden. Dadurch lassen sich komplexere Layouts erstellen. Solche Verschachtelungen sollten nur eingesetzt werden, wenn sie tatsächlich notwendig sind. Je komplexer die Struktur einer Seite wird, desto schwieriger wird sie später zu bearbeiten und desto größer ist die Gefahr von unerwartetem Verhalten auf kleineren Bildschirmen. Bei bestehenden komplexen Bereichen empfiehlt es sich daher, deren Struktur beizubehalten und bei Bedarf einen vorhandenen Bereich zu duplizieren und anzupassen.
Abstände#
Für die Gestaltung einer Seite spielen Abstände eine wichtige Rolle. Sie sollten nach Möglichkeit über die dafür vorgesehenen Einstellungen von WPBakery festgelegt werden.
Abstände sollten nicht durch leere Textzeilen, zusätzliche Absätze oder leere Text-Elemente erzeugt werden. Solche Hilfskonstruktionen können insbesondere auf unterschiedlichen Bildschirmgrößen zu unerwünschten Ergebnissen führen.
Für Abstände sind vor allem Padding und Margin relevant.
Padding#
Padding bezeichnet den Abstand innerhalb eines Elements bzw. Containers.
Vereinfacht:
Rand des Elements → Padding → Inhalt
Hat beispielsweise eine Row einen Hintergrund und ein Padding von oben und unten, entsteht zwischen dem Rand des farbigen Hintergrundbereichs und dem darin enthaltenen Text ein Abstand. Padding vergrößert also den Raum innerhalb des jeweiligen Bereichs.
Margin#
Margin bezeichnet dagegen den Abstand außerhalb eines Elements.
Damit kann beispielsweise der Abstand zwischen zwei aufeinanderfolgenden Bereichen beeinflusst werden.
Vereinfacht:
Element → Margin → nächstes Element
Als Merkhilfe:
Padding = Abstand innen
Margin = Abstand außen
Abstände gezielt verwenden#
Padding und Margin können für oben, rechts, unten und links unterschiedlich eingestellt werden. Abstände sollten jedoch nicht ohne Grund individuell verändert werden. Eine Website wirkt einheitlicher, wenn vergleichbare Bereiche auch vergleichbare Abstände verwenden. Bei bestehenden Seiten empfiehlt es sich deshalb, sich an bereits vorhandenen Bereichen zu orientieren.
Responsive Verhalten#
Eine Seite wird nicht nur auf großen Desktop-Bildschirmen angezeigt, sondern auch auf Tablets und Smartphones.
Mehrspaltige Layouts können auf kleinen Bildschirmen nicht immer nebeneinander dargestellt werden. Columns werden daher abhängig von den jeweiligen Einstellungen und der Bildschirmbreite anders angeordnet.
Besonders bei mehrspaltigen Bereichen sollte deshalb darauf geachtet werden, in welcher Reihenfolge die Inhalte angelegt sind. Eine Anordnung, die am Desktop nebeneinander logisch erscheint, muss auch dann noch verständlich sein, wenn die Columns auf einem Smartphone untereinander dargestellt werden.
WPBakery bietet zusätzliche Einstellungen, mit denen das Verhalten auf verschiedenen Bildschirmgrößen beeinflusst werden kann. Diese werden im Abschnitt „Responsive Design“ näher beschrieben.
Nach Änderungen kontrollieren#
Änderungen an Rows, Columns, Spaltenbreiten oder Abständen können Auswirkungen auf den gesamten Seitenbereich haben. Nach solchen Änderungen sollte die Darstellung deshalb immer zumindest in der Vorschau kontrolliert werden – insbesondere bei Seiten mit mehreren Spalten oder komplexeren Layouts.