Menüs: Hier scheinen unsere zuvor erstellten Menüs auf. Wir möchten hier nun „Alle Positionen anzeigen“ und wählen dann dort als unser Primäres Menü das Hauptmenü aus, als Off-Canvas-Menü ebenso das Hauptmenü und als Footer-Menü das Footer-Menü.
Global: Hier können wir diverse globale Einstellungen zu Typografie, Farben und Buttons treffen. Container sind eher nebensächlich – hier reicht meist die Standardeinstellung.
Header: Hier wird der Header mit Logo und Navigationsleiste konfiguriert und gestyled. Das Off-Canvas Menü kann bearbeitet werden, wenn unten bei den drei Icons für die responsive Darstellung auf ein mobiles Gerät umgeschalten wird.
Footer: Hier wird der Footer mit Footer-Menü konfiguriert und gestyled.
Zusätzliches CSS: Hier kann zusätzlicher beliebiger CSS Code eingefügt werden, der global auf der Webseite angewandt wird → sparsam einsetzen!
Seiten mit Page Builder nachbauen
Erste Seite (z.B. Startseite) mit Page Builder öffnen (z.B. „mit Elementor bearbeiten“)
Elemente einfügen → auf oberster Ebene werden immer „Container“ verwendet, darin werden dann einzelne Elemente wie Überschriften, Texte, Bilder oder auch weitere Container für ein Spalten-Layout eingefügt.
Seitlich im „Struktur“-Panel kann die Reihenfolge und Verschachtelung der Elemente beobachtet und bearbeitet werden → Elemente können dort auch kopiert, eingefügt, dupliziert und gelöscht werden.
Elemente rechts in den Element-Einstellungen bearbeiten → hier können in den drei Tabs („Layout“ / „Inhalt“, „Stil“ und „Erweitert“) alle möglichen Einstellungen zu Größen, Abständen, Ausrichtungen, Farben, Schriften und vieles mehr getroffen werden.
Achtet darauf, bei Farben immer die global angelegten Variablen zu verwenden und nicht jedes mal wieder einen Farb-Code einzufügen
Sind Elemente immer gleich gestyled oder haben über die gesamte Webseite hinweg immer die gleichen Eigenschaften (z.B. Überschrift hat unten immer 20px Abstand), kann das über eigene CSS-Klassen und manuellen CSS-Code über den Theme-Customizer ergänzt werden → manchmal muss hier zum Überschreiben der Styles mit „!important“ gearbeitet werden.
Wichtigster Tipp
Einfach ausprobieren! 🙂 Am besten, überall mal hinein klicken, alle Einstellungen durchprobieren und kennen lernen und das herausfinden, was am relevantesten für dein Projekt ist.
Aufgabe
bis zum nächsten Mal
(Wenn benötigt) Page Builder recherchieren und passendsten installieren
Evtl. weitere wichtige / benötigte Plugins installieren
Einstellungen im Backend tätigen und alle relevanten Seiten und Menüs anlegen
Header und Footer über die Theme-Einstellungen gestalten
