Was kann ein Page Builder?

Was kann ein Page Builder? Eine oft gestellte Frage. Page Builder sind Plugins welche die Funktionalität von Content Management Systemen wie WordPress, Drupal, Typo3, etc. erweitern.

Page Builder erlauben die einfache graphische Aufbereitung einzelner Beiträge – visuell per Drag & Drop. Das Schöne daran, man benötigt keinerlei HTML-, CSS- oder Programmier-Kenntnisse. Dieser Artikel “Was kann ein Page Builder?” zeigt die wichtigsten Funktionen der WordPress Page-Builder-Plugins, was man so alles damit machen kann und welche Vorteile diese Anwendung bietet.

Welche Page Builder gibt es?

Mittlerweile gibt es eine Vielzahl an Anbietern, welche Page Builder Plugins – sowohl Kostenlose wie auch Kostenpflichtige – zur Verfügung stellen. Page Builder stehen entweder als eigenständiges Plugin welche mit den meisten, nach WordPress Standard programmierten Themes verwendet werden können oder als fixer Bestandteil eines speziellen Themes, wie zB. das Avada-Theme, zur Verfügung,

Nicht zu verwechseln sind Page Builder mit Homepage-Baukästen. Homepage-Baukästen funktionieren zwar ähnlich, sind aber eigenständige Tools, welche nur auf den Seiten der Anbieter laufen. Man ist dann komplett an deren Leistungsangebot gebunden. Für diesen Artikel also uninteressant.

Ich selbst bevorzuge bei Page Builder die standalone Varianten, da ich diese eben bei vielen meiner Themes, verwenden kann und somit nicht auch noch an einen einzigen Theme-Entwickler gebunden bin.

Meine Top 3 Page Builder Favoriten

Nach vielem Testen und Versuchen haben sich folgende Pagebuilder als meine Favoriten heraus kristallisiert. Kriterien sind neben dem einfachen Handling, der Funktionalität, der Stabilität auch das Verhalten im Falle einer Deaktivierung des Plugins.

In unserem vorigen Artikel 11 Gründe für Page Builder finden sich noch weitere Informationen rund um das Thema Page Builder und auf was zu achten ist.

Page Builder Icons
Baustein-Elemente

Was kann ein Page Builder?

Mittels einem Page Builder Plugin erhält man die Möglichkeit einzelne Seiten und Beiträge oder sogar ganze Seiten (Stichwort: Landingpages) optisch aufzupeppen. Das ganze in Echtzeit und visuell, ohne daß man in einen Code eingreifen muss. Aber der Reihe nach.

Nach dem Öffnen einer Seite oder eines Beitrages und Klick auf den Page Builder Button gelangt man in den Frontend-Editor Bereich. Je nach Hersteller sieht man rechts, oben oder links eine Reihe an Icons, mit welchen man dann seine Seiten mit einsprechend gestalten kann.

Die hier gezeigten Abbildungen stammen von dem Page Builder Plugin Thrive Architect.

Je nachdem was gewünscht ist, kann man entweder das bestehende WordPress-Theme als Grundgerüst verwenden, sprich bestehende Header, Footer, Navigation und eventuell Sidebars übernehmen und nur den einzelnen Artikel optisch gestalten oder man wählt eine komplett leere Seite und gestaltet diese von Grund aus neu.

Die zweite Variante ist vor allem für spezielle Verkaufsseiten und Landingpages interessant. Aber nun weiter zu den Eigenschaften, was ein Page Builder so alles kann.

Das Video zu “Was kann ein Page Builder”

Das Video verschafft dir einen ersten groben Überblick, was mit einem PageBuilder so alles Möglich ist. Hier ist leicht zu ersehen, wie schnell man seine Seiten gestalten und ändern kann.

Page Builder Bausteine

Page Builder arbeiten mit sogenannten Blöcken, auch Bausteine genannt. Es gibt Bausteine für Grundelemente, wie Text, Überschriften oder Bilder, deren Handhabung ähnlich dem WordPress-Editor ist. Zusätzlich gibt es noch Bausteine, welche spezielle Funktionen oder zusammengefasste Elemente enthalten, wie zB. Counter, Formular oder speziell designte Boxen.

Page Builder Baustein hinzufügen
Bausteine und Elemente hinzufügen

Per Drag und Drop fügt man die einzelnen Bausteine, zB. ein Textfeld, ein Überschriften-Feld oder ein Bild hinzu. Dazu klickt man auf das jeweilige Icon und zeiht es auf die gewünschte Stelle der Seite.

Wiederkehrende Elemente lassen sich einfach duplizieren und an die gewünschten Gegebenheiten anpassen.

Was kann ein Page Builder - Elemente duplizieren
Elemente duplizieren

Anordnen der Page Builder Bausteine

Der Vorteil jeweils einzelne Blöcke zu verwenden ist, dass ich diese jederzeit verschieben kann, indem ich das gewünschte Element anklicke und auf die gewünschte Position verschiebe.

Um mehrere Elemente auf einmal zu verschieben kann man diese in Containern/Sektionen zusammenfassen. Container sind ein extra Elemente ( zB. Background Section, Content Box), in welchem man dann seine gewünschten Bausteine wie das Überschriften-, Text- und/oder Bild-Feld positioniert. Verschiebe ich den Container, werden alle Elemente, welche sich in diesem Container befinden mitverschoben.
Mehrspaltiges Layout
Spaltenbreite individuell bestimmen

Per Drag & Drop kann aus einzelnen einspaltigen Elementen ein mehrspaltiges Feld erzeugt werden. Dazu einfach ein Element auswählen und links oder rechts neben einen anderen Baustein platzieren und schon hat sein mehrspaltiges Feld. Die gewünschte Breite der einzelnen Spalten kann ich einfach visuell festlegen.

Unzählige Einstellungsmöglichkeiten

Mit Klick auf ein zu gestaltendes Element erhält man zig Einstellungsmöglichkeiten, wie

  • Innen & Außen Abstand zum nächsten Element bestimmen
  • Position & Ebene festlegen
  • Typographie festlegen (Größe, Zeilenabstand, horizontale und vertikale Ausrichtung, Schriftart, Schriftfarbe, …)
  • Hintergrund bestimmen (einfarbig, Verlauf, Struktur, Hintergrundbild, Opazität)
  • Schatten um Elemente oder Schriften festlegen (Abstand, Unschärfe, Farbe, Winkel)
  • Rahmen & Konturen bestimmen (Farbe, Rahmenstärke, Art des Rahmen [durchgehend, Strich, Punkt]
  • Animationen für einzelne Objekte oder Container bestimmen
  • Bilder & Icons absoften und einfärben
  • hover Effekte festlegen
  • und vieles mehr

Mit diesen Einstellungen hat man die Möglichkeit, nahezu unbegrenzt seinen Artikel oder gar seine komplette Seite individuell optisch zu gestalten. Und das Tolle ist: man sieht das Ergebnis umgehend in Echtzeit.

Vorgefertigte Elemente übernehmen

Page Builder enthalten – je nach Hersteller – viele vorgefertigte Elemente, welche ebenfalls per Drag & Drop auf die Seite hinzugefügt und an die individuellen Gegebenheiten angepasst werden können. Damit ist ein noch schnelleres Gestalten möglich!

Das Einfügen funktioniert wie oben beschrieben. Das entsprechende Element anklicken, auf die gewünschte Position ziehen und anschliessen anpassen. So gibt es fertige Bausteine für:

  • Formularfelder
  • Call-to-Action Boxen
  • Lead Generatoren
  • Google Maps
  • Social Media
  • Facebook Kommentare
  • Counter
  • Icons
  • Styled Boxen
  • Testimonials
  • automatische Inhaltsverzeichnisse
  • Videos
  • Tabellen
  • Tabs & Toggles
  • designte Aufzählungen & nummerierte Listen
  • Garantie Boxen
  • und vieles mehr

Die angebotenen fertige Bausteine variieren natürlich je nach Hersteller.

Bereitgestellte & eigene Vorlagen

Page Builder Template SnippetSollen Elemente oder ganze Container öfters verwendet werden, so kann man diese als Template-Snippet abspeichern und bei Bedarf immer wieder einfügen. Der Vorteil von Template-Snippet ist, dass man die Grundanpassungen nur einmal durchführen muss und diese jederzeit wieder verwenden kann.

Selbstverständlich können diese eingefügten Template-Snippets danach noch abgeändert werden, wie zB eine Text austauschen.

Ebenso bieten viele Page Bilder Hersteller eine Vielzahl an professionell gestaltete Vorlagen für die unterschiedlichsten Einsatzbereiche an. Somit können selbst graphisch unbedarfte Personen ansprechende Seiten gestalten.

Page Builder Vorlagen
Page Builder Vorlagen Set
Die gewünschte Vorlage laden → Farben anpassen → Bilder austauschen → Texte abändern → FERTIG

Selbstverständlich können auch hier neue Elemente hinzugefügt oder nicht benötigte gelöscht werden.

So kann dann zum Beispiel eine neu hinzugefügte Vorlage aussehen und anschliessen an die individuellen Bedürfnisse abgeändert werden.

Page builder Vorlage
Page Builder Beispielvorlage zum Anpassen

Responsive Webdesign

Page Builder Responsive Vorschau
Responsive Vorschau Handy

Ein ganz großes und aktuelles Thema ist das Responsive Webdesign.

Responsive Webdesign bedeutet grob gesagt, dass sich das Layout an das entsprechende Ausgabemedium, wie PC, Laptop, Tablet oder Smartphone anpasst. Wir haben dazu schon einen recht ausführlichen Beitrag verfasst. Siehe dazu Was ist Responsive Webdesign?

Mit einem professionellen Page Builder ist dieses Thema kein Problem.

Nachdem die Seite üblicherweise für Desktop-Bildschirme gestaltet wurde kann man durch Umschalten auf das entsprechende Ausgabemedium (Tablet oder Handy) schnell ersehen, wie der Aufbau auf der entsprechende Bildschirmgröße aussieht.

Im Bedarfsfall können Änderungen (Textgrösse, Abstände, Elemente ein-/ausblenden) visuell vorgenommen werden, damit das Ergebnis wie gewünscht aussieht.

Diese Änderungen wirken sich nur auf die gewünschte Ausgabegröße aus. Somit hat man für jedes Medium die perfekte Webseite.

Soweit der erste grobe Einblick zu Was kann ein Page Builder?

Schlussbemerkung

Schneller und individueller als wie mit einem Page Builder kann man derzeit keine Seiten und Beiträge gestalten. Vor allem, wenn man über keine oder wenige HTML und CSS3 Kenntnisse verfügt.

Selbst WordPress entwickelt eine erste simple Version eines Frontend-Editors namens Gutenberg. Allerdings wird die Entwicklung bis zu einer brauchbaren und fehlerlosen Version noch einige Zeit in Anspruch nehmen. Mit einer ersten finalen Version dürfte laut Pressemeldung mit dem neuen WordPress 5.0 Ende 2018 zu rechnen sein.

Allerdings wird der Funktionsumfang vom Gutenberg-Editor anfangs nicht mit den derzeitigen Marktführern mithalten können.

Das beigefügte Video gibt einen kurzen Live-Überblick zum Thema “Was kann ein Page Builder?” In diesem Video sieht man, wie schnell man einzelne Elemente hinzufügen und abändern kann.

Die vorgebrachten Design-Beispiele sind natürlich völlig sinnfrei und dienen nur zur Erläuterung der Beispiele.