3 kreative Möglichkeiten, den Active Link Ihrer vertikalen Divi-Navigation zu gestalten

Veröffentlicht: 2017-09-11

In diesem Divi-Tutorial zeigen wir Ihnen einige interessante Möglichkeiten, den aktiven Link in Ihrer vertikalen Navigation zu gestalten. Dieses Tutorial folgt auf ein vorheriges Tutorial, in dem wir Ihnen gezeigt haben, wie Sie aktive Links beim Scrollen für einseitige Divi-Websites erstellen. Bevor Sie also die verschiedenen Stilarten ausprobieren, sollten Sie zuerst die aktiven Links beim Scrollen durch den vorherigen Artikel einrichten, da der Code, den wir verwenden werden, darauf aufbauen wird.

Beachten Sie bei diesem Tutorial, dass Sie die Ergebnisse erst sehen können, nachdem Sie die Seite gespeichert haben. Wenn Sie nur eine Vorschau Ihrer Seite anzeigen, werden die Änderungen nicht angezeigt.

3 kreative Möglichkeiten, den Active Link Ihrer vertikalen Divi-Navigation zu gestalten

Abonnieren Sie unseren Youtube-Kanal

Wie es funktioniert

Um eine Navigation zu erstellen, die den aktiven Link beim Scrollen auf der Seite automatisch anpasst, haben wir das Plugin Page Scroll to ID verwendet, mit dem Sie ganz einfach die gewünschten Ergebnisse erzielen können. Außerdem bietet Ihnen das Plugin auch verschiedene Optionen, die Sie in den Einstellungen manuell auswählen können.

Das Plugin hilft dabei, die Position eines Besuchers auf Ihrer Website zu identifizieren und ändert den Menüpunkt entsprechend dem Abschnitt Ihrer Website, den er gerade betrachtet. Dies ist eine kleine Interaktion, die Ihren Besuchern definitiv hilft, sich durch den One-Pager zu navigieren. Sie wissen automatisch, welchen Teil Ihrer Seite sie erkunden und wie weit sie von anderen Abschnitten entfernt sind, die sie interessieren könnten.

Hinweis: Beachten Sie , dass diese Methode nur für Websites gilt, die aus nur einer Seite bestehen.

Vertikale Navigation aktivieren

Die Beispiele, die wir Ihnen zeigen, sind besonders wertvoll, wenn Sie die vertikale Navigation verwenden. Also mach weiter und aktiviere die vertikale Navigation im Theme Customizer (falls du das noch nicht im vorherigen Beitrag getan hast).

Wenn Sie sich in Ihrem WordPress-Dashboard befinden, gehen Sie zu Darstellung > Anpassen > Kopfzeile und Navigation > Kopfzeilenformat > Vertikale Navigation aktivieren.

aktiver Link

Aktiver Link-Stil Nr. 1

Das erste Beispiel, das wir Ihnen zeigen möchten, ist ein leuchtendes. Jedes Mal, wenn ein Besucher an einem der Abschnitte vorbeikommt, beginnt ein anderer Menüpunkt zu leuchten. Es ist eine subtile, aber schöne und elegante Möglichkeit, Ihren Besuchern zu helfen, durch den One-Pager zu navigieren.

aktiver Link

Einstellungen der primären Menüleiste

Beginnen Sie damit, einige Änderungen an Ihrer primären Menüleiste vorzunehmen. 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:

Logobild ausblenden: Aktivieren
Textgröße: 24
Buchstabenabstand: -1
Schriftart: Happy Monkey
Textfarbe: #FFFFFF
Farbe des aktiven Links: #FFFFFF
Hintergrundfarbe: rgba(255,255,255,0)
Dropdown-Hintergrundfarbe: rgba(255,255,255,0)

aktiver Link

CSS-Code zu Theme-Optionen hinzufügen

Als nächstes müssen Sie CSS-Code hinzufügen. Es gibt mehrere Möglichkeiten, wie Sie CSS-Code zu Ihrer Website hinzufügen können. In diesen Beispielen behandeln wir drei Methoden, beginnend mit den Designoptionen. Wenn Sie sich in Ihrem WordPress-Dashboard befinden, gehen Sie zu Divi > Themenoptionen > Scrollen Sie auf der Registerkarte Allgemein nach unten und fügen Sie die folgenden CSS-Codezeilen in das Feld Benutzerdefiniertes CSS ein:

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight{ 
text-shadow:  0 0 10px #fff,  0 0 30px #fff,  0 0 50px #e3e98e,  0 0 70px #e3e98e, 0 0 90px #e3e98e;
border-top: 1px dotted #FFFFFF;
border-bottom: 1px dotted #FFFFFF;
padding-top: 15px;
}
nav#top-menu-nav {
width:80% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
text-align: center;
margin-bottom: 15px;
padding-left: 25%;
}
#et-top-navigation {
padding-top: 100% !important;
}
#top-menu {
text-align: center;
padding-left: 10%;
}}

Aktiver Link-Stil #2

Der zweite Active-Link-Stil hat einen sehr sauberen und eleganten Look. Wie üblich ändern sich die aktiven Links je nachdem, wie Sie auf der einseitigen Website nach unten scrollen. Wenn Sie auf einen der Menüpunkte klicken, wird der gleiche Stil angewendet.

aktiver Link

Einstellungen der primären Menüleiste

Wir beginnen damit, dasselbe wie im ersten Beispiel dieses Beitrags zu tun; Änderungen an der primären Menüleiste vornehmen. Gehen Sie dazu in Ihrem WordPress-Dashboard zu Erscheinungsbild > Anpassen > Kopfzeile & Navigation > Primäre Menüleiste und stellen Sie sicher, dass Sie die folgenden Einstellungen haben:

Logobild ausblenden: Aktivieren
Textgröße: 24
Buchstabenabstand: 2
Schriftart: Lobster
Textfarbe: #FFFFFF
Farbe des aktiven Links: #FFFFFF
Hintergrundfarbe: rgba(255,255,255,0)
Hintergrundfarbe des Dropdown-Menüs: rgba(255,255,255,0)

aktiver Link

CSS-Code zum Theme-Anpasser hinzufügen

Wie im vorherigen Beispiel beschrieben, können Sie den CSS-Code auf verschiedene Weise zu Ihrer Website hinzufügen. Neben dem Hinzufügen des benutzerdefinierten Codes zu den Theme-Optionen können Sie ihn auch zum Theme Customizer hinzufügen. Wenn Sie sich in Ihrem WordPress-Dashboard befinden, gehen Sie zu Darstellung > Anpassen > Zusätzliches CSS und fügen Sie die folgenden Codezeilen in das Feld Benutzerdefiniertes CSS ein:

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
padding: 0.5em 1.9em;
}
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
height: 20px;
width: 20px;
position: absolute;
content: '';
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
}
#top-menu .current-menu-item a.mPS2id-highlight:before {
left: 0;
top: 0;
border-left: 4px solid #000000;
border-top: 4px solid #FFFFFF;
-webkit-transform: translate(100%, 50%);
transform: translate(100%, 50%);
}
#top-menu .current-menu-item a.mPS2id-highlight:after {
border-right: 4px solid #000000;
border-bottom: 4px solid #FFFFFF;
-webkit-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
} 
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
opacity: 1;
}
nav#top-menu-nav {
width:87% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

Aktiver Link-Stil #3

Der dritte aktive Linkstil, den wir mit Ihnen teilen möchten, konzentriert sich hauptsächlich auf das Keyword, das als Menüelement verwendet wird. Mit den richtigen Einstellungen für den Textschatten umgibt derselbe Text den Menüpunkt, der die Position eines Besuchers auf Ihrer Website hervorhebt.

aktiver Link

Einstellungen der primären Menüleiste

Für dieses letzte Beispiel nehmen Sie zunächst einige Änderungen an der primären Menüleiste vor. 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 für die vertikale Navigation vor:

Logobild ausblenden: Aktivieren
Textgröße: 16
Buchstabenabstand: 2
Schriftart: Josefin Slab
Schriftstil: Großbuchstaben
Textfarbe: #FFFFFF
Farbe des aktiven Links: #FFFFFF
Hintergrundfarbe: rgba(255,255,255,0)
Hintergrundfarbe des Dropdown-Menüs: rgba(255,255,255,0)

aktiver Link

CSS-Code insbesondere zu einer Seite hinzufügen

Eine andere Möglichkeit, CSS-Code hinzuzufügen, besteht darin, ihn zu einer bestimmten Seite hinzuzufügen. Öffnen Sie Ihre Startseite (und damit die Seite, auf der Sie alle Inhalte platziert haben) mit dem Divi Builder und klicken Sie auf das folgende Symbol:

aktiver Link

Nachdem Sie auf das Symbol geklickt haben, fügen Sie die folgenden CSS-Codezeilen in das Feld Benutzerdefiniertes CSS ein:

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
margin-left: 80px;
text-shadow:0 0 0 #000, -70px 0 0 rgba(255, 255, 255, .4), 70px 0 0 rgba(255, 255, 255, .4), 0 25px 0 rgba(255, 255, 255, .4) , 0 -25px 0 rgba(255, 255, 255, .4) ; }
}
nav#top-menu-nav {
width:95% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen ein paar nette und einfache Möglichkeiten gezeigt, den aktiven Link in Ihrem Menü zu gestalten. Dieser Beitrag war eine Fortsetzung eines vorherigen Beitrags, in dem wir Ihnen gezeigt haben, wie Sie aktive Links beim Scrollen für einseitige Divi-Websites erstellen. Denken Sie daran, dass Sie die Änderungen zuerst speichern müssen, bevor Sie die Ergebnisse sehen können. Nur eine Vorschau Ihrer Seite reicht nicht aus. Wenn Sie Fragen oder Anregungen haben; Stellen Sie sicher, dass Sie einen Kommentar im Kommentarbereich unten hinterlassen!

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 Botond1977 / shutterstock.com