3 kreatywne sposoby na stylizację aktywnego łącza pionowej nawigacji Divi

Opublikowany: 2017-09-11

W tym samouczku Divi pokażemy Ci kilka interesujących sposobów stylizowania aktywnego linku w nawigacji pionowej. Ten samouczek jest kontynuacją poprzedniego samouczka, w którym pokazaliśmy, jak tworzyć aktywne łącza podczas przewijania dla jednostronicowych witryn Divi. Tak więc, zanim wypróbujesz różne sposoby stylizacji, powinieneś najpierw skonfigurować aktywne linki podczas przewijania poprzedniego artykułu, ponieważ kod, którego będziemy używać, będzie dalej opierał się na tym.

Coś, o czym powinieneś pamiętać podczas tego samouczka, to fakt, że możesz zobaczyć wyniki dopiero po zapisaniu strony. Po prostu wyświetlając podgląd swojej strony, zmiany nie pojawią się.

3 kreatywne sposoby na stylizację aktywnego łącza pionowej nawigacji Divi

Subskrybuj nasz kanał YouTube

Jak to działa

Aby utworzyć nawigację, która automatycznie dostosowuje aktywny link podczas przewijania strony, użyliśmy wtyczki Page Scroll to ID, która z łatwością pomaga osiągnąć pożądane wyniki. Poza tym wtyczka oferuje również różne opcje, które możesz ręcznie wybrać w ustawieniach.

Wtyczka pomaga zidentyfikować pozycję odwiedzającego w Twojej witrynie i zmieni pozycję menu zgodnie z sekcją Twojej witryny, którą aktualnie przegląda. Jest to niewielka interakcja, która z pewnością pomoże odwiedzającym poruszać się po one-pager. Automatycznie będą wiedzieć, którą część Twojej strony przeglądają i jak daleko są od innych sekcji, którymi mogą być zainteresowani.

Uwaga: wiedz, że ta metoda dotyczy tylko witryn, które składają się tylko z jednej strony.

Aktywuj nawigację pionową

Przykłady, które pokażemy, jak to zrobić, będą szczególnie cenne, jeśli korzystasz z nawigacji pionowej. Więc śmiało włącz nawigację pionową w Theme Customizer (jeśli nie zrobiłeś tego już w poprzednim poście).

Jeśli jesteś na pulpicie nawigacyjnym WordPress, przejdź do Wygląd > Dostosuj > Nagłówek i nawigacja > Format nagłówka > Włącz nawigację pionową.

aktywny link

Styl aktywnego łącza nr 1

Pierwszy przykład, który chcielibyśmy wam pokazać, to świecący. Za każdym razem, gdy odwiedzający przejdzie przez jedną z sekcji, inny element menu zacznie świecić. Jest to subtelny, ale piękny i elegancki sposób na ułatwienie odwiedzającym poruszania się po stronie one-pager.

aktywny link

Ustawienia głównego paska menu

Zacznij od wprowadzenia pewnych zmian na głównym pasku menu. Jeśli jesteś na swoim pulpicie nawigacyjnym WordPress, przejdź do Wygląd > Dostosuj > Nagłówek i nawigacja > Główny pasek menu i wprowadź następujące modyfikacje:

  • Ukryj obraz logo: Włącz
  • Rozmiar tekstu: 24
  • Odstępy między literami: -1
  • Czcionka: Happy Monkey
  • Kolor tekstu: #FFFFFF
  • Kolor aktywnego łącza: #FFFFFF
  • Kolor tła: rgba (255,255,255,0)
  • Kolor tła rozwijanego: rgba (255,255,255,0)

aktywny link

Dodaj kod CSS do opcji motywu

Następną rzeczą, którą musisz zrobić, to dodać trochę kodu CSS. Istnieje kilka sposobów dodania kodu CSS do swojej witryny. W tych przykładach zajmiemy się trzema metodami, zaczynając od opcji motywu. Jeśli jesteś na pulpicie WordPress, przejdź do Divi> Opcje motywu> Przewiń w dół kartę Ogólne i umieść następujące wiersze kodu CSS w polu Niestandardowy CSS: 

@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%;
}}

Styl aktywnego łącza nr 2

Drugi styl aktywnego linku to taki, który ma bardzo czysty i elegancki wygląd. Jak zwykle aktywne linki będą się zmieniać w zależności od sposobu przewijania w dół jednostronicowej witryny. Po kliknięciu jednej z pozycji menu zostanie zastosowany ten sam styl.

aktywny link

Ustawienia głównego paska menu

Zaczniemy od tego, co zrobiliśmy w pierwszym przykładzie tego postu; dokonywanie modyfikacji w Podstawowym Pasku Menu. Aby to zrobić, przejdź do Wygląd w panelu WordPress> Dostosuj> Nagłówek i nawigacja> Główny pasek menu i upewnij się, że masz następujące ustawienia:

  • Ukryj obraz logo: Włącz
  • Rozmiar tekstu: 24
  • Odstępy między literami: 2
  • Czcionka: Homar
  • Kolor tekstu: #FFFFFF
  • Kolor aktywnego łącza: #FFFFFF
  • Kolor tła: rgba (255,255,255,0)
  • Kolor tła menu rozwijanego: rgba (255,255,255,0)

aktywny link

Dodaj kod CSS do konfiguratora motywów

Jak powiedziano w poprzednim przykładzie, możesz dodać kod CSS do swojej witryny na wiele sposobów. Oprócz dodania niestandardowego kodu do opcji motywu możesz go również dodać do dostosowywania motywu. Jeśli jesteś na swoim pulpicie nawigacyjnym WordPress, przejdź do Wygląd > Dostosuj > Dodatkowy CSS i umieść następujące wiersze kodu w polu Niestandardowy CSS: 

@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;
}}

Styl aktywnego łącza nr 3

Trzecim aktywnym stylem linku, który postanowiliśmy Ci udostępnić, jest taki, który skupia się głównie na słowie kluczowym używanym jako element menu. Dzięki odpowiednim ustawieniom cienia tekstu ten sam tekst będzie otaczał pozycję menu, co podkreśla pozycję odwiedzającego w Twojej witrynie.

aktywny link

Ustawienia głównego paska menu

W tym ostatnim przykładzie zacznij od wprowadzenia pewnych zmian w głównym pasku menu. Jeśli jesteś na pulpicie WordPress, przejdź do Wygląd > Dostosuj > Nagłówek i nawigacja > Główny pasek menu i wprowadź następujące zmiany w nawigacji pionowej:

  • Ukryj obraz logo: Włącz
  • Rozmiar tekstu: 16
  • Odstępy między literami: 2
  • Czcionka: Josefin Slab
  • Styl czcionki: wielkie litery
  • Kolor tekstu: #FFFFFF
  • Kolor aktywnego łącza: #FFFFFF
  • Kolor tła: rgba (255,255,255,0)
  • Kolor tła menu rozwijanego: rgba (255,255,255,0)

aktywny link

Dodaj kod CSS do jednej strony w szczególności

Inną opcją, którą musisz dodać kod CSS, jest dodanie go do jednej strony w szczególności. Otwórz swoją stronę główną (a tym samym stronę, na której umieściłeś całą zawartość) za pomocą Divi Builder i kliknij następującą ikonę:

aktywny link

Po kliknięciu ikony umieść następujące wiersze kodu CSS w polu Niestandardowy CSS: 

@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;
}}

Końcowe przemyślenia

W tym poście pokazaliśmy Ci kilka ładnych i łatwych sposobów na stylizację aktywnego linku w Twoim menu. Ten post był kontynuacją poprzedniego postu, w którym pokazaliśmy, jak tworzyć aktywne linki podczas przewijania dla jednostronicowych witryn Divi. Pamiętaj, że musisz najpierw zapisać zmiany, zanim zobaczysz wyniki, samo wyświetlenie podglądu strony nie załatwi sprawy. Jeśli masz jakieś pytania lub sugestie; upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej!

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!

Polecane zdjęcie autorstwa Botond1977 / shutterstock.com