WordPress: individuelle Layouts mit dem SiteOrigin Page Builder

WordPress braucht Erweiterungen

Ein bisschen Background

WordPress war vor einigen Jahren noch ein einfaches Blogsystem, daher waren komplexe Layouts für Seiten und Artikel nicht wirklich von Bedeutung. WordPress ist inzwischen aber das verbreiteste System für die Erstellung von privaten und geschäftlichen Websites, sogar von Online-Shops.

WordPress bietet daher standardmäßig immer nur ein Inhaltsfeld pro Seite oder Artikel, den man mit dem visuellen Editor bearbeiten kann. Darin lassen sich bekannterweise auch Medien integrieren, beispielsweise Bilder oder Videos. Ergänzend dazu können Shortcodes verwendet werden um andere Inhalte, etwa von anderen Plugins erstellte, in den Content-Bereich zu platzieren.

SiteOrgin ist DIE Erweiterung

Kostenlos aber wertvoll

SiteOrigin ist ein Page Builder Plugin, das die Funktionalität von WordPress im Bereich der Inhaltsverwaltung (extrem) erweitert. Mit dem Page Builder lassen sich im Prinzip Theme-unabhängig, soweit das Theme den Nutzer nicht schon zwangsbeglückt, beliebige Inhalte einfügen und Inhaltsstrukturen erstellen. Wichtig zu wissen ist, dass SiteOrigin eine Struktur erstellt, die sich responsive verhält - sofern die Widgets mitspielen (die Widgets aus dem Bundle sind alle responsive).

Es gibt eine Premium Erweiterung für den SiteOrigin Page Builder, mit der zusätzliche Widgets zur bestehenden Auswahl hinzugefügt werden können. Ehrlich gesagt kommt aber ohne "Premium" aber sehr gut aus.

Individuelle Struktur erstellen

Einmal installiert und aktiviert, bietet WordPress neben dem visuellen und dem Text-Editor einen Tab, "Page Builder". Im Page Builder Modus ändert sich der Editor komplett. Es kann nicht mehr direkt Text eingegeben werden, sondern man muss zuerst die Inhaltsstruktur vorgeben: dazu erstellt man Zeilen, die in Spalten aufgeteilt werden können. Zu jedem erstellten Bereich kann man ein oder mehrere Widgets einfügen - die Widgets sind dann letztendlich die tatsächlichen Inhalte.

Interessant ist auch die Möglichkeit den Page Builder selbst zu verschachteln: der Page Builder lässt sich als Widget einfügen und darin kann man eine neue Struktur erstellen.

Inhalte werden via Widgets eingefügt

Mit dem Page Builder lassen sich beliebige Widgets einfügen also auch die, die mit WordPress bereits, oder solche die von installierten Plugins zur Verfügung gestellt werden. Besonders interessant sind die Widget-Plugins, die man sich zusätzlich installieren kann, z. B. vom SiteOrigin Widgets Bundle. Wenn man Effekte mag, gibt es auch Erweiterungen für Spezialeffekte wie z. B. mit dem Plugin SO Page Builder Animate.

Inhalte über die volle Bildschirmbreite anzeigen

In der Strukturübersicht lassen sich für jede Zeile individuelle Einstellungen setzen - praktisch ist zum Beispiel eine Row ID (CSS ID für die Zeile), wenn man sich mit CSS auskennt - und somit das Seitenlayout für sein Projekt pixelgenau definieren. Eine besondere Einstellung in der Sektion "Layout" ist die Option "Gesamte Breite". Damit lässt sich die Zeile über die gesamte Bildschirmbreite strecken. Die Inhalte bleiben jedoch mit den anderen bündig (meist ist der Inhaltsbereich ein zentrierter Bereich im Browserfenster); wird die Option "Gesamte Breite gestreckt" genommen, wird auch der Inhalt über die gesamte Bildschirmbreite gestreckt - diese Option wird meist für Slider oder Headerbilder genutzt.

Etwas Fine Tuning

Die Grundstruktur einmal angelegt, die Inhalte via Widgets eingefügt, ist eigentlich alles gut. Es gibt jedoch noch Stellschrauben mit denen sich verschiedene Parameter individuell drehen lassen. Ein wichtiger Punkt wären die Breakpoints - die Breite des Browsers in Pixel zu der, die Spalten "zusammenfließen", um beispielsweise zweispaltige Inhalte mobil einspaltig anzuzeigen.

SiteOrigin im Vergleich zu anderen Page Builder

Natürlich gibt es nicht nur den Page Builder von SiteOrigin. Hier sind weitere gelistet:

  • Divi Builder, Elegant Themes (kostenpflichtig).
  • Elementor, Elementor (Freemium)
  • Virtual Composer, WP Bakery (kostenpflichtig)

Diese Page Builder gehören mit Sicherheit zu den Verbreitetsten, es gibt aber noch andere... Jeder Page Builder hat seine eigene UI, seine eigenen Funktionen, die der eine oder andere Nutzer besonders schätzt. Meines Erachtens hat aber der Page Builder von SiteOrigin einen entscheidenden Vorteil: die Inhaltselemente, die man in die selbst geschaffenen Content-Blöcken hinzufügt sind Widgets, ganz normale Widgets. Somit ist die Flexibilität besonders groß und die Erweiterbarkeit quasi unbegrenzt.

WordPress Workshop

Der WordPress-Workshop hat zum Ziel, die Einrichtung und Errichtung einer professionellen Homepage für Personen zugänglich zu machen, die keine IT-Laufbahn beschritten haben.

Neben der Schritt-für-Schritt-Anleitungen und Erklärungen der einzelnen Etappen, wird auch etwas technisches Wissen aufgebaut, um später die richtigen Denkweisen anzusetzen und ggf. neue Anforderungen selbständig umzusetzen oder Probleme selbständig zu lösen.