Entdecke, wie du die Fußzeile ganz oben auf deine To-Do-Liste setzen kannst, um die Gestaltung einer Website zu vereinfachen. Als Webdesigner verbringen wir so viel Zeit auf der Suche nach dem perfekten Gleichgewicht zwischen Benutzerfreundlichkeit und Design im oberen Bereich der Website.
Aber was, tust du, wenn du mit deinem „above the Fold Design“ oder „Hero Bereich Design“ nicht weiterkommst? Ich kenne das, und ich habe mir einen Hack ausgedacht, um dein Design in Schwung zu bringen – fang ganz unten an. Siehe da, die mächtige Fußzeile. Obwohl sie sich am Ende deiner Seite befindet, manchmal Tausende von Pixeln außer Sichtweite, ist die Fußzeile nicht das Ende deiner Benutzererfahrung. Es ist deine Chance, einen Eindruck zu hinterlassen.
In der Vergangenheit waren Fußzeilen Abladeplätze für diverse Links, aber eine solide Fußzeile ist ein Tor zu weiterem Engagement. Er kann die Geschichte einer Marke erzählen, Vertrauen in die Marke schaffen und oft den Unterschied ausmachen, ob Nutzer auf Ihre CTAs reagieren oder tiefer in deine Website eintauchen. Ein guter Footer enthält gut gestaltete und sorgfältig durchdachte Komponenten, und wenn er richtig gestaltet ist, kann er eine solide Grundlage und Hierarchie bilden, auf der der Rest deiner Website aufbauen kann. Benutzer suchen nach Fußzeilen, und keine Fußzeile ist zu weit weg. Hier sind meine Tipps für die Gestaltung eines tollen Footers mit Elementor.
Inhaltsverzeichnis
- Biete das Wesentliche und vermeide Frustration
- Auf die Marke eingehen
- Nehme dir Zeit für das Layout und werte die Elemente auf
- Erweitere deine Kit-Sammlung, spare später Zeit
- Abschließende Überlegungen
Das Wesentliche bereitstellen und Frustration vermeiden
Das Scrollen zum Ende einer Website, um wichtige Links zu finden, ist ein Designmuster, das wir alle gelernt haben. Doch oft scrollen wir bis zum Ende einer schönen Website, um eine Fußzeile zu sehen, in der Dinge fehlen, nach denen wir instinktiv suchen. Stelle sicher, dass du die folgenden Widgets in Ihre Fußzeile aufnehmen:
1. Soziale Links
Ja, wir brauchen sie! Wenn ich sie nicht in der Kopfzeile finde, gehe ich direkt in die Fußzeile. Du bist bei mir, oder?
- Verwende das Widget mit den sozialen Symbolen, aber mische es auf und verwende Textlinks oder füge einen Instagram-Feed direkt in der Fußzeile ein.
- Anstatt nur ein soziales Widget zu verwenden, könntest du es für jedes Symbol duplizieren, seine Position auf Inline setzen und jedes einzelne animieren. Tassssty!
Du musst diese Widgets nicht nur in einer Spalte platzieren – du kannst sie auch absolut positionieren, damit sie in der Fußzeile schweben, oder sie als Popup erstellen, das beim Scrollen der Website erscheint.
2. Navigation
Bringe die Menschen dorthin, wo sie hinmüssen. Es könnte deine letzte Chance sein.
- Gestalte deine Menüs kurz, klar und einfach zu verstehen.
- Biete nützliche Links an, zum Beispiel: Wenn du einen Shop oder eine Mitgliedschaftsseite hast, füge Links zur Kontoverwaltung, zu Bestellungen, zur Hilfe, zu Ressourcen usw. ein.
- Wenn du viele Menüs einfügen musst, gleicht sie mit alternativen Spaltenbreiten und zusätzlichen Widgets wie Kontosymbolen aus.
3. Lead Gen oder Anmeldung
Jetzt ist es an der Zeit, sich zu melden! Und die Besucher erwarten das von dir!
- Wenn du eine Marke bist und keine Mailingliste hast, machst du es falsch. Die Fußzeile ist ein großartiger Ort, um ein schnelles Anmeldeformular einzubauen, und wir sind es gewohnt, es dort zu finden. Kein Grund, sie mit Pop-ups zu belästigen!
- Wenn du nicht genug Platz für ein großes Formular hast, kannst du es auch inline einbauen. Wusste, dass du die Breite der Felder und Schaltflächen von Elementor-Formularen steuern kannst? Was für eine Welt.
- Mache es ansprechend. Warum versuchst du nicht, anstelle einer durchschnittlichen „Danke für die Anmeldung“-Nachricht einen Pop mit einem kreativen Text zu verwenden. Du kannst dein Formular so einstellst, dass es sich in deine Mailingliste einträgt und ein Pop-up auslöst!
4. Keine Überraschungen
Wir sind Gewohnheitstiere, und wenn wir Antworten wollen, scrollen wir direkt nach unten!
- Kontaktinformationen, Datenschutzrichtlinien, Geschäftsbedingungen, Versandregeln…. sind nur einige der Dinge, die wir in einer Fußzeile erwarten. Experimentiere mit Navigationslayouts, um all diese wichtigen Informationen auszugleichen. Wenn du den Eindruck hast, dass es zu viel Text ist, solltest du einige grafische Elemente oder mehr Platz einbauen.
- Wenn du ein Copyright hast, solltest du die Funktion „Dynamisches Jahr“ in deiner Überschrift verwenden! Auf diese Weise müsst du das Jahr nicht jedes Jahr aktualisieren… Verwende die Optionen Vorher & Nachher, um Wörter an die Jahreszahl anzuhängen.
Auf Marke gehen
Du hast es schon einmal gehört: Alle Marken haben eine Stimme, und wenn du keinen Text gesummt oder ein Lied gesungen hast, bin ich ein wenig enttäuscht von dir. Hoffentlich hat deine Fußzeile ein bisschen mehr Persönlichkeit! Die Fußzeile könnte deine letzte Chance sein, deine Markenbotschaft zu vermitteln. Es muss nicht unbedingt plakativ sein; manchmal ist weniger mehr. Aber wähle sie nicht ein.
Füge ein Logo oder Markenelemente ein
Du würdest dich wundern! So viele Fußzeilen, die ich bei der Neugestaltung von Websites gesehen habe, haben das Ziel verfehlt, wenn es darum geht, das Logo einer Marke oder Markenelemente zu zeigen.
- Experimentiere mit der Inline-Positionierung, um dein Logo an ungewöhnlichen Stellen in deiner Fußzeile zu platzieren. Ausgewogenheit ist das A und O, und manchmal ist ein Logo auf der linken Seite einfach nicht das Richtige.
- Wende subtile Bewegungseffekte auf deine Markenelemente an, wie z. B. ein Slide-in von oben oder ein Sink-on-Hover für ein „hochwertigeres“ Erlebnis. Sei hier vorsichtig, denn übermäßige Bewegungseffekte können deine schöne Kaskade schnell in einen Erdrutsch verwandeln.
- Wenn du kreativ bist, kannst du auch ein animiertes Logo oder einen Text einfügen. Oder sogar den Text auf dem svg-Pfad-Widget mit dem Slogan deiner Marke?
Füge eine Markenbotschaft ein
Ich kann gar nicht beschreiben, wie sehr ich mich freue, wenn ich in einer Fußzeile über einen witzigen Text oder eine fesselnde CTA stolpere.
- Eine kurze, witzige, fesselnde und auf den Punkt gebrachte Zusammenfassung dessen, worum es bei dir geht, ist manchmal genau das, was dein Nutzer braucht, um den nächsten Klick zu tätigen. Erinnere dich daran, warum sie bis zum Ende geblieben sind. Wir verbinden uns mehr mit menschlichen Marken, also füge eine menschliche, authentische Botschaft ein.
Wähle deine Farben mit Bedacht
Da wir von der Fußzeile aufwärts entwerfen, nimmst du die stärkste Farbe deiner Marke und beginnst dort. Es geht um Ausgewogenheit.
- Generell sollte sich deine Fußzeile vom Rest deiner Website abheben. Ich bevorzuge eine dunklere Fußzeile, da sie leichter auszugleichen ist. Wenn du sie jedoch hell halten möchtest, kannst du eine subtile Umrandung oder einen dunklen CTA verwenden, um deine Fußzeile vom Inhalt zu trennen. Wenn du willst, dass sie sich vermischt, brauchst du viel weißen Raum!
- Manchmal fühlt sich deine Fußzeile flach an, also experimentiere mit etwas Textur durch Hintergrundüberlagerungen oder unterbrich Abschnitte durch Rahmen. Du könntest auch ein Gif als Hintergrundbild verwenden, um ein wenig Licht ins Dunkel zu bringen, aber übertreibe es nicht.
Nehme dir Zeit für das Layout und verbessere die Elemente
Sobald du alle Elemente in ein oder zwei Abschnitten untergebracht hast, ist es an der Zeit, sich an die Arbeit zu machen und jedem Element etwas Liebe zukommen zu lassen, angefangen bei deinem Layout. Hier wird die Grundlage für das restliche Design deiner Website gelegt, und wenn du hier alles richtig machst, wird der Rest ganz einfach.
Sei kreativ mit deinen Abschnitten/Spaltenlayouts
Baue immer noch Fußzeilen, als würdest du ein Theme mit 3 oder 4 Spalten verwenden? Höre sofort damit auf! Mit Elementor kannst du buchstäblich unbegrenzte Layouts erstellen.
- Experimentiere mit inneren Abschnitten oder verwende Plugins, die Flexbox aktivieren, um einzigartige Spaltenlayouts zu erstellen. Denke daran, dass du Elemente innerhalb jeder Spalte ausrichten kannst. Die einzige Grenze ist hier deine Fantasie.
- Nutze die volle Breite; vielleicht gefällt es dir! Wenn du dir Sorgen um das Padding machst, halte dich an 20-40px, das ist ein sicherer Bereich.
- Wenn es dir etwas langweilig vorkommt, kannst du Spalten oder Schaltflächen mit subtilen Hover-Effekten versehen. Mit der Option „Hintergrundüberlagerung“ kannst du eine Menge erreichen.
- Denkst du an deine Abstände! Elemente brauchen Platz zum Atmen. Dies ist die Grundlage für jedes Design. Ich achte im Allgemeinen darauf, dass zwischen den Spalten mindestens 40 Pixel Platz ist.
- Hast du einen wichtigen CTA? Warum fügst du ihn nicht als klebrigen Abschnitt am unteren Rand deiner Website hinzu?
Beherrsche Inline- und benutzerdefinierte Breiten für deine Widgets
Ich habe es schon ein paar Mal erwähnt, und ich werde es noch einmal erwähnen, weil dies buchstäblich mein Leben verändert hat. Klicke auf die Registerkarte „Erweitert“ und gehe runter zu den Positionierungsoptionen, du wirst es nicht bereuen.
- Stapele deine Widgets nicht einfach. Wir spielen hier nicht Tetris. Wenn du die benutzerdefinierte Positionierung aktivierst, kannst du die Breite der Widgets steuern, damit sie in deinen Spalten zusammenpassen. Füge etwas Füllung hinzu, um sie auszugleichen.
- Möchte eine Linie zwischen einigen Elementen ziehen, die inline sind? Ein schneller Trick besteht darin, einem der Symbole auf einer Seite eine Auffüllung und einen Rand zu geben und dann auf derselben Seite einen Rahmen zu setzen! Und schon hast du eine Linie zwischen zwei Inline-Objekten.
Dränge dich selbst
Es ist leicht, bei der Gestaltung in bestimmte Muster zu verfallen, vor allem, wenn man Websites wie ein norwegischer Milchbauer erstellt. Befreie dich von ihnen.
- Strenge dich an! Du bist schon so weit gekommen. Wenn du nicht weiterkommst, suche nach Inspiration auf Websites wie awwwards oder dribble.
- Google ist dein Freund. Es gibt haufenweise Codeschnipsel oder Tutorials auf Youtube, die dir zeigen, wie du die Dinge auf die nächste Stufe bringen kannst. Zum Beispiel, wie man einen Reveal Footer-Effekt erstellt, einen Lauftext, css, um alternative Schriftarten einzubinden. Wenn du es irgendwo gesehen hast, schau es nach!
Es liegt an dir, weiter zu lernen und die Ressourcen zu nutzen, die wir zur Verfügung haben. Keine Ausreden, Familie!
Responsive Responsive Responsive Responsive
99% meiner Fußzeilen sehen auf dem Handy gut aus. Kannst du das auch von dir behaupten? Machen wir daraus ein Ja.
- Stelle sicher, dass du, sobald du dein Desktop-Footer-Design fertiggestellt hast, es in den responsiven Modus herunterfährst und Folgendes überprüfst:
- Ist dein Footer-Abschnitt gleichmäßig und ausreichend gepolstert?
- Sind die Abstände zwischen den gestapelten Spalten und Widgets ausreichend groß?
- Sind deine Überschriften lesbar und übersichtlich?
- Sind deine Menüs noch ansprechend, oder musst du ein alternatives mobiles Menü erstellen?
- Musst du Spalten oder Widgets ausblenden, um das Design auf dem Handy ausgewogen zu halten?
- Funktionieren auch deine Formulare und Popups responsiv?
Erweitere deine Kit-Sammlung und spare später Zeit
Jetzt, wo du eine erstaunliche, ausgewogene, markengerechte und ansprechende Fußzeile hast, sag mir, dass das Design oberhalb der Falz nicht einfacher geworden ist! Aber bevor du es deinem Kunden zeigst oder die Bücher über dieses Design schließt, speichere es als Vorlage und exportiere es mit der Exportfunktion von Elementor für Vorlagen-Kits.
Wenn du das nächste Mal bei einem Design nicht weiterkommst, kannst du in deine Kit-Sammlung eintauchen und eine Vorlage importieren, um sie zu überarbeiten und eine weitere solide Grundlage zu schaffen.
Schlussgedanken
Wenn du das nächste Mal mit einem Design nicht weiterkommst oder bei deinem nächsten Projekt die Balance nicht halten kannst, warum versuchst du nicht, von unten nach oben zu bauen? Lasse das Above-the-Fold-Design für einen Moment beiseite, hole das Fußsprudelbad heraus und schenke dem Fußbereich deiner Website etwas Aufmerksamkeit. Wenn du all diese wichtigen Elemente in einem strukturierten Raum unterbringen kannst, wird der Rest des Designs ein Kinderspiel! Vertraue mir, dem ansässigen Fußzeilen-Fetischisten.
Übersetzt von Verena Jütte
von Website Freiburg
Quelle, unser Websoftware Partner Elementor Pro:
