Bessere Footer mit Elementor

Elementor Pro Footer

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.

Footer sind oft das Stiefkind einer Webseitengestaltung. Anscheinend ist das kreative Potential schon erschöpft wenn es um den Footer geht oder die Fantasie reicht einfach nicht für eine ordentliche Gestaltung aus. Natürlich sind Fusszeilen nicht unbedingt das spannensten Element einer Webseitengestaltung. Wie bei einem Bild, das erst durch einen Rahmen besonders gut wirkt, ist auch bei einer Webseite der Fussbereich besonders für die unbewusste Wahrnehmung durch den User. Vor allem bei langen Seiten, wie sie ja am Handy ganz automatisch durch das responsive Design entstehen, bietet der Footer die Möglichkeit die CI-Elemente einer Webpräsenz zu wiederholen und dem User zu zeigen, wo er denn überhaupt ist. 

Gestaltung des Fußbereiches

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

Farben und Hintergund

Um zu signalisieren, dass es jetzt beim Scrollen hier “aus” ist bietet es sich an, die Farben dünkler zu wählen als beim Content darüber, also beispielsweise bei einem weißen Hintergrund im Inhaltsbereich einen grauen für den großen Fußbereich und dann einen schwarzen Hintergrund (oder auch die Farbe des Headers) für die Fußzeile. Beim Scrollen weiß der User dann, dass er am Ende angekommen ist.

Elementor Footer
Ein starker Kontrast signalisiert deutlich: hier ist die Seite zu Ende.

Arbeiten mit Trennlinen

Elementor Pro bietet hier mit dem Einsatz von SVG-Grafiken wunderbare Abwechselungen, um nicht immer nur einfache Farbflächen andeinandergreifen zu lassen.

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 Trennline Oben bearbeiten indem man zB. Wellen Pinselform auswählt. Bei Farbe ist jene Farbe des Contentbereiches darüber zu wählen. Durch einfaches verschieben der Regler Breite und Höhe lassen sich die Wellen wunderbar anpassen.

Elementor Trennlinien
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 Überlagerungen mit einem PNG-File mit Semitransparenzen aus eine harten Kante ein ganz weicher, gemusterter oder auch 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

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

Sticky Footer
Wer seinen Footerabschnitt festsetzen will muss unter den Erweiterten Einstellungen Sticky auswählen.

Inhalte des Fußbereiches

Mit ein Grund, warum in die Gestaltung des Fußbereiches so wenig Zeit und Muße investiert ist, dass es sich „von selbst” ergibt, was man hier unterbringen muß. So sind die notwenigen aber eigentlich störenden Links zu Impressum und Datenschutzerklärung Klassiker für den Bereich. Aber natürlich läßt sich der Bereich auch hervorragend dafür nutzen, eine Call2Action unterzubringen um vielleicht am Ende der Seite eine Convertion zu erzielen. Schauen wir uns ein paar sinnvolle Elemente näher an.

Elementor Navigationsmenu
Das Icon verrät um welches Navigationsmenu-Widget es sich handelt. Links WordPress, rechts Elementor.
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, sie haben vielleicht den Namen der Webseite bei Google eingegeben und sind dann auf der Trefferliste ganz oben auf eine der hoffentlich gut gelisteten Seiten der Webseite gekommen. Diese User wissen ganz genau was sie wollen – Dich kontaktieren! Daher ist es eine sehr gute Idee, die von Dir bevorzugte Kontaktmöglichkeit auf jeder Seite im Footer anzubieten. Wenn es ein Telefonkontakt oder eine E-Mail-Adresse ist gleich mit Link hinterlegt damit mit nur einem Klick die Kommunikation beginnen kann. 

Dh. wenn wir das Widget Iconbox einfügen können wir den Link auf die Telefonnummer setzen. Ein entsprechendes Icon auswählen, als Titel die Telefonnummer in beliebiger schreibweise angeben. Unter Link dann die Telefonnummer in der Form: tel://+43123456789 angeben, als mit tel:// anfangen, dann die internationale Vorwahl mit einem +, danach die Nummer. Alles ohne Abstände.  Wer jetzt darauf klickt bekommt je nach Gerät gleich eine Verbindung oder zumindest eine Warnung, ob man denn die App starten will die am Gerät für diese Art Links vorgesehen ist (als am Apple zB facetime).

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

Der Fußbereich eignet sich auch sehr gut, um Convertions 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. Wenn Du auf dieser Seite runter scrollst siehst du ein Beispiel dafür: mein Ziel ist, die Webseitenbesucher dazu zu bekommen über den Inhalt dieser Webseite ihre eigenen Möglichkeiten zu reflektieren – und mich dann als friendly expert in Erwägung zu ziehen.  Oder auch: red’ ma drüber – wie man im Osten Österreichs gerne sagt. Sei kreativ! Und sei ehrlich. Deine Besucher werden ein gutes Angebot schätzen.

Noch kein Kommentar, Füge deine Stimme unten hinzu!


Kommentar hinzufügen

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.