Beaver Builder Grundlagen

Beaver Builder ist ein sogenannter “Page Builder”, um bestimmte Seiten frei gestalten zu können und gleichzeitig Inhalte auch für Redakteur:innen editierbar zu machen. Hier die wichtigsten Grundlagen, um Inhalte in Beaver Builder Seiten zu ändern.

Unterschied “normale Seite” und “Beaver Builder Seite”

Der Beaver Builder legt sich über eine Seite und bestimmt von da an ihr Aussehen. Wenn der Beaver Builder für eine Seite aktiviert wurde, solltest du diese ausschließlich im Beaver Builder bearbeiten. Wenn du im Administrationsbereich eine Seite öffnest, wird dir angezeigt, ob für diese Seite der Beaver Builder aktiv ist. In diesem Fall solltest du nicht zum “Texteditor” wechseln, sondern direkt den Beaver Builder über den blauen Button starten:

Bearver Builder oder Texteditor

Beaver Builder starten

Wenn Beaver Builder auf einer deiner Seiten aktiv ist, kannst du das sehen, wenn du als eingeloggter Administrator deine Internetseite aufrufst. In der schwarzen Leiste oben befindet sich dann ein Knopf “Beaver Builder” (1) und wenn die aktuelle Seite den Beaver Builder auch nutzt, mit einem grünen Punkt (2). Nutzt die aktuelle Seiten den BB (Beaver Builder) nicht, ist der Punkt grau. Klicke auf den “Beaver Builder” Knopf, um den Builder zu starten.

Übersicht

Sobald du den BB gestartet hast, erscheint ganz oben eine weiße Leiste (1). Wenn du dich mit der Maus über deine Seite bewegst, siehst du blaue Hervorhebungen, die Elemente (2) oder leere Spalten zeigen (3).

Überschriften bearbeiten

Wenn du auf ein Text-Element wie diese Überschrift klickst (1), öffnet sich ein Fenster für dieses Element. Bei diesem Element handelt es sich um eine “Überschrift” (2) und die bist im Tab “Allgemein” (3). In das Eingabefeld “Überschrift” (4) kannst du jetzt deinen gewünschten Text schreiben. Sobald du das Fenster unten mit “Speichern” schließt, wird dein neuer Text übernommen.

Text-Blöcke bearbeiten

Neben dem Element “Überschrift” kommt das Element “Texteditor” sehr häufig vor. Wenn du auf einen Textblock klickst, öffnet sich in vielen Fällen das Fenster “Texteditor” (1). Hier kannst du deinen Text einfügen (2) und formatieren (3). Im Gegensatz zum Element “Überschrift” ist der “Texteditor” für umfangreiche Texte gedacht, inklusive Listen, Links, Unterüberschriften etc.

Buttons bearbeiten

Im Element “Button” (1) kannst du den angezeigten Text (2), das Icon (3) und die Position des Icons (4) einstellen. Weiter unten kannst du den eigentlichen Link für den Button einfügen (5). Hier kannst du eine URL eintragen (https://brettmeister.com) oder durch Klick auf “Auswählen” (6) eine deiner Seiten. Möchtest du, dass der Link sich in einem neuen Fenster öffnet, kannst du unten die Checkbox “Neues Fenster” anhaken.

Fotos ändern

Wenn auf deiner Seite Fotos vorkommen, kannst du die im Beaver Builder ändern. Nach dem Anklicken des Elements öffnet sich der Dialog “Foto” (1). Die Fotoquelle (2) ist meistens deine WordPress “Medienbibliothek”. Durch Klick auf “Bearbeiten” (3) kannst du ein anderes Foto hochladen bzw. auswählen.

 

Im folgenden Dialog kannst du Fotos hochladen (1) oder aus deiner Mediathek (2) auswählen. Sobald du das gewünschte Foto markiert hast (3), bestätigst du deine Auswahl unten rechts mit dem Button “Foto auswählen” (4).

 

 

Wichtiger Hinweis: Sobald du ein Foto ausgewählt hast, wird das als “Vollgröße” eingefügt. Bitte wähle hier die passende Größe für das Foto aus. Am besten du wählst eine möglichst kleine Auflösung, in der die Proportionen deines Fotos richtig sind und das Foto nicht unscharf erscheint.

Speichern

Bist du mit deiner Bearbeitung fertig, wählst du ganz oben rechts in der weißen Leiste den Knopf “Fertig” und anschließend “Veröffentlichen”. Bist du dir noch nicht ganz sicher, kannst du mit “Entwurf speichern” deine Änderungen sichern, ohne dass deine Änderungen für Besucher:innen sichtbar sind. Sobald du dann wieder den Beaver Builder startest, kannst du deinen Entwurf fortsetzen.

Weitere Informationen

Die offizielle Knowledge Base von Beaver Builder findest du hier: https://docs.wpbeaverbuilder.com/beaver-builder/.

Eine Liste aller Elemente (“Modules”) inkl. kurzer Beschreibung findest du hier: https://docs.wpbeaverbuilder.com/beaver-builder/layouts/modules/module-overview/.

War das hilfreich?