Jak stworzyć pionową nawigację z Divi, która napędza biznes?

W dzisiejszym samouczku Divi pokażemy, jak stworzyć pionową nawigację, która napędza biznes w Twojej witrynie. Nawigacja pionowa, którą pokażemy, jak to zrobić, będzie zwykle używana w przypadku firm, które uważają, że ważne jest, aby użytkownicy natychmiast zareagowali. Na przykład, jeśli jesteś właścicielem restauracji, która umożliwia klientom zamawianie online, możesz chcieć, aby Twoja witryna pomagała odwiedzającym działać szybko.

Pionowa nawigacja, którą pokażemy, jak to zrobić, będzie zawierać ważne informacje i wezwania do działania zamiast stron. Uwzględnienie ich w nawigacji pionowej pobudzi odwiedzających do zamówienia, a tym samym zwiększy współczynnik konwersji witryny.

Wynik

Zanim przejdziemy do różnych kroków i inspiracji, spójrzmy na wynik nawigacji pionowej, który możesz osiągnąć na końcu tego postu:

Oprócz pokazania, jak dodać różne elementy menu do nawigacji pionowej, użyjemy również nawigacji stałej. W ten sposób masz pewność, że informacje podążają za użytkownikami przez cały one-pager.

Inspiracja

Inspiracją, jaką czerpaliśmy z nawigacji pionowej, która napędza biznes, jest witryna, którą zaprezentowaliśmy w poprzednim poście. W tym poście wymieniliśmy 12 witryn, które wykorzystują nawigację pionową do własnych celów. Jednym z przykładów, które przykuły uwagę, była strona internetowa Eat Thai Restaurant. Ich nawigacja pionowa jest jedną z tych nieszablonowych koncepcji. Ich strona internetowa jest jednostronicowa, ale znaleźli dobry sposób, aby nadal korzystać z możliwości nawigacji. Ich strona internetowa wygląda tak:

Jak stworzyć pionową nawigację z Divi, która napędza biznes?

Subskrybuj nasz kanał YouTube

Włącz nawigację pionową

Na początek musimy aktywować opcję nawigacji pionowej, którą oferuje Divi. Aby to zrobić, przejdź do pulpitu nawigacyjnego WordPress> Wygląd> Nagłówek i nawigacja> Format nagłówka> Włącz nawigację pionową.

Włącz stałą nawigację

Odtwarzana przez nas nawigacja pionowa, podobnie jak strona internetowa restauracji Eat Thai, zostanie naprawiona. Aby naprawić nawigację pionową, przejdź do pulpitu nawigacyjnego WordPress> Divi> Opcje motywu> karta Ogólne> Włącz stałą nawigację.

Ustawienia głównego menu (konfigurator motywów)

Następną rzeczą, którą musisz zrobić, to wprowadzić pewne zmiany w swoim menu głównym. Jeśli korzystasz z pulpitu nawigacyjnego WordPress, przejdź do Wygląd > Dostosuj > Nagłówek i nawigacja > Główny pasek menu . Gdy już tam będziesz, możesz wprowadzić w nim następujące zmiany (lub dowolne inne zmiany, które chcesz wprowadzić):

• Ukryj obraz logo: Wyłącz
• Maksymalna wysokość logo: 100
• Górny margines menu: 0
• Rozmiar tekstu: 14
• Odstępy między literami: -1
• Czcionka: Lato Light
• Kolor tekstu: #FFFFFF
• Kolor aktywnego łącza: #FFFFFF
• Kolor tła: #004159
• Kolor tła menu rozwijanego: #004159

Naprawiono ustawienia menu nawigacji (Konfigurator motywów)

Ostatnią rzeczą, którą musimy zrobić w konfiguratorze motywów, jest upewnienie się, że logo pojawia się również podczas przewijania. Jeśli nadal jesteś w konfiguratorze motywów, przejdź do opcji Nagłówek i nawigacja > Stałe ustawienia nawigacji > I upewnij się, że opcja „Ukryj logo” jest wyłączona.

Dodaj pozycje menu

Idąc dalej, dodamy elementy menu do naszej pionowej nawigacji. Ta część wpisu prawdopodobnie zajmie Ci większość czasu. Musisz dodać każdy z elementów osobno za pomocą niestandardowych linków.

Aktywuj klasy CSS

Ale zanim zaczniemy dodawać elementy menu, musisz upewnić się, że opcja Klasy CSS jest włączona. Ta opcja umożliwia przypisanie klasy do każdego z elementów menu z osobna. W tym przypadku jest to konieczne, ponieważ większość elementów będzie miała własne ustawienia stylu. Aby włączyć opcję Klasy CSS, kliknij „Opcje ekranu” w prawym górnym rogu strony Menu i włącz opcję Klasy CSS, jak pokazano na zrzucie ekranu poniżej.

Dodaj nowe menu

Po aktywowaniu klas CSS dla elementów menu możesz iść dalej i utworzyć nowe menu. Nadaj mu nazwę i upewnij się, że to nowe menu jest Twoim głównym menu.

Po dodaniu wszystkich pozycji menu (które pokażemy krok po kroku) Twoje menu będzie wyglądać tak na zapleczu:

Numer telefonu

Ponieważ jest to jednostronicowy, w menu nie będzie żadnych stron. Wszystkie pozycje, które zamierzamy dodać do menu, będą raczej niestandardowymi linkami. Daje nam to możliwość zabawy z rzeczami, które chcemy dodać.

Aby dodać swój pierwszy element menu, kliknij Linki niestandardowe i dodaj numer telefonu w polu Etykieta nawigacyjna. Możesz wybrać, czy chcesz dodać do niego adres URL, czy nie. Jednak dodając pozycję menu do menu, musisz podać adres URL. Po dodaniu elementu menu do menu możesz usunąć adres URL i mieć pewność, że nic się nie stanie, gdy ktoś kliknie element menu.

Po dodaniu elementu menu do menu zobaczysz także klasę CSS. W tym miejscu będziesz musiał zdecydować o klasie CSS, która zmodyfikuje styl elementu menu. W tym przypadku używamy klasy „numer telefonu”. Jeśli chcesz po prostu skopiować i wkleić wiersze kodu CSS na końcu tego posta, upewnij się, że używasz klas CSS wymienionych w tych krokach.

Adres

Podobnie dodamy adres. Wpisz adres w etykiecie nawigacyjnej i dodaj adres URL, jeśli chcesz. Klasa, której używamy dla pozycji menu adresu, to po prostu „adres”.

Ikony społecznościowe

Dodanie ikon społecznościowych do nawigacji pionowej wymaga nieco więcej wysiłku. W poprzednim poście wyraźnie zajęliśmy się dodawaniem ikon społecznościowych do głównego menu. Jednak w tym przypadku metoda będzie nieco inna, ponieważ będziemy musieli ustawić ikony obok siebie w nawigacji pionowej.

Dodaj znakomitą czcionkę

Pierwszą rzeczą, którą musisz zrobić, jeśli jeszcze tego nie zrobiłeś, jest dodanie Font Awesome do opcji motywu. Aby to zrobić, przejdź do pulpitu WordPress> Divi> Opcje motywu> Integracja> I wklej następujący krótki kod do nagłówka swojej witryny:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

Uzyskaj skróty

Aby uzyskać skróty do ikon społecznościowych; otwórz tę stronę w witrynie Font Awesome. W polu wyszukiwania widocznym na tej stronie wyszukaj różne ikony, które chcesz dodać do nawigacji pionowej.

Po kliknięciu ikony zobaczysz krótki kod połączony z ikoną. Zapisz gdzieś każdy z tych skrótów.

Dodaj ikony społecznościowe do menu

Idąc dalej, dodamy ikony społecznościowe. Zwykle możesz dodać każdą z ikon społecznościowych osobno jako elementy menu. Ale ponieważ chcemy, aby pojawiały się tuż obok siebie, musimy umieścić je w tej samej pozycji menu. Kod HTML, który musisz dodać do etykiety nawigacyjnej, jest następujący:

<a href="#" target="_blank"><i class="fa fa-facebook-official facebook" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-instagram instagram" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-envelope envelope" aria-hidden="true"></i></a>

Nie zapomnij dodać adresu URL do każdej z ikon. Klasa, której używamy dla wszystkich trzech ikon społecznościowych łącznie, to „opakowanie ikon”, ale przypisaliśmy również dodatkową klasę do każdej ikony społecznościowej, aby wprowadzić indywidualne poprawki. Możesz zauważyć te klasy zaraz po klasie Font Awesome. Nazywają się „facebook”, „instagram” i „koperta”.

Wskazówki

W następnym elemencie menu użyliśmy słowa „wskazówki” jako nazwy klasy CSS.

Linia

Aby dodać linię tuż pod wskazówkami, musimy dodać pusty znak do nawigacji po etykietach. Dzieje się tak, ponieważ WordPress nie pozwala na tworzenie pozycji menu bez powiązanej z nią etykiety. Aby dodać pusty znak do elementu menu wiersza, po prostu dodaj „ ” do etykiety nawigacyjnej. Ponadto dodaj również „line” jako nazwę klasy CSS do tego elementu menu.

Godziny otwarcia

Idąc dalej, dodamy godziny otwarcia i przypiszemy do nich nazwę klasy CSS „godziny”.

Wezwanie do działania 1

Następnie dodamy pierwsze wezwanie do działania. Przypiszemy do niego nazwę klasy CSS 'cta-1'.

Wezwanie do działania 2

W przypadku drugiego CTA użyjemy nazwy klasy CSS „cta-2”.

Przycisk CTA

Dodanie przycisku CTA do pionowej nawigacji wymaga kilku kroków więcej niż zwykłe pozycje menu, które są tylko tekstem. Zacznij od otwarcia strony, której używasz jako one-pager, i wykonaj kolejne kroki wymienione poniżej.

Utwórz przycisk na stronie docelowej

Jeśli chcesz użyć przycisku CTA w swojej pionowej nawigacji, musisz mieć ten sam przycisk gdzieś na swoim one-pagerze. Po utworzeniu możesz sprawdzić element i skopiować następujące wiersze kodu (połączone z utworzonym przyciskiem), które pojawiają się w kodzie Twojej witryny:

<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> 
<a class="et_pb_button et_pb_button_0 et_pb_module et_pb_bg_layout_light"> 
ORDER NOW 
</a> 
</div>

Oczywiście ten kod może się różnić w zależności od sposobu, w jaki go ostylujesz. Zależy to również od tego, czy na tej samej stronie znajdują się inne przyciski, czy nie. Wiedz, że przycisk pojawi się tylko w stylu, który mu przypiszesz na stronie, na której znajduje się przycisk. Dlatego dodanie przycisku do nawigacji pionowej jest zazwyczaj preferowane tylko wtedy, gdy dotyczy one strony typu one-pager.

Uwaga: Upewnij się, że dostosowałeś rozmiar czcionki i dopełnienie przycisku w module przycisków, aby idealnie pasowały do ​​nawigacji pionowej.

Dodaj jako element menu

Po skopiowaniu potrzebnego kodu HTML połączonego z przyciskiem dodaj nowy niestandardowy link i dodaj kod do etykiety nawigacyjnej. Klasa CSS, której używamy dla tego elementu menu, to „cta-3”.

Dodaj linie kodu CSS

Kolejna część tego postu poświęcona jest udostępnieniu linii kodu CSS, które pomogą Ci osiągnąć końcowy efekt i układ. Zauważysz, że użyliśmy klas CSS, które przypisaliśmy do różnych pozycji menu. Jeśli jednak zdecydowałeś się na użycie innych nazw klas, upewnij się, że zmieniłeś je w kodzie CSS, aby to działało.

Aby dodać kod CSS, przejdź do pulpitu nawigacyjnego WordPress> Divi> Opcje motywu> Przewiń w dół kartę Ogólne i dodaj następujące wiersze kodu CSS do pola Niestandardowy CSS:

@media only screen and (min-width:992px) {
.et_vertical_nav #page-container #main-header {
margin: 10px !important;
height: 93% !important;
z-index: 9999;
}}
.phone-number {
font-size: 1.9em !important;
font-weight: 400 !important;
}
.address {
font-weight: 300 !important;
}
@media only screen and (min-width:769px){
#main-header div#et-top-navigation {
padding-top: 110px;
height: 100%;
position: static !important;
}}
@media only screen and (min-width:769px){
.et_vertical_nav span.logo_helper {
display: none;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header #logo {
margin-bottom: 28px;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header .container {
margin-left: 25px !important;
margin-right: 25px !important;
height: 100% !important;
}}
.facebook, .instagram, .envelope {
padding: 7px 13px 7px 13px;
font-size: 1.6em;
}
.icon-wrapper a {
display: inline-block !important;
}
.directions {
font-size: 1.2em;
font-weight: 400;
padding-top: 0;
text-align: center;
}
.line {
border-top: 1px solid;
color: #fff;
margin: 8px auto auto;
width: 20%;
}
.hours {
color: #ffffff;
font-size: 10px;
font-weight: 300;
text-align: center;
}
.cta-1 {
margin-top: 5px !important;
font-size: 1.3em;
font-weight: 600;
text-align: center;
}
.cta-2{
font-size: 1.1em;
font-weight: 300;
letter-spacing: 0.02em;
text-align: center;
}
#page-container {
background: #d6d4d1;
}

@media only screen and (max-width:768px) {
.directions, .line, .cta-1, .cta-2, .cta-3 {
display: none !important;
}}

#main-header #top-menu-nav .nav li {
line-height: 10.5px;
}

Zmień kolor tła sekcji

Ostatnim krokiem, który musisz zrobić, jest zmiana kolorów tła sekcji na swoim one-pager. Upewnij się, że ten kolor jest taki sam jak kolor, którego używasz w kontenerze strony. W tym przypadku jest to „#d6d4d1”.

Wynik

Po dodaniu wszystkich elementów menu i kodu CSS połączonego z każdym z tych elementów menu powinieneś być w stanie osiągnąć następujący wynik:

Końcowe przemyślenia

W tym poście pokazaliśmy, jak stworzyć pionową nawigację dla swojego one-pagera. Ten post został zainspirowany witryną Eat Thai Restaurant, która została również stworzona z Divi. Jeśli prześledziłeś cały post krok po kroku, powinieneś być w stanie osiągnąć wynik przedstawiony powyżej. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw 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!

Polecany obraz autorstwa Vectomart / shutterstock.com