Page Builder für WordPress

Individuellere Seiten ohne Programmierung

Share on Facebook0Tweet about this on Twitter5Share on Google+0Share on LinkedIn0Email this to someone

WordPress bietet euch mit zahlreichen Themes und Plugins viele Möglichkeiten die eigene Seite anzupassen. Ein hilfreiches Plugin ist der Page Builder von SiteOrigin. Innerhalb eures Themes peppt ihr damit Seiten und Beiträge auf, ohne auch nur eine Zeile im Code verändern zu müssen. Hier lest ihr, wie’s geht!

PageBuilder

Diese Plugins braucht ihr

Zum einen natürlich das Page Builder by SiteOrigin Plugin, das den Editor in WordPress um einen weiteren Reiter ergänzt (Visuell, Text und Page Builder). Für weitere Funktionen, zum Beispiel Call-to-Action Buttons, könnt ihr euch zusätzlich das SiteOrigin Widgets Bundle installieren. Falls ihr für diese Funktionen bereits ein anderes Plugin einsetzt, braucht ihr nicht zu wechseln.

Page Builder Optionen

In den Einstellungen von Page Builder Plugins bestimmt ihr, für welche Inhaltstypen die Funktionen zur Verfügung stehen und verändert bei Bedarf die Umbrüche für die Mobilansicht. Bei der Option „Inline CSS“ gehen die Meinungen auseinander. Zum einen sollte CSS Code in der dafür vorgesehenen style.css gespeichert werden und nicht im HTML-Code der Seite. Andererseits kann ein wenig inline CSS Code dabei helfen, dass den Usern schneller eine ansprechende Version der Seite angezeigt wird.

PageBuilder-options

Ersten Inhalt mit dem Page Builder erstellen

Beim ersten Verwenden des Page Builders wählt ihr oben rechts im Editor den Reiter „Page Builder“ aus und klickt dann auf „Add Row“, um den Container für die ersten Inhalte zu erstellen.

PageBuilder-backend1

PageBuilder-backend2

Mit dem Container legt ihr fest, wie die Inhaltselemente geordnet werden. Für Themes mit breiten Seiten erstellt ihr mehrere Spalten. Die Spaltenbreite wählt ihr entweder per Dropdown oder per Klicken und Ziehen. Für das schmale Twenty Fifteen Theme wählen wir die Darstellung in nur einer Spalte. Nachdem das Element erstellt ist, könnt ihr über die Edit-Funktion die Darstellung weiter anpassen und dem Element eine CSS-Klasse zuweisen, ein individuelle Hintergrundfarbe oder ein Hintergrundbild festlegen.

Widgets in die Container einfügen

Im nächsten Schritt fügt ihr in das noch leere Spaltenelement per Klick sogenannte Widgets hinzu, die von normalen Textboxen, Call-to-Action Buttons oder Bildern so ziemlich alles darstellen können. Praktisch: Auch bei den Widgets könnt ihr einzeln die Hintergrundfarbe oder Hintergrundbilder festlegen und die Darstellung auch außerhalb des Beitrags erzwingen.

PageBuilder-backend3

Das Text-Widget.

PageBuilder-backend4

Das Button-Widget.

PageBuilder-backend5

Diese Widgets stehen uns zur Auswahl.

PageBuilder-backend6

Mit ein paar Widgets sieht euer Beitrag dann so aus und per drag and drop verändert ihr die Reihenfolge der Widgets.

Individuelle Blogeinträge in WordPress

Wie sieht das Ganze für eure Leser aus? Hier die Funktion, die Spalte über die komplette Seitenbreite darzustellen. Das passt zwar nicht zum Twenty Fifteen Theme, aber mit vielen anderen Themes könnt ihr damit gute Ergebnisse erzielen:

PageBuilder-frontend1

Über die gesamte Bildschirmbreite: Passt leider nicht zum Twenty Fifteen Theme.

Für unser Theme beschränken wir die Darstellung des Hintergrundbilds auf den Beitrag und hinterlegen das Text-Widget mit einem weißen Hintergrund.

PageBuilder-frontend3

Ein brauchbares Ergebnis für unser Theme.

Fazit: Mit dem kostenlosen Page Builder Plugin von SiteOrigin erweitert ihr eure WordPress-Seite um zahlreiche Funktionen, um eure Inhalte optisch ansprechender darzustellen.


Hans Jung

Hans Jung

Hans ist Datenschutzbeauftragter und bekennender WordPress-Fan – und versucht beides unter einen Hut zu bekommen.
Hans Jung
Share on Facebook0Tweet about this on Twitter5Share on Google+0Share on LinkedIn0Email this to someone

Schreibe einen Kommentar

Pressengers lebt von der Wordpress Community, beteilige dich mit einem Kommentar!
Deine E-Mail Adresse wird nicht veröffentlicht.

Achtung: Mit dem Absenden eines Kommentars erklärst du dich damit einverstanden, dass alle eingegebenen Daten und deine IP-Adresse zum Zweck der Spamvermeidung durch das Programm Akismet in den USA überprüft und gespeichert werden. Weitere Informationen zu Akismet und Möglichkeiten des Widerrufs..