Elementor Header

Header mit Elementor erstellen

tl;dr: Mit Elementor einen Header zu erstellen gehört zu den grundlegensten Aufgaben bei der Webseitengestaltung. Wie man das responsive unter Beachtung der Anforderungen für Mobile Geräte umsetzt erfährst du in diesem Beitrag,

Als wichtigstes Gestaltungselement verdient die Kopfzeile eine Webseite die größte Aufmerksamkeit. Webuser erwarten im Header Logo und Menu, als Gestalter will man bereits hier alle wesentlichen Elemente der CI wie Farben und Schriften unterbringen. Die Aufgabe sieht also so aus:

Scribble Desktop Header
Am Desktop sollen ein Top-Bar und ein Menu sichtbar sein.

Während am Desktop (oben) alle Elemente zu sehen sund bleibt am Handy (rechts) nur wenig über. Im Header für den Desktop sollen sein:

  1. Das Logo
  2. Des Menü
  3. Eine Suchfunktion
  4. Ein Topbar

In der Mobilen Ansicht bleiben über:

  1. Das Logo
  2. Ein Menülink
Header Mobile
Am Handy soll nur das Logo und ein Hamburger Menu zu sehen sein.

Damit man die Vorteile von Elementor in einer Kopfzeile nutzen kann benötigt man die Elementor Pro-Version.  Sie enthält den Theme Builder der bei der Organisation aller Bestandteile einer Webseite hilft. 

Als erstes wechselt man also in den Theme Builder und erstellt (Blaues +) ein neues Template für den Header. Die Vorschläge aus der Bibliothek werden ignoriert, ein leeres Template wird erstellt.

Zuerst erstellen wir den Top-Bar. Dazu erstellen wir einen neuen Abschnitt mit 3 Spalten. 

Kopfzeile erstellen
Im Theme Builder erstellt man einen leeren Header.
3 Spaltige Struktur
Für den Topbar erstellen wir einen 3spaltige Struktur.

Schon zuvor wurden die Einstellungen für die Webseite vorgenommen. Die Farben und Schriften können also sehr einfach angewandt werden. Wir gestalten dem Abschnitt mit den 3 Spalten indem wir eine Hintergrundfarbe einstellen. In jede Spalte kommt ein Text, wobei in der ersten Spalte der Stil links, in der 2. Spalte zentriert und in der 3 Spalte rechts ausgerichtet wird. 
Durch diese Textausrichtung funktioniert die Gestaltung auch dann, wenn nicht die volle Bildschirmbreite zur Verfügung steht (zB. bei Tablets) gut, siehe auch Layout und Responsive Design mit Elementor.  

Für eine elegantere Gestaltung wählen wir für den Abschnitt bei Spaltenabstand: keine Lücke, bei Höhe stellen wir Mind. Höhe und diese auf zB 50 px ein, Spaltenposition und Vertikale Ausrichtung unten

 

 

Topbar ausgerichtet.
Mit den hier angeführten Einstellungen erhalten wir mittigen Text der responsive funktioniert.

Der zweite Headerabschnitt beinhaltet Logo, Navigation und Suchicon. Wieder wird eine 3spaltige Struktur verwendet. Dort binden wir die Widgets Sitelogo, Navigationsmenu und Suchformular ein. Anpassungen für Spaltenbreiten, Ausrichtungen etc. sind schnell erledigt, das folgende Video demonstriert ein paar Möglichkeiten.

Heder in Elementor erstellen
Video abspielen

Viele Dinge haben die User gelernt und erwarten auch, dass sie funktionieren. ZB. daß das Logo immer mit der Startseite verknüpft ist. Dies ersetzt immer mehr den “Home”-Button in der Navigationsleiste. 

Header Bedinugng
Beim ersten Speichern geben wir die Bedingung an, wann der Header gezeigt werden soll.

Über die Vorschau kann man nun den Header überprüfen. Anpassungen sind jederzeit möglich, dazu gibt es den Theme-Builder ja schliesslich.

Header fertig
Der fertige Header in der Elementor-Vorschau.

Anpassungen für die Anzeige am Handy

Der Designweg über Desktop hin zur Mobilversion (und nicht der umgekehrte, also mobile first) ist unter Webdesignern nicht unüblich. Es ist leichter, Dinge wegzulassen als optional hinzuzufügen. Ob man sich die Mühe macht extra eine Tabletversion zu gestalten liegt an den Ressourcen: bei fast allen Homepages sind die Zugriffszahlen von Tablets sehr gering. Dazu kommt noch, dass moderne Tablets Desktopauflösungen anbieten und gar nicht mehr als solche erkannt werden. 
Die Empfehlung lautet also: das Design für Desktop und Handy optimieren, die Tabletauflösung nur kontrollieren und ev. auftretende Fehler ausbessern.

Elementor macht es uns im responsive Design recht einfach: im Reiter Erweitert gibt es einen Tab Responsiv. Für das Beispiel hier, blenden wir den Top Bar so aus. 

Abschnitt markieren > Erweitert > Responsive > Sichtbarkeit: auf Smartphones verbergen

 

 

Die selbe Technik wenden wir auch im zweiten Abschnitt an, nur dass wir nicht den gesamten Abschnitt, sondern nur die Dritte Spalte ausblenden. Die Suchfunktion am Handy stört mehr als sie helfen würde. Also weg damit. 

Spalten ausblenden
Auch Spalten lassen sich über die Einstellungen im Responsive Menu ausblenden.

Die verbleibenden 2 Spalten werden nun angepasst. Die erste Spalte wird auf 40 % Breite gesetzt, die zweite auf 60 %. Das kleine Icon neben der Spaltenbreite zeigt, dass diese Angaben nur für die Breite am Mobilgerät gelten.

Das Widget Navigationsmenü bietet von selbst ein Hamburgermenü an, wenn man in den Handymodus wechselt. Hier kann man die Iconfarben, Ausrichtung und das aufgeklappte Menü gestalten.

werkform hilft
werkform hilft bei der Arbeit mit Elementor - auch bei schwierigeren Aufgaben. Kontaktiere mich wenn du professionelle Hilfe brauchst.
In eigener Sache

Sticky - Header oben halten

Manchmal kann es vorkommen, dass das Design einen sog. Sticky Header vorgibt. Dh. sobald der User auf der Seite scrollt, soll der Header am oberen Fensterrand festkleben, der Inhalt der Seite scrollt darunter durch. Der Vorteil so einer Gestaltung liegt darin, dass Logo, Menü und damit auch das CI immer sichtbar bleibt. Der Nachteil ist, dass dadurch Bildschirmplatz belegt wird der nicht für andere Inhalte wie Text, Bilder oder Videos zur Verfügung steht.

Ein Sticky Header ist also besonders für die Desktop-Version eines Webdesigns geeignet. 

Abschnitt markieren >Erweitert > Bewegungseffekte > Sticky Oben 

Das Video zeigt wie man das aktiviert bzw. wie sich der Header ab sofort beim Scrollen verhält.

Header Stick ein
Video abspielen

Shrinking Sticky - die Optimale Umsetzung

Manchmal kann es sinnvoll sein, einen Header zwar sticky – also oben fix – zu machen, aber gleichzeitig das aussehen dieses headers ein wenig zu ändern. Also zB. die Höhe des Headers zu reduzieren. So ein Shrinking Header ist ein oft sinnvoller Kompromiss. 

Das obige Beispiel zeigt: der Logobereich wird schmäler, ausserdem ändert er seine Farbe. Umgesetzt wird das über CSS (mehr über CSS mit Elementor hier). 

Folgende CSS wurden im Beispiel angewandt:

selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important }

selector{ transition: background-color 4s ease !important; }

selector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }

selector > .elementor-container{ transition: min-height 1s ease !important; }

Eingebaut wird der CSS-Code in jenem Abschnitt der verändert werden soll. Es kommt hier der magische selector zur Anwendung. Das bedeute soviel wie:

„Nimm dieses aktuelle Stück HTML und ändere die Hintergrundfarbe, animiere das und setze die Höhe auf eine Mindesthöhe”.

Der shrinking sticky CSS-Code im Elementor Interface.

Fazit

Die technische Umsetzung eines Headers in Elementor ist also nicht sehr kompliziert. Über den Theme-Builder können auch mehrere Header (Stichwort Bedingungen) innerhalb einer Website einfach umgesetzt werden. Die Umfangreiche Bibliothek ist ein guter Ausgangspunkt bei der Gestaltung, es ist aber auch nicht sehr komplziert eine Kopfzeile “built from scratch”, also von Grund auf neu zu bauen. 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.