Jak stworzyć przejrzystą pionową nawigację, która nakłada się na twoją witrynę Divi?

W dzisiejszym samouczku Divi skupimy się przede wszystkim na zrobieniu czegoś wyjątkowego z pionową nawigacją w Twojej witrynie. Nawigacja pionowa to często zapomniana opcja, którą zapewnia motyw Divi. Chociaż nie jest często używany, może zmienić pełny wygląd Twojej witryny i doprowadzić ją do pożądanego poziomu. Aby Twoja nawigacja pionowa była jeszcze bardziej wyjątkowa niż jest, sprawimy, że będzie ona przezroczysta. Poza tym upewnimy się, że przejrzyste menu pokrywa się z resztą witryny.

Obecnie nie widzimy wielu witryn z nawigacją pionową. Ale w niektórych przypadkach może zapewnić oszałamiające rezultaty. W jednym z naszych poprzednich postów pokazaliśmy 12 przykładów witryn Divi, które wykorzystują nawigację pionową w celu ulepszenia ich projektowania stron internetowych.

Kiedy nawigacja pionowa nakłada się na witrynę, ważne jest użycie przezroczystego koloru tła. Jeśli nie używasz przezroczystego koloru tła, pionowa nawigacja może nakładać się na niektóre treści w Twojej witrynie. Nie chcesz pozbywać się głównego skupienia na treści Twojej witryny i absolutnie nie chcesz jej nakładać.

Aby pokazać, co dokładnie mamy na myśli, stworzyliśmy elegancki i uproszczony przykład, który pokażemy, jak to zrobić. Krok po kroku przeprowadzimy Cię przez różne kroki, które są potrzebne, aby osiągnąć następujące wyniki.

Dzisiejszy wynik końcowy: proste i eleganckie menu w pionie

Na powyższym obrazku możesz zauważyć prostotę, jaką przejrzysta nawigacja pionowa może wnieść do Twojej witryny. Oprócz tego, że pokażemy Ci, jak utworzyć przezroczyste menu pionowe, przedstawimy również kilka ogólnych wskazówek dotyczących projektowania, których możesz użyć podczas odtwarzania go tak, aby pasowało do Twojej witryny.

Tworzenie projektu w Divi

Subskrybuj nasz kanał YouTube

Ustawienia główne

Zanim zagłębimy się w wykonany przez nas przykład, przedstawimy kilka ogólnych informacji (i wierszy kodu CSS), które pomogą w prosty sposób zintegrować przejrzystą nawigację (bez wszystkich innych modyfikacji, które wprowadziliśmy w przykładzie) .

Aktywuj nawigację pionową

Na początek musisz włączyć pionową nawigację w swojej witrynie. Aby to zrobić, przejdź do pulpitu nawigacyjnego WordPress> Wygląd> Dostosuj> Nagłówek i nawigacja> Format nagłówka> I włącz nawigację pionową.

Wybierz ustawienia projektu w konfiguratorze motywów

Teraz, gdy nadal jesteś w konfiguratorze motywów, możesz dostosować wszystkie ustawienia nawigacji pionowej w taki sam sposób, jak zmieniasz górną nawigację. Wróć do Nagłówek i nawigacja > Menu główne > I wprowadź wszystkie modyfikacje, które chcesz wprowadzić w swoim menu głównym.

W tej części ważne jest, aby tło menu miało krycie mniejsze niż 1. Najlepiej nawet mniej niż 0,5. Upewnij się, że dotyczy to koloru tła. Jeśli chcesz, aby to samo dotyczyło koloru tła menu rozwijanego, wybierz tam również ten sam kolor.

Dodaj kod CSS

Po wprowadzeniu wszystkich pożądanych zmian w części projektowej nawigacji pionowej możesz przejść do części CSS. Ponieważ jesteśmy już w konfiguratorze motywów, dodamy tam niestandardowy kod CSS. Możesz oczywiście dodać kod CSS w szczególności do jednej strony lub za pomocą opcji motywu.

Kod CSS, który Ci udostępnimy, robi dwie rzeczy. Przede wszystkim upewnia się, że Twoja przejrzysta pionowa nawigacja i strona internetowa pokrywają się. Po drugie, pomaga dostosować szerokość nawigacji pionowej. Jeśli w ogóle nie chcesz zmieniać szerokości, możesz pozostawić ten fragment kodu poza swoją witryną i po prostu sprawić, by przezroczysta nawigacja pionowa i witryna nakładały się na siebie.

Te zmiany będą dotyczyć tylko komputerowej wersji Twojej witryny. Na ekranach o szerokości mniejszej niż 981px modyfikacje nie będą miały zastosowania.

Dodaj kod CSS w Theme Customizer

Po pierwsze, mamy kod, który sprawia, że ​​Twoja witryna wypełnia całą szerokość przeglądarki. Skopiuj i wklej następujący kod na karcie Dodatkowe CSS w swoim konfiguratorze motywów:

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

Dodatkowo, jeśli chcesz również dostosować szerokość nawigacji pionowej, skopiuj i wklej następujące wiersze kodu CSS:

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

Odtwarzanie uproszczonej nawigacji pionowej

Teraz, gdy zajęliśmy się niezbędnymi krokami tworzenia przejrzystej nawigacji pionowej, która nakłada się na Twoją witrynę, odtworzymy przykład. Przykład po raz kolejny wygląda tak:

Ogólne wskazówki dotyczące projektowania

Zanim zaczniemy, podzielimy się kilkoma ogólnymi wskazówkami i przemyśleniami dotyczącymi projektowania, o których należy pamiętać. Te wskazówki pomogą Ci w pełni wykorzystać elegancką i prostą witrynę, którą tworzysz. Przyjrzyjmy się dwóm wskazówkom, które zdecydowanie chcemy podkreślić.

Scentralizuj wszystko

Po pierwsze, upewnij się, że scentralizowałeś treści w swojej witrynie. To oczywiste, ale warto o tym wspomnieć. Jeśli korzystasz z przezroczystej nawigacji pionowej, która nakłada się na Twoją witrynę, scentralizowanie treści najlepiej do tego pasuje. Jeśli zamiast tego wyrównasz wszystko do lewej strony swojej witryny, jest bardziej prawdopodobne, że przezroczysta nawigacja pionowa i zawartość zostaną pomieszane. To prawdopodobnie nie jest wynik, który chcesz osiągnąć. Chcesz nadać priorytet symetrii i czytelności swojej witryny.

Jeśli zdecydujesz się na inaczej dopasowaną treść, upewnij się, że sprawdziłeś dopełnienie i marginesy treści. Jeśli odpowiednio zmodyfikujesz marginesy i dopełnienia, wyniki nadal mogą wyglądać świetnie. Ale prawdopodobnie będziesz musiał dokonać wielu ręcznych modyfikacji.

Wszędzie tego samego koloru tła

Jeśli używasz w pełni przezroczystego koloru tła do nawigacji pionowej, tak jak w tym przykładzie, ważne jest, aby zachować pewną spójność. Chcesz, aby kolor w nawigacji pionowej był czytelny i zauważalny, ponieważ ludzie powinni być w stanie płynnie poruszać się po Twojej witrynie.

Jeśli w przezroczystej nawigacji pionowej wybierasz jasny kolor czcionki, upewnij się, że obrazy lub kolory tła zawierają ciemne kolory. Podobnie, jeśli używasz ciemnego koloru czcionki, upewnij się, że używane obrazy lub kolory tła mają jasne kolory.

Zacznij tworzyć przykład

Bez dalszych opłat zacznijmy odtwarzać przykład, który Ci pokazaliśmy. Przede wszystkim utwórz nową stronę i dodaj do niej sekcję o pełnej szerokości. Pokażemy tylko, jak odtworzyć jedną sekcję strony. Oczywiście możesz kontynuować i dodać tyle sekcji, ile chcesz. Menu pozostanie dokładnie takie samo podczas przewijania.

Utwórz nagłówek o pełnej szerokości

W sekcji o pełnej szerokości dodaj nagłówek o pełnej szerokości. Następnie przejdź do karty Projekt, ustaw orientację tekstu i logo na „Środek” i włącz tryb pełnoekranowy również nagłówka o pełnej szerokości.

Ustawienia tytułu

Przewiń w dół tę samą kartę i wprowadź następujące zmiany w podkategorii Tekst tytułu:

• Czcionka tytułu: Lato Light
• Styl czcionki tytułu: wielkie litery
• Styl czcionki tytułu: 60 (komputer), 50 (tablet), 40 (telefon)
• Kolor tekstu tytułu: #FFFFFF

Ustawienia podtytułu

Ponadto kontynuuj przewijanie i upewnij się, że ustawienia podkategorii Tekst podtytułu są następujące:

• Czcionka podtytułu: Lato Light
• Rozmiar czcionki podtytułu: 22px (komputer i tablet), 19 (telefon)
• Kolor tekstu podtytułu: #c4c4c4

Ustawienia przycisków

Na koniec wprowadź następujące zmiany w podkategorii Przycisk na karcie Projekt:

• Użyj niestandardowych stylów dla przycisku pierwszego: Tak
• Przycisk One Rozmiar tekstu: 15 (komputer i tablet), 12 (telefon)
• Przycisk jeden kolor tekstu: #000000
• Przycisk jeden kolor tła: #FFFFFF
• Przycisk jeden czcionka: Lato Light
• Styl czcionki przycisku pierwszego: pogrubienie i wielkie litery

Ustawienia tła gradientu

Następnie otwórz ustawienia sekcji pełnej szerokości, aby dodać obraz tła z nakładką gradientową w podkategorii Tło na karcie Treść. W zależności od rodzaju tła i kolorów, których używasz, dodaj pasujące kolory.

W naszym przykładzie używamy ciemnego tła. Dlatego zaczniemy od czarnego koloru w gradiencie. Drugi kolor, który dopasowaliśmy do obrazu tła, to „rgba (0,49,109,0.43)”.

Ponadto ustawienia, których użyliśmy dla kolorów gradientu, są następujące:

• Typ gradientu: liniowy
• Kierunek gradientu: 87 stopni
• Pozycja startowa: 0%
• Pozycja końcowa: 62%

Idąc dalej, dodaj obraz tła i zastosuj następujące ustawienia:

• Rozmiar obrazu tła: okładka
• Pozycja obrazu tła: środek
• Powtarzanie obrazu tła: bez powtórzeń
• Mieszanie obrazu tła: nakładka

Zmiany w konfiguratorze motywów

W następnym kroku musimy wprowadzić kilka innych modyfikacji w konfiguratorze motywów. 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 zmiany:

• Maksymalna wysokość logo: 83
• Rozmiar tekstu: 14
• Odstępy między literami: 0
• Czcionka: Lato Light
• Styl czcionki: wielkie litery
• Kolor tekstu: #FFFFFF
• Kolor aktywnego łącza: #FFFFFF
• Kolor tła: #FFFFFF
• Kolor tła menu rozwijanego: rgba(221,153,51,0)
• Kolor linii menu rozwijanego: #1E73BE
• Kolor tekstu menu rozwijanego: #FFFFFF

Dodaj niestandardowy kod CSS w Theme Customizer

Gdy nadal będziesz w konfiguratorze motywów, dodamy potrzebne wiersze kodu CSS, aby układ wyglądał tak, jak wygląda.

Pierwsza część kodu usuwa lewy margines strony podczas korzystania z nawigacji pionowej. Druga część przesuwa menu bliżej lewej strony. Trzecia część umieszcza górny margines i dolną ramkę na każdej stronie w menu. Czwarta część dodaje górny margines do logo i usuwa margines po logo. I na koniec upewniliśmy się, że menu zachowuje tę samą odległość między logo a elementami menu, usuwając górną wyściółkę. Zmiany te dotyczą również menu podczas przewijania. Dlatego menu będzie wyglądało tak samo na całej stronie.

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

Ostateczny wynik

W wyniku wszystkich kroków, które wykonałeś w tym poście, powinieneś otrzymać następujący wynik w witrynie, nad którą pracujesz:

Zawijanie

W tym poście pokazaliśmy, jak zrobić przejrzystą nawigację pionową, która nakłada się na Twoją witrynę. Poza tym udostępniliśmy również elegancki i uproszczony projekt, którego możesz użyć na swojej własnej stronie internetowej, jeśli będziesz śledzić ten post krok po kroku. Jeśli masz jakieś pytania lub prośby, zostaw komentarz w sekcji komentarzy poniżej, abyśmy mogli się z nami skontaktować!

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!