12 Beispiele für die vertikale Navigation von Divi

Bei der Erstellung einer Website gibt es viele verschiedene Dinge zu beachten. Es beginnt normalerweise damit, wie das Gesamtlayout Ihrer Website aussehen und sich anfühlen soll. Sie möchten, dass es mit dem Inhalt Ihrer Website übereinstimmt, damit die Botschaft, die Sie senden möchten, gestärkt wird.

Einer der Faktoren, die eine wichtige Rolle dabei spielen, wie Ihre Website das Verhalten der Besucher beeinflusst, ist das Hauptmenü. Mit Divi gibt es unzählige Möglichkeiten, Ihr Menü so zu gestalten, dass es zum Rest Ihrer Website passt und Ihnen hilft, Ihre Besucher durch Ihre Website zu führen.

Eine dieser Möglichkeiten ist die Verwendung einer vertikalen Navigation anstelle des oberen Menüs. Obwohl die vertikale Navigation nicht so häufig verwendet wird, kann sie erstaunliche Ergebnisse liefern, wenn sie gut durchdacht ist und zum Rest Ihrer Website passt. Wie das obere Menü begleitet das vertikale Menü die Besucher während ihres gesamten Aufenthalts auf der Website.

Um Sie zu inspirieren, haben wir 12 Websites ausgewählt, die die vertikale Navigation verwenden, um das Besuchererlebnis zu optimieren, indem sie die Navigation auf der Website verbessern.

1. Master en Diseno de Interiores

Master en Diseno de Interiores ist eine atemberaubende Website, die sich um Innenarchitektur dreht. In der Abbildung oben sehen Sie, wie sie das vertikale Menü verwendet haben, um ihrer Website das gewisse Extra zu verleihen.

Die auf der Website verwendeten Farben sind sehr neutral, was der Website sowie dem jeweiligen Unternehmen oder der jeweiligen Marke einen modernen Touch und ein modernes Gefühl verleiht.

Die vertikale Navigation ist keine Ausnahme. Die verwendeten Farben sind sehr dezent und stören die Augen beim Lesen nicht.

2. Modell an der Spitze

Model On Top ist eine Model-Management-Website. Diese mit Divi erstellte Website ermöglichte es, eine gewisse Harmonie zu finden und die Professionalität und Kompetenz zu zeigen, die sie mit ihrem Unternehmen verbinden möchten.

Neben einer sehr schönen vertikalen Navigation, die alle benötigten Elemente wie ein Logo, die Seiten und eine Suchleiste enthält, haben sie dieses Engagement auch durch die Verwendung eines Videohintergrunds direkt am Anfang ihrer Website geschaffen.

Die vertikale Navigation erforderte nicht viel spezielles Design, sie entschieden sich stattdessen, sie sauber zu halten und die Grafik im Rest der Seite die Arbeit zu machen.

3. Art-On-The-Run Filmschule Berlin

Die Art-On-The-Run Filmschool Berlin repräsentierte auf ihrer Website perfekt die künstlerische Seite, die eine Filmhochschule braucht. Die vertikale Navigation hat im Gesamtbild einen besonderen Zweck.

Sie setzten bewusst auf eine vertikale Navigation, um die Vorteile zu genießen, das Menü wie eine Art „Liste“ aussehen zu lassen. Sie haben eine Nummerierung verwendet, die mit dem übereinstimmt, worum es auf der Website geht. Die Nummerierung könnte neben den Seiten auch leicht als Szenarien oder Episoden interpretiert werden.

Die Kombination der Seiten und des gezeigten Logos vermittelt eine gewisse Einfachheit und Struktur. Sie haben es nicht versäumt, auch visuelle Elemente darzustellen, die ganz im Einklang mit dem stehen, worum es auf ihrer Website geht.

4. Alex Marken

Alex Brands ist eine E-Commerce-Website von Divi, die alle möglichen Dinge für Kinder verkauft. von Kunsthandwerk bis hin zu Möbeln und Spielen. Die Website zeigt sofort das Gefühl, das sie repräsentieren möchten; verspielt und einladend.

Die vertikale Navigation wurde auch hier sehr bewusst gewählt. Es gibt viele verschiedene Seiten, wenn sie sich für ein Top-Menü entschieden hätten, ginge die Struktur verloren und es wäre nicht genug Platz.

5. Devlin-Fotos

Delvin Photos ist wahrscheinlich die eleganteste Website aller in diesem Beitrag erwähnten. Delvin Photos verwendet ihre Website, um alle ihre Arbeiten auf originelle und ansprechende Weise zu präsentieren, um neue Kunden für die von ihnen angebotenen Dienstleistungen zu gewinnen.

Sie nutzten die vertikale Navigation, um die Eleganz zu betonen, die sie im Rest ihrer Website verwenden, und indem sie Social-Media-Symbole in ihr Hauptmenü einfügten. sie sorgen auch dafür, dass die Menschen während ihres Aufenthalts auf der Website jederzeit auf die Social-Media-Kanäle zugreifen können.

6. Soiree-Make-up

Soiree Makeup ist eine Website, die sich rund um Make-up dreht. Die Website wurde speziell entwickelt, um die Make-up-Services eines Maskenbildners anzubieten. Die Website zeigt sofort die Einfachheit und Eleganz, die von jedem Maskenbildner erwartet wird. Nicht zu viel Extravaganz, aber hübsch anzusehen.

Die Website nimmt im Allgemeinen nicht den gesamten Bildschirm ein, wodurch der Inhalt konzentrierter wird. In der vertikalen Navigation gilt die meiste Aufmerksamkeit dem Logo und der Kontaktbox.

Das Einfügen einer Kontaktbox in die vertikale Navigation ermöglicht es dem Maskenbildner, den wichtigsten Zweck der Website hervorzuheben; Gewinnung neuer Leads, neuer Kunden und neuer Reservierungen.

7. Nathan Welton Fotografie

Nathan Welton Photography ist die zweite Fotografie-Website, die wir für diesen Beitrag ausgewählt haben. Die Verwendung der vertikalen Navigation für eine Foto-Website ist viel häufiger als für andere Websites. Das liegt meistens daran, dass die Bilder auf der Website für sich sprechen.

Website-Besitzer von Fotografie-Websites verwenden eine einfache vertikale Navigation, um den Fokus auf die Bilder zu richten, indem sie ein Menü haben, das einfach zu bedienen ist und nicht ablenkt.

Die Bilder, die Nathan Welton auf seiner Website verwendet, sind genau das; Sie sind voller Abenteuer und erzählen ihre eigene Geschichte. Die vertikale Navigation dient nur praktischen Zwecken und unterbricht die Seite nicht wie ein Top-Menü.

8. Lilly Fotografie

Lilly Photography ist die letzte Foto-Website, die wir für diesen Beitrag ausgewählt haben. Das Tolle an dieser Website ist, dass sie eine Galerie auf der Homepage verwendet.

Die Galerie zeigt Arbeiten, die in der Vergangenheit geleistet wurden, um ein gewisses Erlebnisgefühl zu erzeugen. Denn am Ende; Die Leute suchen einen Fotografen, der Bilder macht, die ihren Erwartungen entsprechen.

Die vertikale Navigation ähnelt der vertikalen Navigation, die von Nathan Welton verwendet wird; einfach, aber die Arbeit erledigt.

9. Film Pittsburgh

Film Pittsburgh ist eine Filmpräsentationsorganisation. Eine der netten Dinge, die sie gemacht haben, war, oben auf ihrer Seite ein zweites Menü zu erstellen, das es den Besuchern ermöglicht, die praktischen Informationen zu erhalten.

Die vertikale Navigation hingegen ist eher informativ, hilft den Besuchern jedoch, ihre Geschichte und Mission zu verstehen, indem sie sie zu den richtigen Seiten führt. Die Trennung der praktischen und erzählenden Seiten ermöglicht das Geschichtenerzählen im Hauptmenü.

Neben der vertikalen Navigation nutzte Film Pittsburgh auch nicht die gesamte Bildschirmgröße, was ihnen Raum ließ, ihr Design mit einem relevanten Hintergrundbild zu verbessern.

10. BlendLove

BlendLove ist ein Lebensmittelladen in Australien. Sie haben eine Website erstellt, um ihre Kunden über alle praktischen Informationen zu informieren, die sie wissen müssen.

Eines der netten Extras, die sie auf ihrer Website anbieten, ist die Möglichkeit, ein E-Book voller gesunder Lebensmittel zu kaufen, die sie herstellen. Es ist eine schöne Art, mit Kunden in Kontakt zu treten, sie kennenzulernen und sogar Gewinne zu erzielen.

Die Website selbst hat eine dunkle Farbpalette, die einen schönen Kontrast zum Logo bildet. Sie stellten sicher, dass die Farben auf ihrer gesamten Website konsistent waren, auch in ihrer vertikalen Navigation. Auf Konsistenz zu achten ist wichtig, da die vertikale Navigation einen relativ großen Teil des Bildschirms einnimmt, während ein oberes Menü normalerweise nicht so auffällig ist.

11. Guten Appetit

Bon Appetit ist eine belgische Website, die sich darauf konzentriert, Workshops zu geben, die viele Aromen und Düfte beinhalten. Die vorherigen Beispiele und dieses Beispiel unterscheiden sich sicherlich in einer Sache; Die Bon Appetit-Website konzentriert sich mehr auf den geschriebenen Inhalt als auf die Visualisierung.

Das vertikale Menü wurde in 3 Arten von Teilen aufgeteilt; das Logo, die Seiten und zusätzliche Dienstleistungen wie Kundenservice und Versand. Der unterschiedliche Stil zwischen den Seiten und zusätzlichen Diensten verleiht der Website ein besonders organisiertes Gefühl und eine besondere Note.

12. Essen Sie ein thailändisches Restaurant

Eat Thai Restaurant ist das letzte Beispiel in diesem Beitrag. Es ist ein mobiles Restaurant in lokalem Besitz, das es auf den Punkt bringt. Ihre Website hat nicht mehrere Seiten. Sie nahmen sich lieber eine Seite und konzentrierten sich auf das Wichtigste; das Essen. Die Website wird verwendet, um Personen, die bestellen möchten, auf eine Bestellwebsite umzuleiten.

Das Schöne an der vertikalen Navigation, die in diesem Beispiel verwendet wird, ist, dass sie nicht wirklich zum Navigieren, sondern eher zum Informieren dient. Die vertikale Navigation folgt einem Besucher während seines gesamten Aufenthalts auf der Website, also auch die Informationen. Sie lieferten alle relevanten Informationen im Menü zusammen mit den sozialen Symbolen und einem "Jetzt bestellen" CTA.

Abschließende Gedanken

Wir hoffen, dass dieser Beitrag Ihnen jede Menge Inspiration gibt, die Ihnen dabei hilft, großartige Konzepte für Ihre aktuellen oder zukünftigen Websites zu entwickeln. Wenn Sie Vorschläge oder Kommentare haben; Hinterlasse gerne einen Kommentar im Kommentarbereich unten! Und während Sie dort sind, lassen Sie es uns wissen; Für welche Art von Website würden Sie die vertikale Navigation verwenden?

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!

Ausgewähltes Bild von LuckyDesigner / shutterstock.com