Banner - WP Bistro Sparringspartner für WordPress

Page Builder Plugin – Ganz individuelle Websites gestalten

Individuelle Seitengestaltung mit Page Builder Plugin

Verfasst von

in

Individuelle Seitengestaltung mit Page Builder PluginKürzlich habe ich ein großartiges Plugin entdeckt, das es ermöglicht, WordPress-Websites völlig individuell zu gestalten: Page Builder von SiteOrigin.

In meinem Webinar vom 28.11.2013 hatte ich bereits drei Plugins vorgestellt, mit denen man eine Website nach eigenen Vorstellungen gestalten kann, aber das Pagebuilder Plugin geht noch einen Schritt weiter.

Mit dem Pagebuilder-Plugin ist es möglich, dynamische Layouts zu erstellen, indem die einzelnen Seitenbereich unabhängig von fest vorgegebenen Spalten angeordnet werden können. Die Startseite des WordPress-Bistros zum Beispiel ist mit diesem Plugin gestaltet.

Was mir besonders gut gefällt: Die einzelnen Bereiche, die mit dem Page Builder erstellt werden, können mit Widgets befüllt werden. So ist es ganz einfach, zum Beispiel eine Bildergalerie oder ein Video in die Seite einzubinden.

Das Plugin funktioniert mit fast allen WordPress-Themes (so die Aussage des Programmieres), so dass auch ein Theme-Wechsel problemlos möglich ist, ohne das mit Page Builder gestaltete Seitenlayout zu zerstören. Page Builder ist responsive. Das heißt, das Layout wird auch auf Smartphones und Tablets optimal dargestellt.

Und so einfach funktioniert es:

Nach Installation des Pagebuilder Plugins finden Sie beim Erstellen eines neuen Artikels oder einer neuen Seite einen weiteren Reiter mit der Bezeichnung „Page Builder“ im Editor:

Page Builder Plugin im Editor

Wenn man diesen Reiter anklickt, sieht man folgendes Bild als Ausgangspunkt für das neue Layout:

Ansicht Page Builder im Editor

Durch Klick auf das mittlere Symbol mit den drei Linien kann man eine neue Reihe in das Layout einfügen. Dabei kann man wählen, aus wie vielen einzelnen Spalten diese Reihe bestehen soll. Nach dem Einfügen der Reihe kann per Drag und Drop die breite der einzelnen Spalten festgelegt werden.

Durch Klick auf das „+“ kann man dann Widgets in die einzelnen Spalten einfügen. Dabei kann man auf alle Widgets zurück greifen, die für WordPress zur Verfügung stehen. Das Plugin Page Builder bringt einige eigene Widget mit wie z.B. ein Widget für einen Post Loop, der eine ausgewählte Anzahl von Blogartikeln anzeigt oder ein Plugin für Videos, die z.B. über Youtube eingebunden werden können. Werden über Plugins weitere Widgets installiert stehen diese ebenfalls im Page Builder zur Verfügung.

Das fertige Layout kann schließlich als Musterlayout gespeichert werden, so dass es für neue Seiten nicht wieder komplett neu erstellt werden muss.

So sieht z.B. die Startseite vom WordPress Bistro im Page Builder aus (Vergrößern durch Klick auf das Bild):

So sieht ein mit Page Builder gestaltetes Layout aus

Wie das im Frontend ausschaut, können Sie sich auf der Startseite im WordPress-Bistro ansehen.

Bildquelle:
© Trueffelpix – Fotolia.com

Kommentare

30 Kommentare zu „Page Builder Plugin – Ganz individuelle Websites gestalten“

  1. […] Woche habe ich das Page Builder Plugin vorgestellt, mit dem man das Layout seiner WordPress-Seite mit Hilfe von Widgets ganz individuell […]

  2. Michaela, danke für diesen Artikel. Ein toller Tipp! Muss zwar noch ziemlich am Layout basteln bis zur Veröffentlichung, aber das Fundament sollte schon mal stimmen … 😉

    1. Hallo Berit, Danke für Deine Rückmeldung. Ich freue mich, wenn der Artikel weiterhilft 🙂

  3. Tanja

    Hi! Ein tolles Plugin! Leider habe ich Probleme verschiedene Widgets zu integrieren, scheinbar behindern sich einige. Ist das ein bekanntes Problem? VG Tanja

    1. Michaela Steidl

      Hallo Tanja,

      ich hatte bisher nur einmal Probleme mit All in One Event Calendar – Das Plugin lies sich leider nicht in den Pagebuilder integrieren. Sonst hatte ich bisher noch keinerlei Schwierigkeiten.

      Geht es um ein bestimmtes Widget?

      Herzliche Grüße
      Michaela

  4. […] Page Builder Plugin – Ganz individuelle Websites gestalten › WordPress-Bistro […]

  5. Christine

    Hallo Michaela,
    super toll erklärt – auch für jemanden wie mich, der von der Dreamweaver Front ganz neu zu WP gewechselt ist und sich nun fuuuurchtbar schwer damit tut. Ich habe nur gerade das Problem, daß bei mir der dritte Reiter nicht erscheint. Hast Du ’nen Tipp/Idee? Vielen Dank. LG, Christine

    1. Hallo Christine,

      wenn Du das Plugin installiert und auch aktiviert hast und der Reiter nicht erscheint liegt das mit hoher Wahrscheinlichkeit an einem Konflikt mit dem Theme oder einem anderen Plugin.

      Schau mal, vielleicht helfen Dir die Tipps aus diesem Artikel ein wenig weiter:
      https://wp-bistro.de/wordpress-fehler-ein-notfallplan-in-drei-schritten/

      Herzliche Grüße
      Michaela

  6. Eugen Schneider

    Hallo liebes Team,

    Nun ich nutze auch dieses Plugin, ich finde es wirklich hervorragend und einfach spitze. JEdoch habe ich auch einige Problem damit, denn sobald es aktiv ist kann ich keine Bilder hochladen, jedesmal kommt Http Fehler ich suche und suche nach einer Lösung doch bis jetzt habe ich nichts wirklich gescheites gefunden 🙂

    1. Hallo Eugen, eventuell gibt es einen Konflikt mit einem anderen Plugin das Du verwendest oder das Theme verträgt sich nicht mit dem Pagebuilder.

      Schau mal, ob Du mit diesem kleinen „Notfallplan“ das Problem eliminieren kannst:

      https://wp-bistro.de/wordpress-fehler-ein-notfallplan-in-drei-schritten/

  7. […] Page Builder Plugin – ganz individuelle Websites gestalten (2.662 Seitenaufrufe) […]

  8. Hermann

    Hallo Michaela,
    wie kann ich denn ein Menu dazu erstellen, mit dem ich die einzelnen Abschnitte im PageBuilder ansteuern kann?

    1. Michaela Steidl

      Hallo Hermann,
      dafür müsstest Du mit internen „Textankern“ arbeiten.

      Das heißt, Du gibst dort, wo der Link im Menü hinführen soll an (verwende bitte <> statt [] ):

      [a id=“menuepunkt1″][/a]

      Und im Menü verlinkst Du dann auf

      [a href=“#menuepunkt1″]Hier gehts zu Menüpunkt 1[/a]

      Ich hoffe, das hilft Dir weiter.

      Herzliche Grüße
      Michaela

      1. Hermann

        vielen dank.

  9. Danke für diesen Tipp – werd ich gleich mal bei der nächsten Seite testen. Sieht sehr vielversprechend aus.
    Danke Danke Danke!

  10. Jörg

    Schönes Plugin, danke für den Tipp.

    Wichtig ist auch das SO-Widgets Bundle zu installieren.

    Hier ist ein informatives Video => https://siteorigin.com/page-builder/documentation/

    1. Michaela Steidl

      Hallo Jörg,
      vielen Dank für den Hinweis auf das Widget Bundle. Ich glaube, das gab es zu dem Zeitpunkt noch gar nicht als ich den Beitrag geschrieben habe 🙂

      Herzliche Grüße
      Michaela

  11. Joschi

    Hi Michaela,

    Das Wigdget mit den Bundle ist echt super klasse und einfach zu verstehen.
    Kannst Du mir sagen wie Ich die einzelnen Zeilen ohne Abstand darstellen kann. Also so das diese direkt aneinander sind?

    LG

    Josch

    1. Hallo Joschi,

      Du hast die Möglichkeit über die Attribute für Layout das „Padding“ für die einzelnen Zeilen anzupassen – Dadurch kannst Du den Abstand zueinander beeinflussen. Je kleiner das Padding, desto geringer der Zeilenabstand.

      Ich hoffe, das hilft Dir weiter?

      Herzliche Grüße
      Michaela

  12. Joschi

    Hi Michaela,
    Wie genau muss denn die Befhlszeile aussehen?
    Kenne mich mit Prog nicht aus?

    Lg
    Josch

    1. Joschi

      Seltsam jetzt habe ich einen Rahmem um die Widgets in den Zeilen gesetzt und nun klapp es?!

      LG

      Josch

      1. Super – Dann passt jetzt alles?

        Herzliche Grüße
        Michaela

  13. Joschi

    Übrings….Danke für die tollen Tips und Vorstellungen!
    Deine seite ist echt super.

    LG

    Josch

    1. Michaela Steidl

      Danke schön 🙂

  14. klaus

    kann man im pagebuilder den abstand der einzelnen widgets zueinander ändern?
    also den abstand zwischen zwei zeilen?

    1. Hallo Klaus, Du kannst im Pagebuilder jede Zeile bearbeiten und hast dann die Möglichkeit, verschiedene Layout-Einstellungen vorzunehmen, unter anderem auch das Padding (also den Abstand) nach oben und unten.

      Schau mal, ob Dir das weiterhilft.

      Herzliche Grüße
      Michaela

  15. Hallo Michaela,

    bei mir ist der gesamte Pagebuilder Bereich verschwunden wenn ich „Categorie posts“ in die Seite einfüge. Man kann es sehen beim ersten Speichern sehen, wenn ich dann noch etwas ändern will, wird mir der „PB“-Reiter zwar angezeigt, aber nicht mehr meine erstellte Boxen und Reihen und es wird wird gefragt, ob der Inhalt übernommen werden soll. Ausserdem wird der Permalink der Seite geändert. Es wird der Perma-Link eines Beitrag aus den Kategorie-Post angezeigt.

    1. Hallo Josef, das klingt für mich ein bisschen nach einem Plugin-Konflikt. Hast Du mal versucht, alle anderen Plugins zu deaktivieren?

      Vielleicht hilft Dir das hier weiter:
      https://wp-bistro.de/wordpress-fehler-ein-notfallplan-in-drei-schritten/

      1. Hallo Michaela, vielen Dank. Das Problem ist sind die Recent Kategorie Posts, die ich die Mannschafts-Seite der einzelnen Teams oder Sparten anzeigen lassen will. So bald ich in einen Page Builder Rahmen ein entsprechendes Widget eingebe, wird die Vorschau noch richtig angezeigt, nach dem Speichern sind alle Fenster in einem zusammen gefasst und die Formatierung ist komplett weg. Ich werde wohl auf diese Info auf den Teamseiten verzichten.

  16. […] 5.0 musstest Du also entweder Kenntnisse in HTML und CSS verfügen oder auf sogenannte “PageBuilder” zurückgreifen um Deinem Seitenlayout etwas Struktur zu […]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert