Pflege mit dem Beaver Builder
Der Beaver Builder ist ein Editor für WordPress-Seiten, der in verschiedenen Modulen aufgeteilt ist. Diese können zur Gestaltung Ihrer Webseite verwendet werden.
Dokumentation und FAQ
Eine allgemeine Dokumentation gibt es von Beaver Builder selbst bei dem schon viele Themen abgedeckt werden wie z.B.
- Starten des Beaver Builders
- Aufbau der User Interfaces
- Undo und Redo von Veränderungen
- Copy und Paste
- Duplizieren von Seiten
- Löschen von Modulen und Zeilen
- Speichern, Veröffentlichen und Zurücksetzen
Die Dokumentation ist auf Englisch.
Link: https://docs.wpbeaverbuilder.com/beaver-builder/getting-started/what-can-i-do-with-beaver-builder
Verwendete Bever Builder Module
Folgende Moduel wurden für die Umsetzung der Seitenvorlagen verwendet. Im Laufe der Projektzeit können auch weitere Module hinzugekommen sein.
Kundenspezifische Anpassungen
In diesem Abschnitt finden Sie alle wichtigen Informationen zu Modulen und Anpassungen, die Ihre Webseite im speziellen betreffen.
CSS-Klassen
In manchen Fällen wird bei Modulen eine extra Klasse vergeben über dies das Aussehen/ das Verhalten des Moduls angepasst werden kann.
Um eine CSS-Klasse zu vergeben bearbeitet man das Modul und wechselt in den Tab "Erweitert".
Dort gibt es ein Textfeld mit dem Label "Klasse". Hier wird die entsprechende Klasse eingetragen.
Danach auf Speichern klicken, um die Auswirung der Klasse zu sehen.
benefit-list
- Lohn nach Tarifvertrag (oft höher)
- Hilfe bei der Bewerbung
- Gesundheitsgutachten
- Zertifikate und Zeugnisse
- Karriereberatung
Klasse: benefit-list
Modul: Texteditor
Auswirkung:
Die Klasse benefit-list wird verwendet, um in einem Texteditor-Modul die Liste mit Hacken anzuzeigen.
header-flyout
Klasse: header-flyout
Modul: Texteditor
Auswirkung:
Der Text wird am oberen Rand unter dem Menü bei Klick auf das Telefon-Icon angezeigt.
Um dieses Element zu bearbeiten wird der Header im Beaver Builder geöffnet.
Im Header kann dann der Texeditor ausgewählt werden.
Im Tab "Allgemein" kann der Textinhalt angepasst werden.
Im Tab "Erweitert" ist die Klasse header-flyout js-header-flyout phone-nubmers-without-icons gesetzt.
Jeder der Klassen hat eine bestimmte Auswirkung.
- header-flyout: Positionierung der Inhalts am oberen Rand der Webseite
- js-header-flyout: Wird für das Ein- und Ausblenden des Elements benötigt
- phone-number-without-icons: Die Icons vor den Telefonnummern werden entfernt
Damit das Telefon-Icon im Header das Flyout öffnet wird als Link #header-flyout gesetzt.
Das #header-flyout Element gibt es jedoch nicht. Somit wird die Bezeichnung ausschließlich fürs JavaScript benötigt.
hero--home
Klasse: hero--home
Modul: Zeile
Auswirkung:
Der Inhalt der Zeile nimmt eine vorgegebene Höhe (z.b. 570px) ein. Auf dem Desktop-Viewport wird das Bild in der ersten Spale am unteren Rand des Inhalts ausgerichtet während der Inhalt der rechten Spalte vertikal zentriert wird.
phone-numbers-without-icons
Klasse: phone-numbers-without-icons
Modul: Texteditor (Jedes Element mit einem Texteditor)
Auswirkung:
Das Icon, welches standartmäßig vor Telefonnummern gesetzt wird wird entfernt.
re4-contact-person
Klasse: re4-contact-person
Modul: Spalte
Auswirkung:
Die Linie (Seperator) innerhalb der Spalte geht bis fast an den Rand des Browsers im Desktop-Viewport