HPMedien https://hpmedien.de/ Digitale Medien Agentur in Moenchengladbach Sat, 25 Jan 2020 07:10:42 +0000 de-DE hourly 1 https://hpmedien.de/wp-content/uploads/2020/01/cropped-favicon-32x32.gif HPMedien https://hpmedien.de/ 32 32 Homepage Baukasten – Quick Start – Page Builder Beaver Builder / WordPress https://hpmedien.de/quickstart-homepage-baukasten Tue, 26 Nov 2019 06:41:56 +0000 https://hpmedien.de/templateHPm/?page_id=1836 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…

Der Beitrag Homepage Baukasten – Quick Start – Page Builder Beaver Builder / WordPress erschien zuerst auf HPMedien.

]]>

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.

Inhalt:

1: Start des Homepage Baukasten & Webseiten Template wählen

2: Die Inhalte Ihres Webseiten Template ändern

3: Neue Elemente der Seite hinzufügen

4: Hintergrundfarbe oder Hintergrundbild einer Zeile ändern

5: Ihr Logo austauschen / hinzufuegen

6: Den Footer Ihrer Seite bearbeiten

7: Eine neue Seite Ihrer Homepage hinzufügen

1: Starten des Homepage Baukasten & Webseiten Template wählen

Nachdem Sie sich eingeloggt haben klicken Sie auf "zur Webseite"

webseite-bearbeiten

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

vorlage_waehlen

TIPP:

Sie können mehrere Layouts miteinander kombinieren. Fügen Sie ein neues Layout durch anklicken eines Layouts hinzu:

neues-layout-hinzufuegen

Nachdem Sie die Elemente Ihrer Seite bearbeitet haben klicken Sie in der oberen Werkzeugleiste auf die blauen Button "Fertig" -> "Veröffentlichen"

veroeffentlichen

2: Die Inhalte Ihres gewählten Homepage Baukasten Templates ändern

Bewegen Sie die Maus über das zu ändernden Element

Es erscheint eine blaue Werkzeugleiste:

zeilen-bearbeitung
verschieben

Drag & Drop auf diesem Icon verschiebt das ausgewählte Element

werkzeug

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

duplizieren

Ein klick auf dieses icon dupliziert das Element

spalten

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.

neues-element-hinzufuegen

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.

zeilen-hinzufuegen

4: Hintergrundfarbe oder Hintergrundbild einer Zeile ändern

hintergrund-aendern

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

zeileneinstellungen

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

customizer

... oder im Backend Ihrer Seite auf "Design" -> "Customizer"

backend-customizer

Klicken Sie nun auf
"Header" -> "Header Logo"

header-logo-aendern

6: Den Footer Ihrer Seite bearbeiten

footer-aendern

Klicken Sie im Backend Ihrer Seite auf
"Design" -> "Widgets"

design-widgets-aendern
footer-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"

seite-hinzufuegen

geben Sie den Title Ihrer Seite ein

titel-eingeben

klicken Sie auf "speichern"

speichern
beaverbuilder-aufrufen

klicken Sie auf "Starten Beaver Builder"

Klicken Sie im Backend Ihrer Seite auf
"Design" -> "Menüs"

munue-aufrufen

Wählen Sie in Menü aus

muenue-waehlen

Wählen Sie die neue Seite durch klick aus und klicken Sie auf "Zum Menü hinzufügen"

seite-zu-menue-hinzufuegen

Zuletzt klicken Sie noch auf den blauen Button "Menü speichern"

Der Beitrag Homepage Baukasten – Quick Start – Page Builder Beaver Builder / WordPress erschien zuerst auf HPMedien.

]]>