Bessere Footer mit Elementor

tl;dr: Fußzeilen sind oft das Stiefkind einer Webseite. Wie man mit Elementor Pro einen ordentlichen Fußbereich gestaltet und was man in einem Footer finden sollte findest Du in diesem Artikel.

Gestaltung des Fußbereiches
Inhalte des Fußbereiches

Gestaltung des Fußbereiches

Footer sind oft das Stiefkind einer Webseitengestaltung. Anscheinend ist das kreative Potential schon erschöpft wenn es um den Footer geht. Natürlich sind Fußzeilen nicht unbedingt das spannendste Element einer Webseitengestaltung.

Wie bei einem Bild, das erst durch einen Rahmen besonders gut wirkt, ist auch bei einer Webseite der Fußbereich besonders für die unbewusste Wahrnehmung durch den User wichtig. Vor allem bei langen Seiten bietet der Footer die Möglichkeit die CI-Elemente einer Webpräsenz zu wiederholen und dem User zu zeigen, wo er denn überhaupt ist.

Klassisch und auch sinnvoll ist es, wenn sich der Fußbereich über die gesamte Bildschirmbreite erstreckt und sich mindestens durch eine Linie, besser aber durch eine Flächenfarbe deutlich vom Inhaltsbereich der Seite unterscheidet. Die häufigste Gestaltungsform ist eine 2-zeilige, wobei die obere Zeile höher ist und mehr Inhalt aufnimmt und die untere Zeile wirklich nur mehr eine einzelne Fußzeile mit Copyrighthinweis und Links ist.

Farben und Hintergrund

Um zu signalisieren, dass es jetzt beim Scrollen hier "aus" ist bietet es sich an, die Farben dunkler zu wählen als beim Content darüber. Beim Scrollen weiß der User dann, dass er am Ende angekommen ist.

Arbeiten mit Trennlinien

Elementor Pro bietet hier mit dem Einsatz von SVG-Grafiken wunderbare Abwechslungen, um nicht immer nur einfache Farbflächen aneinander zu fügen.

Um eine kreativere Lösung zu finden muss man den Abschnitt des Fußbereiches im Elementor aktivieren, danach unter Stil > Trennlinie Form auswählen. Dort dann die Trennlinie Oben bearbeiten indem man zB. Wellen Pinselform auswählt. Bei Farbe ist jene Farbe des Contentbereiches darüber zu wählen.

Die Elementor Trennlinien bieten viel Gestaltungsspielraum und sind besonders für Footer ideal.

Anwenden einer Hintergrundüberlagerung

Sehr spannende Gestaltungen lassen sich auch mit der Anwendung von Hintergrundüberlagerungen erzielen. Bei einem farbigen oder Foto-Hintergrund kann zB. durch die Überlagerung mit einem PNG-File mit Semitransparenzen aus einer harten Kante ein ganz weicher, gemusterter oder abstrakt gestalteter Übergang geschaffen werden.

Hintergrundüberlagerung Elementor — Bei diesem Beispiel wird ein asymetrischer grün-rot-Verlauf mit einem Bild einer Früchtesammlung überlagert, wobei der Überblendmodus Sättigung verwendet wird.

Sticky Footer - Fußbereich immer unten stehen lassen

Um den Fußbereich oder die Fußzeile nun am Bildschirmende „festzukleben“ können wir sie „sticky“ setzen. Das geschieht unter Erweitert > Bewegungseffekte wo man dann sinnvoller weise unten wählt. Sehr praktisch sind auch die Optionen unter Sticky ein wo man festlegt, ob der Footer auf allen Geräten oder nur am Desktop und Tablet, nicht aber am Handy sticky ist.

Inhalte des Fußbereiches

Mit ein Grund, warum in die Gestaltung des Fußbereiches so wenig Zeit investiert wird, ist dass es sich „von selbst“ ergibt, was man hier unterbringen muss. So sind die notwendigen aber eigentlich störenden Links zu Impressum und Datenschutzerklärung Klassiker für den Bereich. Aber natürlich lässt sich der Bereich auch hervorragend dafür nutzen, eine Call2Action unterzubringen.

Menüs

WordPress hat ein hervorragendes Menu-Management. Es bietet sich dafür an, ein eigenes, vielleicht abgespecktes Menü extra für den Bereich anzulegen. Das ist über das WP-Dashboard Design > Menüs > erstelle ein neues Menü schnell erledigt. Eine Positionszuweisung entfällt, weil wir das Menü im Elementor über das Widget „Navigationsmenü“ einbauen. Vorsicht: es gibt 2 Widgets die so heissen: das WordPress-Menü und das Elementor-Menü. Zu unterscheiden durch das Icon.

Elementor Navigationsmenu — Das Icon verrät um welches Navigationsmenu-Widget es sich handelt. Links WordPress, rechts Elementor.

Logos

In vielen Templates taucht auch das Site-Logo im Fußbereich auf. Besser ist es jedoch, wichtige Logos wie zB. Zertifizierungslogos von ISO oder andere Grafiken unterzubringen, die eine Mitgliedschaft bei Vereinen oder Verbänden anzeigen.

Links

Wer einen besonders gefragten Blogbeitrag hat oder ein Produkt besonders hervorheben will kann das auch hier tun. Aufgrund des österreichischen Mediengesetzes das eine „leichte Auffindbarkeit“ vorschreibt ist es auf jeden Fall eine gute Idee, hier den Link zum Impressum unterzubringen.

Toplink - nach oben

Besonders auf langen Seiten ist es oft eine gute Idee einen Toplink einzusetzen. Dazu muss man im Template des Headers in den Erweiterten Einstellungen im obersten Abschnitt das Feld CSS ID auf „top“ setzen. Im Fußbereich wählt man das Widget „Icon“ mit einem Pfeil nach oben und setzt den Link auf #top. Alternativ dazu kann man auch das Widget Menüanker im Header einsetzen und verlinken.

Wer im Header einen die ccs ID "top" gesetzt hat kann hier den Link auf ”#top" eintragen.

Kontaktdaten

Viele der wiederkehrenden Besucher einer Webseite suchen eine Kontaktmöglichkeit. Daher ist es eine sehr gute Idee, die von Dir bevorzugte Kontaktmöglichkeit auf jeder Seite im Footer anzubieten — gleich mit Link hinterlegt damit mit nur einem Klick die Kommunikation beginnen kann.

Wenn wir das Widget Iconbox einfügen können wir den Link auf die Telefonnummer setzen. Als Titel die Telefonnummer angeben. Unter Link dann die Telefonnummer in der Form: tel://+43123456789 angeben — mit tel:// anfangen, dann die internationale Vorwahl mit einem +, danach die Nummer. Alles ohne Abstände.

Gleiches können wir auch für E-Mail machen, nur dass wir mailto://meine@adresse.tld beim Link eintragen. Der Link öffnet dann das Mailprogramm am jeweiligen Gerät.

iconbox Telefon Elementor — Das Widget Iconbox eignet sich gut dafür um mit nur einem Klick einen Anruf zu bekommen.

Call 2 Action - CTA

Der Fußbereich eignet sich auch sehr gut, um Conversions zu erreichen — also um einen Besucher dazu zu bekommen zB. einen Newsletter zu abonnieren oder einen weiterführenden Link zu einer Promotion- oder Kontaktseite zu klicken. Sei kreativ! Und sei ehrlich. Deine Besucher werden ein gutes Angebot schätzen.

Copyright mit Datum

Beinahe überall auf Webseiten zu finden ist der mit dem Sonderzeichen © versehene Copyright Hinweis. Mit Hilfe eines dynamischen Inhaltes lässt sich leicht ein solcher Hinweis erstellen, der das aktuelle Jahr anzeigt.

Veröffentlich am: 2. November 2019
Letztes Update am: 15. August 2026

3 Kommentare

Vera

Vor 5 Jahren Antworten

Super hilfreiche Artikel – ganz herzlichen Dank dafür!
Ich bin seit heute auf einer Unterseite stolze Besitzerin von Elementor Pro und deshalb sehr froh über deine detaillierten Anleitungen und Erklärungen!
Vielleicht kannst du mir ja bei einer Frage helfen:
Zuunterst im Footer ist ein weisser Streifen mit dem Link zum Datenschutz. Wie kann ich diesen Link und Bereich denn löschen?! Ich möchte den Link woanders einbinden.
herzlichen Dank
Vera
- A
  
  Harry Martin
  
  Vor 5 Jahren Antworten
  
  Hallo Vera!
  
  Du kannst auch beim Bearbeiten eines Footers den Navigator verwenden (links unten 2. Icon von links). Damit kannst du dir alle Bestandteile einer Seite oder eines Abschnittes genau auswählen. Also auch jenen Teil, der dich stört. Man kann innerhalb des Navigators Bestandteile verschieben oder auch löschen.
  Wenn der Streifen da nicht zu finden ist stammt er vermutlich aus dem Template des Themes. Dann muss man auf „Elementor Volle Breite“ in den Seiten-Einstellungen wechseln.
  Hoffe das hilft weiter!
  - Vera Marti
    
    Vor 5 Jahren Antworten
    
    Hallo Harry
    Danke für deine Antwort!
    Ich nutze das Hello Theme mit Child und versuche mal weiter. Im Moment ist es noch da.
    Sonst weiss ich jetzt ja, wo ich dich finde 🙂
    Vera