Kategorien
Editoren Site Builder

Immer mehr Gutenberg Blöcke

Seit gut einem Jahr ist der Gutenberg Editor der Standard Editor im Content Management System WordPress. Die WordPress Welt teilte sich anfangs in strikte Gegner und Befürworter. Ein Jahr später sieht es so aus, dass sich das Gutenberg Konzept durchgesetzt hat. War es anfangs tatsächlich „so eine Sache“ mit dem neuen Editor zu arbeiten, wurde die Qualität von Version zu Version besser. Für alle, die Gutenberg immer noch nicht kennen oder nutzen, gibt es die Gutenberg-Fibel um ihn kennenlernen. Aber auch im WordPress Plugin Verzeichnis tauchen immer mehr Plugins mit einem Bezug zu Gutenberg auf.

Kategorien
Content Management Systeme Editoren Shared Hosting Site Builder Webdesign

Responsive Layouts mit dem WordPress Plugin Page Builder

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.

#ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 0.85; z-index: 8675309; display: none; cursor: pointer; top: 5730px; left: 50px;">Save