Responsive Layouts mit dem WordPress Plugin Page Builder

WordPress - Page Builder - Live Editor

Solange du einfache Layouts benutzt, sind Standard Content Management Systeme eine gute und nützliche Sache. Bei individuellen Layout Wünschen, wie beispielsweise einem Artikel, der aus mehreren Elementen wie Textteilen, Fotos und vielleicht einer Zeile mit drei Spalten besteht, wird die schnelle Umsetzung schon schwieriger. Erschwerend kommt hinzu, dass der Artikel natürlich responsiv sein sollte um auf einem mobilen Gerät gut dargestellt zu werden. Das Sahnehäubchen wäre noch, dass Autorinnen und Autoren bei besagtem Artikel das Layout selbst erledigen können.

Ein Beispiel für ein WordPress Plugin, dass genau das versucht, ist der Page Builder von SiteOrigin.

WordPress - Page Builder by SiteOrigin
WordPress – Page Builder by SiteOrigin

Als sinnvolle Ergänzung zum Haupt Plugin gibt es das SiteOrigin Widgets Bundle Plugin, das einen Editor und vordefinierte Widgets enthält, beispielsweise für Google Maps, selbst gehostete Videos, Slider und vieles andere mehr.

Wordpress - SiteOrigin Widgets Bundle
WordPress – SiteOrigin Widgets Bundle

Beitrags Layout verändern

Wenn du einen neuen Beitrag erstellst, musst du eine Überschrift und einen Text erstellen. Das Textfenster besteht normalerweise aus dem Visuell Tab mit einem WYSIWYG Editor und dem Text Tab. Nach der Installation des Page Builder Plugins erscheint ein zusätzliches Tab mit dem Namen Page Builder.

WordPress - Neuer Beitrag
WordPress – Neuer Beitrag

Das Page Builder Tab

Beim ersten Aufruf des Page Builder Tabs werden die verschiedenen Optionen angezeigt. Du kannst ein Widget, eine Zeile (Row) oder ein vordefiniertes Layout innerhalb des Beitrags erzeugen.

WordPress - Beitrag - Page Builder
WordPress – Beitrag – Page Builder

Beispiel: Ein Button

Ein einfaches Widget ist ein Button, der mit einem Link hinterlegt werden kann.

WordPress - Page Builder - Button
WordPress – Page Builder – Button

Nach dem Speichern siehst du in deinem Beitrag einen funktionsfähigen Button.

WordPress - Page Builder - Button im Beitrag
WordPress – Page Builder – Button im Beitrag

Außer dem Button stehen zahlreiche andere Widgets zur Verfügung. Page Builder nutzt neben eigenen Widgets natürlich auch die aus dem Widget Bundle Paket und bereits vorhandene WordPress Widgets.

WordPress - Page Builder - Widgets
WordPress – Page Builder – Widgets

Zeilen und Spalten

Mit Add Row lassen sich einzelne Zeilen einfügen, die wiederum aus beliebig vielen Spalten bestehen können. Die Spalten können mit beliebigen Widgets gefüllt werden. Du kannst also beispielsweise zwei Texte und einen Button in drei Spalten anzeigen.

WordPress - Page Builder - Zeile
WordPress – Page Builder – Zeile

Auf der Website sieht mein Beitrag dann so aus:

WordPress - Page Builder - Zeile mit drei Spalten
WordPress – Page Builder – Zeile mit drei Spalten

In einen Beitrag kannst du beliebig viele Zeilen einfügen.
Eine Spalte kann beispielsweise eine Google Map enthalten. Um die Karte anzeigen zu können, musst du über ein Google Konto verfügen und dir einen API Key erzeugen (kostenlos). Den Link zur Erstellung des API Keys findest du in den Einstellungen des Google Maps Widget.

Alle Layout Anpassungen wie beispielsweise das Verschieben der Reihen und Elemente werden in der Vorschau des Live Editors sofort nachvollzogen.

WordPress - Page Builder - Live Editor
WordPress – Page Builder – Live Editor

Vordefinierte Layouts

Auster den individuellen, selbst zusammengestellten Layouts, gibt es auch vordefinierte Layouts. Je nach verwendetem WordPress Template passen sie mehr oder weniger gut, sind allerdings vollständig anpassbar.

WordPress - Page Builder - vordefiniertes Layout
WordPress – Page Builder – vordefiniertes Layout

Fazit

Wenn du bereits WordPress benutzt und mit dessen Arbeitsweise vertraut bist, ist der Page Builder eine wirklich interessante Ergänzung. Der Arbeitsablauf ist übersichtlich und es stehen viele Widgets zur Verfügung.

Links


tl;dr: Mit dem Page Builder Plugin kannst das Layout von WordPress Beiträgen vielfältig verändern.

Save

Autor: Hagen Graf

consultant, author, trainer, solution finder, web architect, developer, open source lover, visionary, orator, the good old webmaster. Able to simplify!

Ein Gedanke zu „Responsive Layouts mit dem WordPress Plugin Page Builder“

  1. Hallo Hagen,
    danke für Deinen hilreichen Bericht. Ich habe mich mit Page Builder by SiteOrigin vertraut gemacht und habe eine statische Seite angelegt. Leider habe ich das Problem, dass sich diese nicht veröffentlichen lässt 🙁 Es passiert einfach nichts, wenn ich auf veröffentlichen klicke. Mein Theme ist Hueman, hast du von diesem Phenomen schonmal was gehört? Woran kann das wohl liegen. Vielleicht hast du einen Tipp für mich?. VG KAtja

Kommentar verfassen