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,

Anforderungen an einen Header

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.

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.

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.

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. A

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). 

Die fogende Anleitung ist ein Exzerpt und stammt von Roy Eyal, das Original (in englisch) findest du hier.

  1. Der Header (also der gesamte Abschnitt) soll den HTML-Tag Header haben (im Theme Builder /Header so einstellen).
  2. Die Header-Section Min. Höhe auf 90 px einstellen
  3. Im Tab Erweitert die Klasse (class) eintragen: sticky-header
  4. Im Logo des Heades die Klasse eintragen: logo
  5. Bei den Bewegungseffekten des Headerabschnittes (Erweitert > Bewegungseffekte) einstellen: Sticky oben, Offset Effekte: 90 px. 
Nun muss der CSS-Code eingegeben werden, dies kann in den Website-Einstellungen unter Eigenes CSS erfolgen. 
header.sticky-header {
    --header-height: 90px;
    --opacity: 0.90;
    --shrink-me: 0.80;
    --sticky-background-color: #0e41e5;
    --transition: .3s ease-in-out;
    transition: background-color var(--transition),
                background-image var(--transition),
                backdrop-filter var(--transition),
                opacity var(--transition);
}
header.sticky-header.elementor-sticky--effects {
    background-color: var(--sticky-background-color) !important;
    background-image: none !important;
    opacity: var(--opacity) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
header.sticky-header > .elementor-container {
    transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
    min-height: calc(var(--header-height) * var(--shrink-me))!important;
    height: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
    transition: padding var(--transition);
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
    padding-bottom: 10px !important;
    padding-top: 10px !important;
}
header.sticky-header > .elementor-container .logo img {
    transition: max-width var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
    max-width: calc(100% * var(--shrink-me));
}

Dieser Code enthält 5 Variablen um das Design den eigenen Anforderungen anzupassen:

--header-height: 90px;

Die Höhe des Headers. Wenn die geändert werden solll dann im CSS-Code und in den Einstellungen des Headers selber.

--opacity: 0.90;
Die Deckkraft. 0 bedeutet komplete Transparent, 1 voll deckend. 0.5 würde also eine Deckung von 50% erzeugen,
--shrink-me: 0.80;
der Wert auf den der Header schrumpfen soll. 0.80 bedeutet 80 % der ursprünglichen Höhe. 0.66 würde also auf 2/3 verkleineren.
--sticky-background-color: #0e41e5;
die Farbe des Hintergrunds sobald der Header schrumpft. 
--transition: .3s ease-in-out;
Die Dauer und die Art der Animation. Werte 0 und 1 Sekunde sind möglich
Das Ganze funktioniert nur, wenn die Inhalte des Headers nicht zu hoch sind! 

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. 

Veröffentlicht am: 29. Oktober 2020
Letztes Update am: 25. Juli 2026

5 Kommentare

  • Claudia
    Vor 2 Jahren Antworten

    Servus,

    ich habe bereits eine bestehende Webseite, in der mir damals ein Teaser/ Subheadline von einer Webdesignerin eingebaut wurde (da ich das gerne wollte). In der Zeile über dem Header sind zwei Buttons verlinkt. Einmal ist ein Button mit Instagram verlinkt und ein Weiterer mit meinem Shop („Bestelle hier versandkostenfrei ab 75€“). Nun möchte ich eigentlich nur die Zahl „75€“ verändern.
    Kann aber leider weder den Header noch die Subheadline mit Elementor bearbeiten.
    Ich habe nicht die Pro Version von Elementor, hatte ich aber auch noch nie und konnte früher diese Zeilen beide bearbeiten.
    Gibt es denn eine Möglichkeit, die Subheadline im Text trotzdem zu bearbeiten, ohne, dass ich die Pro Version von Elementor kaufen müsste? Da ich ja ansonsten nichts anpassen muss.

    Vielen Dank und viele Grüße

    Claudia

    • A
      Harry Martin
      Vor 2 Jahren Antworten

      Hallo Claudia, deine Angaben helfen bei der Diagnose nur bedingt weiter, da nicht klar ist wie dieser Teaser eingebaut wurde. Wenn aber kein Elementor Pro verwendet wird kann es auch nicht notwendig sein, diesen für eine Änderung zu erwerben. Denn: die Pro-Features funktionieren nur bei aktiver Pro-Installation.
      Vielleicht wurde in anderes Plugin verwendet oder jemand hat mit ein paar Zeilen CSS den Teaser gebastelt. Um dies herauszufinden muss man sich als Administrator einloggen und das Ganze einmal im Backend anschauen. Du kannst auch versuchen in der Datenbank die Textzeile zu finden (zb: mit dem Plugin Better Search Replace), oder erst steht im „Eigenes CSS“ im Header… es gibt hier viele Möglichkeiten. Eine Änderung eines Textes kann nicht sehr aufwändig sein, lästig aber sehr wohl.

      • Claudia
        Vor 2 Jahren Antworten

        Danke schon einmal für deine schnelle Antwort! Ich werde das nocheinmal versuchen und dann hoffe ich, dass es klappt.

  • Wallenstein
    Vor 5 Jahren Antworten

    Hallo, alles sehr interessant!! Ich arbeite (bzw. versuche) mit Elementor Pro. Habe zwei Fragen

    * wie kann ich eine Landing Page so einbinden, dass sie beim aufrufen der Seite als erstes erscheint?
    * kann ich bei einem Header die Einstellung „alle Seiten“ ändern? oder muß ein neuer Header angelegt werden?

    für eine Antwort wäre ich Dankbar.

    Mit freundlichen Grüßen Lothar A.Wallenstein

    • A
      Harry Martin
      Vor 5 Jahren Antworten

      Hallo Lothar,

      Damit eine Seite als „Erste Seite“ erscheint musst du diese (zb) im Dashboard also „Homepage“ festlegen.
      Dashboard > Einstellungen > Lesen > Homepage (Einse statische Seite auswählen) …

      Du kannst die Bedingungen, wo ein Header angezeigt wird jederzeit ändern.
      Elementorpanel > ThemeBuilder > Header(Kopfzeile) bearbeiten. Neben dem „Speichern“-Button ist ein kleines Dreieck, dieses öffnet ein Popoup wo du die Bedingungen anzeigen kannst.
      Alternativ dazu kannst du den „neuen Theme Builder“ verwenden:
      Wenn du dort den Heade in der Vorschau siehst steht klein drunter „Edit Conditions“ – wie so oft vermutlich auch bei die auf engslish, obwohl der Rest auf deutsch ist. Viel Erfolg!

Hinterlasse deinen Kommentar