Für die Gestaltung von Seiten wird auf der IMAREAL-Website WPBakery Page Builder verwendet. Mit WPBakery können Seiten aus einzelnen Bausteinen aufgebaut werden, ohne dass dafür HTML-Code geschrieben werden muss.

Der grundlegende Aufbau ist dabei immer ähnlich:

Seite → Zeile (Row) → Spalte (Column) → Element

Wer dieses Prinzip verstanden hat, kann auch komplexere Seiten relativ einfach bearbeiten.

Der Backend Editor#

WPBakery bietet einen visuellen Editor innerhalb des WordPress-Backends. Auf der IMAREAL-Website wird für die Bearbeitung der Backend Editor verwendet.

Beim Öffnen einer mit WPBakery aufgebauten Seite werden die Inhalte nicht so dargestellt, wie sie später auf der Website erscheinen. Stattdessen zeigt WPBakery die Struktur der Seite mit ihren Zeilen, Spalten und Inhaltselementen. Die tatsächliche Darstellung sollte daher über die Vorschau bzw. im Frontend kontrolliert werden.

Aufbau einer Seite#

Eine WPBakery-Seite besteht aus drei grundlegenden Bausteinen:

• Rows (Zeilen)
  Eine Row bildet einen horizontalen Bereich der Seite. Eine Seite kann aus beliebig vielen aufeinanderfolgenden Rows bestehen.
• Columns (Spalten)
  Jede Row enthält mindestens eine Column. Eine Row kann beispielsweise eine einzelne Spalte über die gesamte Breite oder mehrere nebeneinanderliegende Spalten enthalten.
• Elemente
  Innerhalb der Columns befinden sich die eigentlichen Inhalte. Das können beispielsweise Texte, Bilder, Buttons oder Accordions sein.

Vereinfacht kann eine Seite beispielsweise so aufgebaut sein:

Row
→ Column
→ Text Block
→ Single Image

Row
→ Column 1
→ Text Block
→ Column 2
→ Single Image

Rows und Columns bestimmen also den Aufbau, während die darin enthaltenen Elemente den eigentlichen Inhalt bereitstellen.

Elemente hinzufügen#

Neue Inhalte werden innerhalb einer Column über „+“ bzw. „Element hinzufügen“ eingefügt. WPBakery zeigt anschließend die verfügbaren Elemente an. Nach Auswahl des gewünschten Elements öffnet sich dessen Einstellungsfenster. Dort wird der Inhalt eingetragen und das Element anschließend gespeichert.

Welche WPBakery-Elemente auf der IMAREAL-Website regelmäßig verwendet werden, wird in einem eigenen Abschnitt dieser Dokumentation beschrieben.

Elemente bearbeiten#

Bestehende Elemente können über das entsprechende Bearbeiten-Symbol geöffnet werden.

Das Einstellungsfenster enthält je nach Element unterschiedliche Optionen. Bei einem Text Block kann beispielsweise der Text bearbeitet werden, während bei einem Bild-Element ein Bild ausgewählt und dessen Darstellung eingestellt wird. Nach der Bearbeitung muss das Einstellungsfenster gespeichert werden.

Wichtig: Damit Änderungen tatsächlich auf der Website übernommen werden, muss anschließend auch die gesamte Seite aktualisiert werden.

Elemente verschieben#

Rows, Columns und einzelne Elemente können innerhalb von WPBakery per Drag & Drop verschoben werden.

Dadurch lassen sich beispielsweise:

• Elemente innerhalb einer Spalte neu anordnen,
• Elemente in eine andere Spalte verschieben,
• Rows auf der Seite umsortieren.

Nach größeren Änderungen sollte die Seite über die Vorschau kontrolliert werden. Besonders das Verschieben zwischen unterschiedlich aufgebauten Columns kann Auswirkungen auf die Darstellung haben.

Elemente kopieren und duplizieren#

Bestehende Elemente können dupliziert werden. Dadurch entsteht eine Kopie einschließlich der vorhandenen Einstellungen und Inhalte. Das ist häufig der einfachste Weg, einen neuen Inhalt anzulegen, der genauso gestaltet sein soll wie ein bereits vorhandener.

Statt ein Element komplett neu aufzubauen, kann eine bestehende Variante dupliziert und anschließend nur deren Inhalt geändert werden. Dieses Prinzip ist besonders hilfreich, um eine einheitliche Gestaltung innerhalb der Website beizubehalten. Das Kopieren bestehender Elemente ist insbesondere ratsamt, da Einstellungen eines Elements nicht nur in Form verständlicher Eingabefelder konfiguriert werden kann, sondern im Zuge der Grundgestaltung auch spezifische Gestaltungen in Form von sog. CSS Classes eingeführt wurden, die beim Kopieren (nicht jedoch beim neu anlegen) automatisch übernommen werden.

Elemente löschen#

Nicht mehr benötigte Rows, Columns oder Elemente können über die jeweilige Löschen-Funktion entfernt werden. Dabei ist darauf zu achten, auf welcher Ebene gelöscht wird:

Wird ein einzelnes Element gelöscht, betrifft dies nur dieses Element. Wird dagegen eine Row gelöscht, werden auch alle darin enthaltenen Columns und Elemente entfernt. Vor dem Löschen umfangreicher Bereiche sollte daher kontrolliert werden, welche Inhalte darin enthalten sind.

Grundregel für die Bearbeitung#

Bei bestehenden Seiten empfiehlt es sich, die vorhandene Struktur möglichst weiterzuverwenden.

Wenn ein neuer Bereich ähnlich aussehen soll wie ein bestehender, ist Duplizieren und anschließendes Anpassen häufig sicherer und schneller als ein vollständiger Neuaufbau.

Nach Änderungen sollte die Seite immer in der Vorschau bzw. im Frontend kontrolliert und erst anschließend endgültig aktualisiert werden.