So erstellen Sie eine transparente vertikale Navigation, die Ihre Divi-Website überlappt

Im heutigen Divi-Tutorial konzentrieren wir uns in erster Linie darauf, etwas Besonderes mit der vertikalen Navigation auf Ihrer Website zu machen. Vertikale Navigation ist eine oft vergessene Option, die das Divi-Theme bietet. Obwohl es nicht oft verwendet wird, kann es das gesamte Erscheinungsbild Ihrer Website ändern und auf das gewünschte Niveau bringen. Damit Sie Ihre vertikale Navigation noch spezieller gestalten können, als sie bereits ist, werden wir sie transparent machen. Außerdem sorgen wir dafür, dass das transparente Menü den Rest Ihrer Website überlappt.

Derzeit sehen wir nicht viele Websites mit vertikaler Navigation. Aber in bestimmten Fällen kann es erstaunliche Ergebnisse liefern. In einem unserer vorherigen Beiträge haben wir Ihnen 12 Beispiele für Divi-Websites gezeigt, die die vertikale Navigation verwenden, um ihr Webdesign zu verbessern.

Wenn die vertikale Navigation Ihre Website überlappt, ist die Verwendung einer transparenten Hintergrundfarbe wichtig. Wenn Sie keine transparente Hintergrundfarbe verwenden, kann sich die vertikale Navigation mit einigen Inhalten auf Ihrer Website überschneiden. Sie möchten den inhaltlichen Schwerpunkt Ihrer Website nicht loswerden und auch auf keinen Fall überlappen.

Um zu demonstrieren, was wir genau meinen, haben wir ein elegantes und einfaches Beispiel erstellt, das wir Ihnen zeigen, wie es geht. Schritt für Schritt führen wir Sie durch die verschiedenen Schritte, die erforderlich sind, um die folgenden Ergebnisse zu erzielen.

Das heutige Endergebnis: Ein einfaches und elegantes vertikales Menü

Im obigen Bild können Sie die Einfachheit erkennen, die eine transparente vertikale Navigation auf Ihre Website bringen kann. Wir zeigen Ihnen nicht nur, wie Sie das transparente vertikale Menü erstellen, sondern geben auch einige allgemeine Designtipps, die Sie verwenden können, um es an Ihre eigene Website anzupassen.

Erstellen des Designs in Divi

Abonnieren Sie unseren Youtube-Kanal

Allgemeine Einstellungen

Bevor wir in das von uns erstellte Beispiel eintauchen, geben wir Ihnen einige allgemeine Informationen (und CSS-Codezeilen), die Ihnen helfen, die transparente Navigation auf einfache Weise zu integrieren (ohne alle anderen Änderungen, die wir im Beispiel vorgenommen haben). .

Vertikale Navigation aktivieren

Zunächst müssen Sie die vertikale Navigation auf Ihrer Website aktivieren. Gehen Sie dazu zu Ihrem WordPress-Dashboard> Erscheinungsbild> Anpassen> Kopfzeile & Navigation> Kopfzeilenformat> und aktivieren Sie die vertikale Navigation.

Wählen Sie Ihre Designeinstellungen im Theme Customizer

Da Sie sich jetzt noch im Theme Customizer befinden, können Sie alle Einstellungen Ihrer vertikalen Navigation genauso anpassen, wie Sie Ihre Top-Navigation ändern. Gehen Sie zurück zu Kopfzeile & Navigation > Primärmenü > und nehmen Sie alle Änderungen vor, die Sie an Ihrem Primärmenü vornehmen möchten.

In diesem Teil ist es wichtig, dem Menü eine Hintergrundfarbe mit einer Deckkraft von weniger als 1 bereitzustellen. Vorzugsweise sogar weniger als 0,5. Stellen Sie sicher, dass dies die Hintergrundfarbe übernimmt. Wenn Sie möchten, dass das Gleiche für die Hintergrundfarbe des Dropdown-Menüs gilt, wählen Sie auch dort dieselbe Farbe.

CSS-Code hinzufügen

Nachdem Sie alle gewünschten Änderungen am Designteil Ihrer vertikalen Navigation vorgenommen haben, können Sie zum CSS-Teil wechseln. Da wir uns bereits im Theme Customizer befinden, werden wir dort den benutzerdefinierten CSS-Code hinzufügen. Sie können den CSS-Code natürlich auch auf einer bestimmten Seite oder über Ihre Theme-Optionen hinzufügen.

Der CSS-Code, den wir Ihnen zur Verfügung stellen, macht zwei Dinge. Zuallererst stellt es sicher, dass sich Ihre transparente vertikale Navigation und Ihre Website überlappen. Zweitens hilft es Ihnen, die Breite Ihrer vertikalen Navigation anzupassen. Wenn Sie die Breite überhaupt nicht ändern möchten, können Sie diesen Code aus Ihrer Website weglassen und einfach die transparente vertikale Navigation und Ihre Website überlappen lassen.

Diese Änderungen gelten nur für die Desktop-Version Ihrer Website. Auf Bildschirmen mit einer Breite von weniger als 981 Pixeln werden die Änderungen nicht angewendet.

CSS-Code im Theme Customizer hinzufügen

Erstens haben wir den Code, der dafür sorgt, dass Ihre Website die gesamte Breite Ihres Browsers ausfüllt. Kopieren Sie den folgenden Code und fügen Sie ihn in die Registerkarte Zusätzliches CSS Ihres Theme Customizers ein:

@media (min-width: 981px) { 
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important; 
}
}

Wenn Sie außerdem die Breite Ihrer vertikalen Navigation anpassen möchten, kopieren Sie stattdessen die folgenden Zeilen des CSS-Codes und fügen Sie sie ein:

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important;
}
.et_vertical_nav #page-container #main-header
{
width: 120px;
}
}

Wiederherstellen der vereinfachten vertikalen Navigation

Nachdem wir nun die notwendigen Schritte zum Erstellen einer transparenten vertikalen Navigation durchgeführt haben, die Ihre Website überlappt, werden wir das Beispiel neu erstellen. Das Beispiel sieht noch einmal so aus:

Allgemeine Designtipps

Bevor wir beginnen, teilen wir Ihnen einige allgemeine Designtipps und Gedanken mit, die Sie beachten sollten. Diese Tipps helfen Ihnen, das Beste aus der eleganten und einfachen Website herauszuholen, die Sie erstellen. Werfen wir einen Blick auf die beiden Tipps, die wir unbedingt hervorheben möchten.

Alles zentralisieren

Stellen Sie zunächst sicher, dass Sie die Inhalte auf Ihrer Website zentralisieren. Es ist selbstverständlich, aber erwähnenswert. Wenn Sie eine transparente vertikale Navigation verwenden, die Ihre Website überlappt, passt die Zentralisierung Ihrer Inhalte am besten dazu. Wenn Sie stattdessen alles an der linken Seite Ihrer Website ausrichten, ist es wahrscheinlicher, dass die transparente vertikale Navigation und der Inhalt verwechselt werden. Das ist wahrscheinlich nicht das Ergebnis, das Sie erreichen möchten. Sie möchten Symmetrie und Lesbarkeit auf Ihrer Website priorisieren.

Wenn Sie sich für anders ausgerichtete Inhalte entscheiden, überprüfen Sie unbedingt die Abstände und Ränder des Inhalts. Wenn Sie die Ränder und Abstände entsprechend ändern, können die Ergebnisse immer noch großartig aussehen. Sie müssen jedoch wahrscheinlich viele manuelle Änderungen vornehmen.

Überall gleichfarbiger Hintergrund

Wenn Sie für Ihre vertikale Navigation eine vollständig transparente Hintergrundfarbe verwenden, wie in diesem Beispiel, ist es wichtig, eine gewisse Konsistenz zu wahren. Sie möchten, dass die Farbe in Ihrer vertikalen Navigation lesbar und auffällig ist, da die Benutzer in der Lage sein sollten, reibungslos durch Ihre Website zu navigieren.

Wenn Sie in Ihrer transparenten vertikalen Navigation eine helle Schriftfarbe wählen, stellen Sie sicher, dass Ihre Hintergrundbilder oder Farben dunkle Farben enthalten. Wenn Sie eine dunkle Schriftfarbe verwenden, stellen Sie ebenfalls sicher, dass die Hintergrundbilder oder Farben, die Sie verwenden, helle Farben haben.

Beginnen Sie mit der Erstellung des Beispiels

Lassen Sie uns ohne weitere Fälligkeit damit beginnen, das Beispiel, das wir Ihnen gezeigt haben, neu zu erstellen. Erstellen Sie zunächst eine neue Seite und fügen Sie einen Abschnitt mit voller Breite hinzu. Wir zeigen Ihnen nur, wie Sie einen Abschnitt der Seite neu erstellen. Natürlich können Sie dann fortfahren und so viele Abschnitte hinzufügen, wie Sie möchten. Das Menü bleibt beim Scrollen genau gleich.

Header mit voller Breite erstellen

Fügen Sie im Abschnitt Fullwidth einen Header mit voller Breite hinzu. Gehen Sie dann zum Design-Tab, stellen Sie die Text- und Logo-Ausrichtung auf 'Mitte' und aktivieren Sie auch den Vollbildmodus Ihres Fullwidth Header.

Titeleinstellungen

Scrollen Sie außerdem auf derselben Registerkarte nach unten und nehmen Sie die folgenden Änderungen an der Unterkategorie Titeltext vor:

• Titelschriftart: Lato Light
• Titelschriftart: Großbuchstaben
• Titelschriftart: 60 (Desktop), 50 (Tablet), 40 (Telefon)
• Titeltextfarbe: #FFFFFF

Untertiteleinstellungen

Scrollen Sie weiter und stellen Sie sicher, dass die Einstellungen der Unterkategorie Untertiteltext die folgenden sind:

• Untertitelschriftart: Lato Light
• Untertitel-Schriftgröße: 22px (Desktop und Tablet), 19 (Telefon)
• Untertitel-Textfarbe: #c4c4c4

Tasteneinstellungen

Nehmen Sie abschließend die folgenden Änderungen an der Unterkategorie Schaltfläche der Registerkarte Design vor:

• Benutzerdefinierte Stile für Button One verwenden: Ja
• Button One Textgröße: 15 (Desktop & Tablet), 12 (Telefon)
• Schaltfläche Eins Textfarbe: #000000
• Button Eins Hintergrundfarbe: #FFFFFF
• Button One Schriftart: Lato Light
• Button One Schriftstil: Fett & Großbuchstaben

Verlaufshintergrundeinstellungen

Öffnen Sie als Nächstes die Einstellungen des Abschnitts Volle Breite, um ein Hintergrundbild mit Verlaufsüberlagerung innerhalb der Unterkategorie Hintergrund der Registerkarte Inhalt hinzuzufügen. Fügen Sie je nach Art des Hintergrunds und der verwendeten Farben passende Farben hinzu.

In unserem Beispiel verwenden wir dunkle Hintergründe. Daher beginnen wir mit einer schwarzen Farbe im Verlauf. Die andere Farbe, die wir mit dem Hintergrundbild abgeglichen haben, ist 'rgba(0,49,109,0.43)'.

Darüber hinaus haben wir folgende Einstellungen für die Verlaufsfarben verwendet:

• Verlaufstyp: Linear
• Verlaufsrichtung: 87deg
• Startposition: 0%
• Endposition: 62%

Fahren Sie fort, fügen Sie ein Hintergrundbild hinzu und wenden Sie die folgenden Einstellungen an:

• Hintergrundbildgröße: Cover
• Position des Hintergrundbilds: Mitte
• Hintergrundbild wiederholen: Keine Wiederholung
• Hintergrundbild-Mischung: Overlay

Änderungen im Theme Customizer

Für den nächsten Schritt müssen wir einige andere Änderungen im Theme Customizer vornehmen. Wenn Sie sich in Ihrem WordPress-Dashboard befinden, gehen Sie zu Darstellung > Anpassen > Kopfzeile & Navigation > Primäre Menüleiste > und nehmen Sie die folgenden Änderungen vor:

• Max. Höhe des Logos: 83
• Textgröße: 14
• Buchstabenabstand: 0
• Schriftart: Lato Light
• Schriftstil: Großbuchstaben
• Textfarbe: #FFFFFF
• Farbe des aktiven Links: #FFFFFF
• Hintergrundfarbe: #FFFFFF
• Hintergrundfarbe des Dropdown-Menüs: rgba(221,153,51,0)
• Farbe der Dropdown-Menüzeile: #1E73BE
• Textfarbe des Dropdown-Menüs: #FFFFFF

Benutzerdefinierten CSS-Code im Theme Customizer hinzufügen

Während Sie sich noch im Theme Customizer befinden, fügen wir die erforderlichen CSS-Codezeilen hinzu, um das Layout so aussehen zu lassen, wie es ist.

Der erste Teil des Codes entfernt bei vertikaler Navigation den linken Rand der Website. Der zweite Teil rückt das Menü näher an die linke Seite. Der dritte Teil fügt jeder Seite im Menü einen oberen Rand und einen unteren Rand hinzu. Der vierte Teil fügt dem Logo einen oberen Rand hinzu und entfernt den Rand nach dem Logo. Und schließlich haben wir dafür gesorgt, dass das Menü den gleichen Abstand zwischen dem Logo und den Menüpunkten behält, indem wir die obere Polsterung entfernt haben. Diese Änderungen gelten auch für das Menü beim Scrollen. Daher wird das Menü auf der gesamten Website gleich aussehen.

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
#top-menu li {
margin-top: 15px;
border-bottom: 1px solid #FFFFFF;
}
.et_vertical_nav #main-header #logo {
margin-top: 80% !important;
margin-bottom: 0px !important;
}
.et_vertical_nav.et_vertical_fixed.et_header_style_left .et-fixed-header #et-top-navigation, .et_vertical_nav.et_vertical_fixed.et_header_style_split .et-fixed-header #et-top-navigation {
padding-top: 0px !important;
}}

Endergebnis

Als Ergebnis all der Schritte, die Sie in diesem Beitrag befolgt haben, sollten Sie auf der Website, an der Sie arbeiten, das folgende Ergebnis haben:

Einpacken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie eine transparente vertikale Navigation erstellen, die Ihre Website überlappt. Außerdem haben wir ein elegantes und einfaches Design geteilt, das Sie für Ihre eigene Website verwenden können, wenn Sie diesem Beitrag Schritt für Schritt folgen. Wenn Sie Fragen oder Wünsche haben, hinterlassen Sie bitte einen Kommentar im Kommentarbereich unten, damit wir uns mit Ihnen in Verbindung setzen können!

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!