Deine Website besteht aus den verschiedensten Modulen, Strukturen, Widgets und natürlich ganz allgemein den Seiten bzw. Unterseiten. Diese Seiten kannst du mit Elementor* ganz einfach nach deinen Wünschen gestalten.
Einige Dinge, wie z.B. das Design, Schriftarten, Header und Footer werden in der Regel einmal eingestellt und immer wieder verwendet. Diese Einstellungen nimmst du also global vor. Das bedeutet, dass du es einmal, meistens zu Beginn der Erstellung deiner Seite, festlegst und auf diese Einstellungen immer wieder zugreifen kannst. Wenn du dann eine Änderung an zum Beispiel der Farbe deiner Website vornehmen möchtest, musst du nicht jede Seite einzeln neu bearbeiten und aktualisieren, sondern nur in die globalen Einstellungen gehen, die gewählte Farbe des Hintergrundes ändern und WordPress bzw. Elementor ändern dir die Farbeinstellungen automatisch auf allen Seiten, die du global mit eingebunden hast in die Farbauswahl.
Im folgenden zeige ich dir, wie du einige dieser globalen Einstellungen auf Elementor umsetzt. Zu den aufgeführten Themen zählen das Logo, die Erstellung des Headers und Footers. Da Widgets keine globalen Einstellungen per se sind, auf diese aber zugreifen, verlinke ich die hier meine allround Erklärung rund um verschiedene Widgets.
Logo Global einbinden
Schritt 1: Öffne die Allgemeinen Einstellungen indem du auf die drei Striche oben links im Elementor Bearbeitungsbalken klickst.
Schritt 2: Als nächstes muss du die Website-Einstellungen öffnen. Es ist der oberste Begriff und die erste Möglichkeit, die man anklicken kann.
Schritt 3: In den Website-Einstellungen legst du verschiedenste globale Einstellungen, z.B. die Farben und die Schriftarten, deiner Seite fest. Um das Logo global festzulegen musst du auf die Website-Informationen.
Schritt 4: Du befindest dich nun auf den Website-Einstellungen in dem Unterpunkt Website-Informationen. Hier kannst du den Titel, die Beschreibung und eben auch das Logo, und ein Favicon für global für die Website festlegen. Um das Logo festzulegen, klicke einfach auf das Bild Symbol unter „Logo der Website“. Darüber kannst du nun ein Logo aus deiner Website-Mediathek oder aus deinen Dateien hochladen und als Logo einspeichern.
Schritt 5: Ganz wichtig wenn du Änderungen vornimmst, immer speichern!
Elementor Header
Um deinen Elementor Header und Footer zu erstellen, musst du auf dem WordPress Dashboard über das Menü auf der linken Seite deines Bildschirms auf Templates und dann auf Theme Builder gehen. Der Link führt dich dann auf eine eigene Unterseite auf dem du globale Templates bzw. vorlagen erstellen, bearbeiten und festlegen kannst.
Klicke in dem Theme Builder rechts auf das weiß-blaue Plus Icon („Add New“) und starte so die Erstellung eines neuen Templates. Wähle nun Header aus. Als nächstes haben Elementor Pro Nutzer die Möglichkeit eine Header Vorlage aus der Theme Builder Bibliothek zu wählen, die dann nur noch inhaltlich und farblich bearbeitet werden muss. Da dies relativ selbsterklärend ist, wähle ich keine Vorlage und zeige dir, wie du nur in wenigen Schritten ganz einfach deinen persönlichen Header erstellen kannst.
Zuerst wähle ich eine Struktur. In der Regel bestehen Website-Header aus Logo und Drop-Down Menü. Da wir auf all unseren Seiten immer mit möglichst wenig nicht verwendetet Strukturflächen arbeiten, wähle ich also eine Struktur, die nur zwei Felder hat, ganz meinem Belieben entsprechend.
Da ich meine Farben, das Logo und die Schriftarten bereits global bestimmt habe, muss ich mir darum erst einmal keine Gedanken mehr machen. Solltest du dies noch nicht getan haben, dann schau hier, wie du mit globalen Einstellungen was Farbe und Schriftarten angeht fortfährst. Die Erklärung wie du dein Logo global festlegst, findest du am Anfang dieses Beitrages.
Wenn du deine Struktur gewählt hast, findest du diese ungefähr so auf deiner Seite vor:
Header: Logo
Nun füllen wir diese Felder mit den Widgets, die wir wollen. Ich wähle dafür ganz Standardgemäß links das Logo und verlinke es im Zuge mit der Startseite, die ich bereits erstellt habe. Links möchte ich ein Menü einsetzen, dass meine Unterseiten kategorial aufzeigt. Ich nehme auch hier ein Menü, dass ich bereits erstellt habe. Wie du dein Menü erstellst, findest du weiter unten in diesem Artikel.
Ich suche also mein erstes Widget aus den Elementor Widgets raus und ziehe es per Drag & Drop in das gewünschte Strukturfeld.
Wie du siehst hat Elementor mein global Voreingestelltes Logo direkt eingefügt, aber die Größe stimmt nicht mit meinen Erwartungen überein. Das bedeutet, dass ich das Logo Widget nun bearbeiten muss. Dafür klicke ich auf das Strukturfeld, dass ich bearbeiten will und dann auf den kleinen blauen Stift. Dies öffnet die Widget-Einstellungen dieses speziellen Widgets. Nun kann ich meine Änderungen vornehmen. Und nicht vergessen: wenn du Einstellungen oder Änderungen vornimmst, immer speichern!
Die Widget-Einstellungen bestehen, bis auf ein paar wenigen Ausnahmen, in der Regel immer aus inhaltlichen, Stil- und erweiterten Einstellungen, die du als Nutzer vornehmen kannst. So kannst du jedes Widget in seiner Struktur und Form nach Belieben gestalten und ändern.
Auf dem Bild rechts siehst du die Voreinstellungen des Widgets im inhaltlichen Bereich. Hier stelle ich bis auf weiteres erst einmal nichts um.
Ich nehme meine Einstellungen in diesem Fall auf der Stielebene vor. Merke dir aber auch hier: Farben, Logo und Schriftarten werden in der Regel auf der globalen Ebene bearbeitet. Führe hier also möglichst keine einzelnen Änderungen durch. Diese Anleitung fungiert lediglich als Anleitung, was die Funktionen der Widget-Einstellungen angeht.
Links siehst du also die Voreinstellungen des Widgets und rechts meine vorgenommenen Änderungen. Ob du die Breitenänderung und co. über die %, Px oder VW vornimmst, liegt ganz bei dir. Empfehlen würde ich dir aber die Einstellungen über die Px, also Pixel vorzunehmen.
Da Einstellungen rund um Logo und Co., wie bereits erwähnt, möglichst über die globalen Einstellungen vorgenommen werden sollten, nehme ich keine weiteren Änderungen in den erweiterten Widget-Einstellungen vor. Dir ist es aber völlig deinen Wünschen und deiner Kreativität freigestellt alles zu ändern was du möchtest.
Header: Menü
Als nächstes wähle ich das Widget „Nav Menü“. Hier kann ich entscheiden, ob ich ein Drop-Down Menü möchte, oder ein ganz einfaches Menü. Diese Einstellungen nehme ich ebenfalls in den Widget-Einstellungen vor. Das Widget selbst gibt mir lediglich die Möglichkeit auf vorgefertigte Menüs auf meiner Website zuzugreifen und diese visuell anzuzeigen.
Voreingestellt sieht das Nav Menü Widget volgendermaßen aus:
Hier kannst du nun wählen, welches Menü du anzeigen möchtest. In meinem Fall habe ich das Hauptmenü meiner erstellten Website gewählt. Außerdem entscheidest du bei dem Stichwort Layout, welche Form von Menü du haben möchtest:
Ich möchte nun aber, dass das Menü in dem Strukturfeld rechtsbündig angezeigt wird. Daher nehme ich bei dem Punkt Align folgende Einstellung vor:
Nun bin ich vom reinen Aussehen des Headers schon sehr überzeugt.
Was mich als letztes nun noch stört, ist die Farbe der Schrift, wenn ich über die Menüpunkte hover.
Die globalen Einstellungen der Farben habe ich bereits vorgenommen und die Farben somit bereits global festgelegt. Ich nutze nun also einer dieser von mir festgelegten Farben und ändere diese im Stilbereich des Nav Menü Widgets.
Dafür gehe ich im Stilbereich im Untermenü Main Menu auf den Punkt Hover und dann auf Text Color. Hier gehe ich auf den Globus, denn dort liegen die global gespeicherten Farben. Dann wähle ich meine präferierte Farbe aus und speichere das ganze einmal.
Ich persönlich bin nun zufrieden mit meinem Header. Widget-technisch habe ich nur das nötigste gewählt. Links das Website-Logo und rechts ein Menü, dass horizontal angezeigt wird. Grundlegend kannst du aber auch hier deiner Kreativität freien Lauf lassen. Wenn du eine Anleitung zu den anderen Widgets suchst, dann schau doch mal in meinen Beitrag zum Thema Elementor Widgets – 62 Widgets exklusiv auf einen Blick. Dort habe ich die meistgenutzten Widgets aufgezeigt, Grundlegende sowie Pro Widgets.
Elementor Footer
Um deinen Elementor Header und Footer zu erstellen, musst du auf dem WordPress Dashboard über das Menü auf der linken Seite deines Bildschirms auf Templates und dann auf Theme Builder gehen. Gehe hier genauso vor, wie oben im Header beschrieben.
Ein Footer besteht in der Regel aus den wichtigsten Produkten, Serviceangeboten und Unternehmens- bzw. Kontaktdaten, die deine Website bzw. dein Unternehmen anbietet. Ganz wichtig ist aber, dass du in jedem Fall hier eine Verlinkung zu deinem Impressum, deiner Datenschutzerklärung und deinen AGBs hast. Dies ist in Deutschland pflicht. Ansonsten entspricht deine Seite nicht den DSGVO-Verordnungen und es könnten rechtliche Schritte gegen dich vorgenommen werden. Viele Unternehmen haben auch hier noch einmal ihr Logo. Wie du ein Menü erstellst, erfährst du unten im Beitrag.
Auch hier gehst du wieder vor wie beim Header. Du wählst im Theme Builder das weiß-blaue Plus Icon („Add New“) und starte so die Erstellung eines neuen Templates. Wähle nun Footer aus. Als nächstes kannst du, wenn du Elementor Pro hast, auch hier wieder eine Vorlage aus der Elementor Theme Builder Bibliothek wählen, ich wähle wieder keine Vorlage und erstelle meinen Footer komplett selbst, so wie Nutzer ohne Elementor Pro.
Wie beim Header wird nun als erstes wieder eine Struktur gewählt. Ich habe entschieden, dass ich mein Logo und 3 kurze Menüs im Footer anlegen möchte. Dementsprechend wähle ich eine Strukturvorlage mit 4 Strukturfeldern.
Nun muss ich mich entscheiden, wie ich meine gewählten Widgets anordnen möchte. Ich halte mich nun an das sogenannte Best-Practice und setze mein Logo nach links und füge meine drei Menüs anschließend in den rechten drei Spalten ein.
Da der Elementor Page Builder auf dem Drag & Drop Prinzip baut, ziehst du das gewünschte Widget einfach in das Strukturfeld deiner Wahl.
Nun siehst du schon, dass mein Logo direkt eingefügt wurde. Dies liegt daran, dass ich es bereits im Voraus global eingebunden habe. Damit kann Elementor direkt auf diese Daten zugreifen und die Änderungen vornehmen. Wie das funktioniert, siehst du oben im Beitrag. Mir gefällt nun aber die Darstellung des Logos nicht. Grundsätzlich werden alle Änderungen an einem global festgelegten Information auch global wieder vorgenommen, damit du es nicht immer einzeln aktualisieren musst, in diesem Fall ist es aber die Widget-Struktur, die angepasst werden muss, weswegen ich meine Änderungen in den Widget-Einstellungen selbst vornehme.
Im Inhaltsbereich ändere ich vorerst nichts. Hier wählst du zum Beispiel die Bildgröße, die Ausrichtung, mögliche Bildunterschriften oder Links.
Links siehst du die Voreinstellungen des Widgets im Stilbereich. Ich ändere hier nur die Widget-Breite, bleibe aber in der gewählten Struktur. Wenn du die Struktur betreffend Änderungen vornehmen möchtest, musst du entweder in die erweiterten Einstellungen des Widgets gehen, oder ganz allgemein in die Einstellungen des betreffenden Strukturfeldes.
Ich bin nun aber mit der Darstellung meines Elementor Site-Logo Widgets zufrieden und gehe daher zum nächsten Widget über.
Für die restlichen drei Strukturfelder ist die Vorgehensweise gleich. Der einzige Unterschied ist das gewählte Menü innerhalb der Widget-Einstellungen im Bereich Inhalt.
Alles in allem sieht mein Footer nun folgendermaßen aus:
Du wirst diese Struktur wahrscheinlich auf vielen Websites wiederfinden. Ein Beispiel ist hier auch unsere WPspace Website, die ich als Vorlage und Best Practice gewählt habe.
Wenn du Fragen zu anderen Widgets hast, dann schau dir doch auch meinen Artikel zu weiteren Elementor Widgets an.
Elementor Menü erstellen
Sowohl im Header, als auch im Footer und wahlweise auch im Hauptbereich deiner Website brauchst du im Regelfall mindestens ein Menü. Diese werden auf dem WordPress Dashboard selbst erstellt, da Elementor nur für die Bearbeitung der Seiten selbst zuständig ist. Die reine Aufteilung der Seiten in ein Menü funktioniert folgendermaßen:
Zuerst musst du auf den Bereich, indem du deine Menüs erstellst. Dafür gehst du in dem WordPress Menü im Dashboard auf der linken Seite deines Bildschirms auf Design und weiter auf Menüs.
Nun öffnet sich folgende Seite:
Da ich bereits Menüs habe, gehe ich auf den Link „neues Menü erstellen“. Wenn du noch keines hast, dann gehe einfach auf „Menü erstellen“.
Als nächstes füllst du deine Daten beim Menü-Struktur Teil aus. Du gibst deinem Menü einen Namen und kreuzt an, wofür dieses Menü genutzt werden soll. Danach klickst du rechts auf Menü erstellen.
Wenn du diese Schritte abgeschlossen hast, dann wird der der linke, ausgebleichte Abschnitt mit dem Titel „Menüeinträge hinzufügen“ ganz sichtbar.
Hier wählst du nun die Seiten aus, die dein Menü beinhalten soll. Du hast die Möglichkeit auf bestehende Seiten zuzugreifen und diese einfach anzuklicken oder zu suchen. Im Anschluss musst du immer auf den Button „Zum Menü hinzufügen“ klicken und zum Schluss alles speichern.
Du hast auch die Möglichkeit auf Beiträge, Individuelle Links oder Kategorien zuzugreifen. Ich zu meinem Teil habe erst einen Beitrag erstellt. Diesen könnte ich aber auch in meinem Menü verlinken. Auch hier wieder „Zum Menü hinzufügen“ und speichern.
Ebenso besteht die Möglichkeit nicht nur individuelle Links einzufügen, sondern auch Platzhalter für zukünftige Seiten zu erstellen. Dafür fügst du bei der URL einfach ein „#“ ein. Dieses findest du auf deiner Tastatur links neben der Entertaste. Als Link-Text gibst du dann den Titel deiner zukünftigen Seite an und fügst das ganze dann über den Button zum Menü hinzu.
Du siehst auch immer rechts von den Titeln die Kategorie, über die du die Menüeinträge hinzugefügt hast. Auch kannst du sie wenn du per Drag & Drop an die gewünschte Stelle verschieben und wenn du rechts auf die kleinen Pfeile klickst die Links auch noch weiter bearbeiten.
Und niemals vergessen: Am Ende immer speichern!
Den Button dazu findest du unten rechts.
In Zukunft findest du deine verschiedenen Menüs über das Drop Down Menü auf der oberen Hälfte der Seite.
