Monstroid2 Tutorial: Header und Footer mit Elementor anpassen

Olga Kulmann

vor 6 Jahren

Das Addon für WordPress Elementor bietet mehr Gestaltungsmöglichkeiten. Dieses Tutorial befasst sich mit der Anpassung vom Header und Footer im Monstroid2-Theme mit Hilfe von Elementor.

Bearbeitungsoberfläche aufrufen

Header- und Footer-Elemente anpassen

Design-Bibliothek nutzen

Unser kürzlich freigegebenes WordPress Theme Monstroid2 bringt umfangreiche Funktionen mit, die es ermöglichen, deine Website einmalig zu gestalten. Mit dem Elementor Page Builder gelingt es dir sehr einfach, am bestehenden Design zu feilen oder deine exklusive Ideen umzusetzen. In dieser Anleitung zeigen wir dir auf, wie du Header und Footer einrichten, Elemente anpassen und aktive Bedingungen verwalten kannst.

Bearbeitungsoberfläche aufrufen

Das Bearbeiten vom Header und Footer hat die gleiche Logik, deshalb zeigen wir diesen Vorgang am Beispiel eines Headers. Es gibt drei Möglichkeiten, den Header zu editieren.

#1

Gehe auf Dashboard → Monstroid2 → My Library.

Hier findest du alle Elemente, die im Monstroid2-Theme bearbeitet werden können. Wenn du mehrere WordPress Themes installiert hast, siehst du verschiedene Bereiche, wo du Abschnitte editieren kannst. Um einen bestimmten Teil des Themes zu sehen, klicke den Menüpunkt oben an. In unserem Fall ist es der Header.

Finde dann den Block "Header Elements" und klicke auf "Edit with Elementor".

#2

Verwende die Option "Edit with Elementor" in der Symbolleiste.

#3

Rufe eine beliebige Seite deiner Website mit dem Header im Elementor-Editor auf. Nachdem du diese geöffnet hast, siehst du einen Button zum Bearbeiten. Klicke darauf und das Elementor-Menü wird dadurch geöffnet.

Header- und Footer-Elemente anpassen

Nachdem du auf den Button "Edit Header" geklickt hast, gelangst du auf die Seite, wo du Änderungen vornehmen kannst - sowohl am Footer, als auch am Header. Dieses Prinzip gilt für jeden anderen Abschnitt, der sich mit dem Elementor Builder bearbeiten lässt. Du möchtest beispielsweise dein Logo ändern. Dafür sollst du es anklicken, dein neues Logo einfügen und Elementor-Einstellungen links anpassen.

Gehe dann zu Advanced settings und lege den Außenabstand (margins) und den Innenabstand (paddings) usw. fest:

Es ist ziemlich einfach, jedes Element im Header zu ändern.

Design-Bibliothek nutzen

Mit dieser Option kannst du deinen Header völlig ändern. Dabei musst du nicht ein neues Element von Null auf erstellen. Gehe zur Bearbeitungsseite für den Header, die am Anfang des Beitrags steht, lösche den vorherigen Header und klicke auf den Magic button.

Beim Klicken auf den Magic button wirst du auf die Bibliothek mit vorgefertigten Seiten und Abschnitten geführt, die in Skins von Monstroid2 verfügbar sind. Die Sammlung von Skins wird wöchentlich erweitert. Außer Seiten und Abschnitten erhältst du einen Zugriff zu Headers und Footers von allen Skins, die im Monstroid2-Paket enthalten sind.

Du kannst ein beliebiges Element wählen. Sortiere alle Header nach Kategorien und passe sie wie du willst an.

Wähle einen der Header. Du kannst dir jeden Header in der Vorschau ansehen, bevor du ihn in die Seite einfügst. Klicke einfach auf das Icon mit dem Pluszeichen.

Wenn du möchtest, dass dein Header genauso wie in der Vorschau aussieht, dann klicke auf den Button Insert.

Jetzt hast du einen fertigen Header auf der Seite, und du kannst jedes einzelne Element des Headers ändern: Farbe, Schriftstil, Logo usw.

Aktive Bedingungen verwalten

Jetzt gehen wir genauer darauf ein, wie man Elementen eine bestimmte Position zuweisen und bestimmte Bedingungen auf Header-und Footer-Elemente anwenden kann.

Gehe zum Dashboard → Monstroid2 → My Library.

Das sind Footer- und Header-Elemente, die du auf deiner Website einsetzen kannst. In der vierten Spalte wird angezeigt, wo diese Elemente platziert sind: websiteübergreifend oder nur auf einzelnen Seiten. Die gesamte Website bedeutet, dass dieses Element auf jeder Seite eingeblendet werden kann, wenn keine anderen spezifischen Bedingungen zu erfüllen sind.

Zum Beispiel gibt es einen Header nur für die Home-Seite, d.h. er kann nur auf dieser Seite angezeigt werden. Alle anderen Seiten ohne besondere Bedingungen haben einen Header für die gesamte Website.

Um aktive Bedingungen im Header oder Footer zu verwalten, klicke auf den Button Edit with Elementor.

In diesem Beispiel ändern wir die aktiven Bedingungen für den Footer. Um die Einstellungen zu öffnen, klicke auf das Icon mit dem Zahnrad im unteren Teil des Elementor-Menüs.

Hier findest du globale Einstellungen (General settings) und Anzeigebedingungen (display conditions) für diesen Footer. Gehe zum Conditions-Tab und lege eine aktive Bedingung in einem Dropdown-Menü fest.

Wenn du möchtest, dass dieser Footer auf jeder Seite aktiv ist, dann wähle “Entire site”. Um gewünschte Seiten hinzuzufügen, wähle “Singular” und lege eine Seite für diesen Footer fest.