Homepage Baukasten – Quick Start – Page Builder Beaver Builder / WordPress
Quick Start HPMedien Homepage Baukasten / Page Builder / Beaver Builder / WordPress
Dieser Beitrag zeigt eine kurze Einführung in die Funktionsweise unseres Homepage Baukasten.
Bei unserem Homepage Baukasten handelt es sich um eine Whitelabel-Agentur-Version des Beaver Builder.
Nach dem Aufkommen von Page Builder Plugins wurde deren Verwendung sehr schnell sehr beliebt. Dabei ist der bereits seit 2014 verfügbare Beaver Builder mit dem Anspruch angetreten stabil, funktional und mit möglichst sauber ausgegebenen Code zu arbeiten. Diesem Ziel ist der Beaver Builder bis heute treu geblieben.
1: Starten des Homepage Baukasten & Webseiten Template wählen
Nachdem Sie sich eingeloggt haben klicken Sie auf "zur Webseite"
Klicken Sie auf "PageBuilder" in der oberen Werkzeugleiste um den Frontpage Editor zu starten
Klicken Sie in der rechten Werkzeugleiste auf den Reiter "Vorlagen" und wählen Sie eins von 30 Layouts für Ihre Webseite
Sie können mehrere Layouts miteinander kombinieren. Fügen Sie ein neues Layout durch anklicken eines Layouts hinzu:
Nachdem Sie die Elemente Ihrer Seite bearbeitet haben klicken Sie in der oberen Werkzeugleiste auf die blauen Button "Fertig" -> "Veröffentlichen"
2: Die Inhalte Ihres gewählten Homepage Baukasten Templates ändern
Bewegen Sie die Maus über das zu ändernden Element
Es erscheint eine blaue Werkzeugleiste:
Drag & Drop auf diesem Icon verschiebt das ausgewählte Element
Hier ändern Sie den Inhalt des ausgewählten Elements
- Texte oder Bilder ändern
Unter dem Reiter "Stil"
- ändern Sie das Aussehen des Elements
Unter dem Reiter "Erweitert"
- können Sie einen Aussenabstand definieren
- Die Sichtbarkeit für verschiedene Ausgabegeräte (Desktop, Tablet und mobile) wählen
- eine animation wählen
- css ID und Klasse definieren
Ein klick auf dieses icon dupliziert das Element
Hier definieren Sie die Spaltenformatierung:
- Textfarbe der Spalte
- Hintergrund der Spalte
(Farbe, Verlauf oder Foto) - Rahmenfarbe und -stärke der Spalte
- Einen Schatten der Spalte hinzufügen
Unter dem Reiter "Erweitert"
- wählen Sie Aussen- und Innenabstände
- Die Sichtbarkeit für verschiedene Ausgabegeräte (Desktop, Tablet und mobile)
- Sie können die Spalte animiert einblenden
- css ID und Klasse
3: Neue Elemente der Seite hinzufügen
Klicken Sie auf das + Icon oben rechts
Unter dem Reiter "Module" können Sie neue Elemente per Drag & Drop in Ihre Seite einfügen.
Ziehen Sie einfach das gewünschte Elemente an die gewünschte Stelle in Ihrer Webseite.
Zeilen hinzufügen
Unter dem Reiter "Zeilen" können Sie neue Zeilen per Drag & Drop in Ihre Seite einfügen.
Ziehen Sie einfach das gewünschte Zeilen-Element an die gewünschte Stelle in Ihrer Webseite.
4: Hintergrundfarbe oder Hintergrundbild einer Zeile ändern
Bewegen Sie die Maus über den zu ändernden Hintergrund und klicken Sie dann auf das Icon "Zeileneinstellungen" (Werkzeug-Icon)
Scrollen Sie runter bis Hintergrund und wählen Sie einen Hintergrundtyp aus
Um ein Bild auszutauschen klicken Sie zuerst auf Foto -> löschen und dann auf "Foto auswählen".
Im nächsten Schritt können Sie ein Bild aus Ihrer Mediathek auswählen oder ein Bild von Ihrer Festplatte hochladen.
5: Ihr Logo austauschen / hinzufuegen
Klicken Sie im Frontend Ihrer Seite auf "Customizer" in der oberen Werkzeugleiste der Seite
... oder im Backend Ihrer Seite auf "Design" -> "Customizer"
Klicken Sie nun auf
"Header" -> "Header Logo"
6: Den Footer Ihrer Seite bearbeiten
Klicken Sie im Backend Ihrer Seite auf
"Design" -> "Widgets"
Sie können nun durch anklicken der gewünschten Footer Spalte Inhalte ändern oder hinzufügen
Um Inhalte hinzuzufügen klicken Sie auf ein Element aus der Liste "Verfügbare Widgets" und wählen Sie die gewünschte Footer Spalte aus, in der das Element erscheinen soll.
7: Eine neue Seite Ihrer Homepage hinzufügen
Klicken Sie im Backend Ihrer Seite auf
"Seiten" -> "Erstellen"
geben Sie den Title Ihrer Seite ein
klicken Sie auf "speichern"
klicken Sie auf "Starten Beaver Builder"
Klicken Sie im Backend Ihrer Seite auf
"Design" -> "Menüs"
Wählen Sie in Menü aus
Wählen Sie die neue Seite durch klick aus und klicken Sie auf "Zum Menü hinzufügen"
