Ein WPBakery Tutorial – Pagebuilder für WordPress

Die Erstellung von Seiten oder Beiträgen in WordPress kann manchmal etwas mühselig sein. Zumindest wenn man den normalen Editor verwendet und multimediale Inhalte einbauen möchte.

Eine große Erleichterung können da sogenannte Pagebuilder sein. Damit lassen sich Medien verschiedenster Art schnell einbauen, leicht arrangieren, herausnehmen, ersetzen oder sogar animieren.

Dabei gibt es leider auch einige Pagebuilder, die es meiner Meinung nach massiv hinsichtlich Funktionsumfang übertreiben. Das macht sie in der Handhabung träge, unübersichtlich und zielt in meinen Augen am Sinn der Sache vorbei.

Der WPBakery Pagebuilder hält da noch das richtige Gleichgewicht (zumindest meiner Meinung nach). Daher empfehle ich ihn gerne Kunden und anderen Anwendern. Mit einem kleinen Tutorial dürfte der Einstieg sicher nicht schwer fallen. Daher habe ich dieses WPBakery Tutorial für euch erstellt.

Wichtig: Zum Grundverständnis sei gesagt, die Logik des WPBakery Pagebuilder baut darauf auf, dass alle Elemente (Text, Bild, Video etc.) wie in ein Baukasten aus einzelnen Modulen bestehen. Gegenüber dem normalen WordPress Editor, bei dem das zentrale Element der eigentliche Text ist, und alle weiteren Medien werden in diesen Textfluss integriert. Durch diese Modulbauweise kann der Pagebuilder einige Stärken auspielen. Alle Elemente sind unabhänig voneinander, lassen sich in einem von euch definierten Raster bequem hin- und herschieben und ganz beliebig anordnen oder sogar einfach ausblenden. Aber seht selbst.

Eine neue Seite/Beitrag erstellen

Um eine neue Seite oder einen Beitrag zu erstellen, geht ihr erstmal wie gewohnt vor. Gebt einen Titel ein und klickt dann auf den blauen Button „Backend Editor“. Damit schaltet ihr die Beitragsbearbeitung, von dem WordPress Editor, auf den Pagebuilder um.

Damit solltet ihr jetzt die folgende Ansicht vorfinden. Relevant sind erstmal nur der linke Button „Add Element“ sowie „Add Text Block“ um direkt einen Text einzugeben.

Text hinzufügen und layouten

Wir beginnen mit der einfachsten Möglichkeit und fügen einfach mal einen Textblock ein. Dazu klicken wir in der leeren Übersichtsseite auf „Add Text Block“. Der Pagebuilder baut daraufhin ein Textmodul mit Blindtext hinzu.

Wenn ihr nun mit der Maus über das Modul geht, erscheint eine grüne Tool-Leiste. Wir wollen den Text bearbeiten, daher klicken wir auf das Stift Symbol. An dieser Stelle habt ihr aber grundsätzlich noch weitere Möglichkeiten. Ihr könnten das Textmodul ganz einfach duplizieren, löschen oder verschieben. Wir klicken auf den Stift zum Bearbeiten.

Damit öffnet sich nun ein Pop-Up mit dem gewohnten WordPress Text-Editor. Dort könnt ihr euern Text hineinschreiben, formatieren etc.

Wenn ihr fertig seid, klickt auf „Save changes“ und kehrt damit zur Übersicht zurück.
Nun könnten ihr über das + Symbol über/unter dem neuen Textmodul weitere Elemente einbauen.

Wir möchten aber erst einmal das Raster der Seite in 3-spaltiges Layout ändern. Dazu gehen wir links oben mit der Maus über das Symbol mit den drei Strichen. Es ploppt eine Leiste mit verschiedenen Layoutmöglichkeiten auf.

Dort könnt ihr nun für diese Zeile eine andere Spalteneinteilung festlegen. Habt ihr das getan, habt ihr nun die Möglichkeit das Textmodul ganz einfach von einer Spalte in die andere zu verschieben oder eben duplizieren. Ganz wie ihr wollt.

Bilder hinzufügen

Mit Text allein ist die Seite zugegeben noch etwas langweilig. Wir möchten nun ein Bild einbauen.
Dazu klicken wir an der Stelle an der das Bild erscheinen soll auf das + Symbol. Es erscheint eine Auswahl aller zur Verfügung stehender Elemente. Jetzt nicht erschrecken, in der Regel verwendet man nicht mehr als 4 – 5 Arten dieser Elementen. Aber die Möglichkeiten sind grundsätzlich eben weitaus umfangreicher.

Wir wählen hier nun das Modul „EINZELBILD“ und es öffnet sich der folgende Dialog:

Auch hier erwarten uns direkt einige Optionen, wir beschränken uns jedoch auf die folgenden zwei Einstellungen:

– Bild auswählen das abgebildet werden soll
– Bildgröße (das ist etwas unglücklich gelöst, hier könnt die Qualität anhand der folgenden Angaben definieren, das muss entsprechend eingetippt werden: thumbnail, medium, large, full oder eine Größenangebe in Pixeln. Testet einfach aus welche Größe an der jeweiligen Stelle sinnvoll ist. Habt dabei die Ladezeiten im Auge.)

Ihr könntet auch noch die Bildausrichtung verändern und weitere Dinge anpassen, die wichtigsten Einstellungen sind jedoch die oben genannten. „Save changes“ nicht vergessen.

Galerie hinzufügen

Sobald ihr mehrere Bilder auf einen Schlag hinzufügen möchtet, kann eine Galerie schnell die sinnvollere Wahl sein. Dazu bietet WPBakery drei verschiedene Varianten an.

– Media Grid (Bilder sind quadratisch)
– Mansonry Media Grid (variable Bildergrößen)
– Bildergalerie (finde ich nicht sehr ästhetisch)

Wir bauen ein einfaches Media Grid ein:

Habt ihr das ausgewählt, öffnet sich ein ähnlicher Dialog wie beim Einzelbild. Hier könnt ihr jedoch nun mehrere Bilder auswählen. Sinnvolle Einstellungen dazu sind:

– Display Style (wie viele Bilder sollen direkt angezeigt werden, soll es einen „Nachladen Button“ geben etc.)
– Grid Elements per row (Anzahl an Spalten, sprich wie viele Bilder nebeneinander)
– Gap (wie groß soll der Abstand zwischen den Bilder jeweils sein)

Wenn ihr mit euern Einstellungen zufrieden seid, schließt den Vorgang mit „Save changes“ ab.

Damit könnt ihr die Bilder eurer Wahl bereits sehr schön präsentieren. Wer noch etwas tiefer in die Materie einsteigen möchte, der kann in den Einstellungen des Media Grids das Layout noch weiter anpassen. Dazu geht ihr beim Media Grid auf „Bearbeiten“ und anschließend auf den Tab „Item Design“.

Hier könnt ihr nun aus einer großen Auswahl an vordefinierten Layouts wählen. Manche sind animiert, besitzen Texte wie Bildbeschreibung und vieles mehr. Probiert einfach mal durch.

Es lassen sich auch eigene Layouts erstellen. Das würde jetzt hier aber den Rahmen sprengen und ist dann bereits eher was für Fortgeschrittene.

Weitere Module und Medien

Das soll jetzt mal ein einfacher Einstieg in die wichtigsten Elemente und den Umgang damit gewesen sein. Wie ihr unschwer erkennen könnt, bietet WPBakery eine Menge weitere Module an. Letztlich ist die Handhabung aber immer ähnlich.

Habt ihr das Prizip erst einmal verinnerlicht könnt ihr mit ein wenig Experimentierfreude alle anderen Elemente ebenso verwenden. Wobei weniger bekanntermaßen manchmal mehr ist 😉

Elemente die ich noch für ganz sinnvoll halte sind,
– Zeile/Inhaltsbereich (um einfach mehr Struktur zu haben)
– Trennlinie
– Videoplayer
– Google Maps Karte
– Akkordion
– Button

Aber das ist jeden selbst überlassen.

Feintuning – Abstände und Farben

Wenn Elemente weiter auseinander gerückt werden sollen oder vielleicht Rahmen oder Hintergrundfarbe sinnvoll sind, dann könnt ihr euch folgendermaßen helfen.
Grundsätzlich hat jedes Element, jede Spalte, Zeile oder Inhaltselement eigene Einstellungen hinsichtlich Innen- & Außenabstand, Rahmen, Hintergrundfarbe oder -bild. Die findet ihr immer auf dem gleichen Weg. Nämlich dann, wenn ihr auf das Stift-Symbol klickt und dann in den Tab „Designeinstellungen“ wechselt.

Nun könnt ihr um das Element herum folgende Werte in Pixeln definieren:

– margin = Außenabstand
– border = Rahmen (Dicke)
– padding = Innenabstand des Elements

Das könnt ihr jeweils für die Seite oben, rechts, unten und die linke Seite definieren.

Die Einstellungen auf der rechten Seite nochmal im Detail:

– Rahmenfarbe: Klar, wenn ihr links einen Rahmen definiert habt definiert ihr hier die Farbe.
– Border style: Art des Rahmen (durchgehende Linie, gepunktet etc.)
– Border radius: Abgerundete Ecken des Rahmens bzw. deren Ausprägung
– Hintergrund: Hintergrundfarbe des Elements festlegen bzw. Hintergrundbild (Auswahl darunter) und Einpassung
– Box Kontrollelemente: Damit werden Einstellungen für alle Seiten gleichermaßen angewendet

Ich habe euch nicht’s Neues erzählt? Dann schaut doch einfach in Teil 2 meines Tutorials WP Bakery für Fortgeschritten

Viel Erfolg!