Jak dodać narożną etykietę „Nową” lub „Polecany” do pozycji menu w niestandardowym nagłówku Divi

Podczas tworzenia nagłówka witryny zwrócenie szczególnej uwagi na zachowanie użytkowników może pomóc w zwiększeniu współczynników klikalności. Twój nagłówek powinien nie tylko dobrze wyglądać, ale powinien również pomagać odwiedzającym kierować odwiedzających do najważniejszych stron w Twojej witrynie. Często stosowaną techniką jest dodanie wezwania do działania w globalnym nagłówku, ale to nie jedyna dostępna opcja. Możesz również wybrać etykietę narożną na pozycjach menu, które chcesz umieścić w centrum uwagi. W tym samouczku pokażemy, jak dodać etykietę „polecane” lub „nowe” do określonych pozycji menu. Te narożne etykiety pomogą podkreślić pozycje menu na liście, co zwiększa zmianę zainteresowania odwiedzających i klikania. Będziesz mógł również pobrać globalny szablon nagłówka!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na koncepcję samouczka na różnych rozmiarach ekranu.

Pobierz szablon globalnego nagłówka ZA DARMO

Aby położyć swoje ręce na darmowym szablonie globalnego nagłówka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

1. Dodaj etykiety do pozycji menu WordPress

Przejdź do menu w wyglądzie

Pierwsza część tego samouczka poświęcona jest konfigurowaniu etykiet w menu WordPress. Aby to zrobić, przejdź do pulpitu WordPress> Menu> Otwórz menu główne, którego używasz, lub utwórz nowe.

Dodaj etykietę do polecanego elementu menu

Następnie dodamy wyróżnioną etykietę do wybranego przez nas elementu menu, umieszczając znaczniki HTML etykiety przed elementem menu.

• <label class="menu-label featured-label">Featured</label>

  Usługi

Dodaj etykietę do nowej pozycji menu

Zrobimy to samo dla innej wybranej przez nas pozycji menu i zmienimy klasę CSS wewnątrz tagów wraz z kopią etykiety.

• <label class="menu-label new-label">New</label>

  Darmowe kursy

2. Przejdź do kreatora motywów Divi

Przejdź do kreatora motywów Divi i dodaj globalny nagłówek

Teraz, gdy etykiety zostały skonfigurowane, nadszedł czas, aby przejść na Divi. Przejdź do kreatora motywów Divi w swojej witrynie i kliknij „Dodaj globalny nagłówek”.

Zacznij budować od podstaw

Następnie wybierz „Buduj globalny nagłówek”, aby zostać przekierowanym do edytora szablonów.

3. Zbuduj globalny nagłówek

Ustawienia sekcji

Kolor tła

W edytorze szablonów zauważysz sekcję. Otwórz tę sekcję i dodaj kolor tła. Projekt nagłówka, który zbudujemy, pasuje do pakietu Tutor Layout Pack, ale możesz swobodnie tworzyć dowolny projekt nagłówka, o ile dołączysz do niego moduł kodu (później).

• Kolor tła: #2a3749

Rozstaw

Przejdź do zakładki projektu przekroju i usuń wszystkie domyślne górne i dolne wyściółki w ustawieniach odstępów.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Widoczność

Ze względu na nakładanie się, które dodamy do naszego wiersza (jak widać na podglądzie), musimy ustawić widoczne przepełnienia sekcji.

• Przepełnienie poziome: Widoczne
• Przepełnienie pionowe: Widoczne

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Kolor tła

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i zastosuj biały kolor tła.

• Kolor tła: #FFFFFF

Rozmiary

Przejdź do zakładki projektu i odpowiednio zmodyfikuj ustawienia rozmiaru:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

W ustawieniach odstępów zastosujemy również niestandardowe wartości dopełnienia.

• Górna wyściółka: 25px
• Dolna wyściółka: 25px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Granica

Wraz z kilkoma zaokrąglonymi rogami.

• Wszystkie rogi: 6px

Cień Pudełka

I subtelny cień pudełkowy.

• Pozycja pionowa cienia pudełka: 16px
• Kolor cienia: rgba (0,0,0,0,07)

Przekształć Tłumacz

Następnie zmienimy położenie wiersza, korzystając z ustawień tłumaczenia transformacji na karcie projektu.

• Przekształć Tłumacz w prawo: 50px

Przepełnienia

Aby upewnić się, że nasze listy rozwijane pojawiają się na mniejszych ekranach, uzupełnimy ustawienia wierszy, ustawiając przepełnienia na widoczne.

• Przepełnienie poziome: Widoczne
• Przepełnienie pionowe: Widoczne

Dodaj moduł menu do kolumny

Wybierz menu

Czas dodać moduł menu. Wybierz menu, które edytowałeś w pierwszej części tego samouczka.

Prześlij logo

Następnie prześlij logo.

Ustawienia tekstu menu

Następnie przejdź do zakładki projektowania i zmień ustawienia tekstu menu w następujący sposób:

• Czcionka menu: PT Sans
• Kolor tekstu menu: #000000
• Rozmiar tekstu menu: 16px
• Wyrównanie tekstu: do prawej

Rozwijane ustawienia menu

Zmodyfikuj również kolor linii menu rozwijanego.

• Kolor linii menu rozwijanego: #007aff

Ikony

Kontynuuj, zmieniając kolor ikony menu hamburgera w ustawieniach ikon.

• Kolor ikony menu hamburgerów: #007aff

Rozmiary

I uzupełnij ustawienia modułu, przypisując maksymalną szerokość logo do ustawień rozmiaru.

• Maksymalna szerokość logo: 40%

Dodaj moduł kodu do kolumny

Po ukończeniu ogólnego wyglądu i stylu modułu menu kontynuuj, dodając moduł kodu tuż pod nim.

Dodaj kod CSS

Poniższy kod CSS pomoże nam indywidualnie stylizować etykiety menu i stworzyć responsywny projekt:

<style>
 
.menu-label {
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;   
border-radius: 5px;    
font-size: 10px;  
padding: 5px 10px;  
}  
  
.featured-label {
background-color: #F9654D;
}
.new-label {
background-color: #007AFF;
}
 
.et_pb_menu .et_pb_menu__menu, 
.et_pb_menu .et_pb_menu__menu>nav, 
.et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu>nav>ul {
width: 100% !important;
}

.et_pb_menu .et_pb_menu__menu>nav>ul>li
{
padding-left: 15px !important;
padding-right: 15px !important;
}

@media all and (min-width: 980px) {
.menu-label {  
position: absolute;
top: -10px;  
padding: 8px 15px;
}

}
@media all and (max-width: 980px) {  
.menu-label {
position: relative;
float: right;
font-size: 12px;  
padding: 5px 20px;   
}
}
  
</style>

4. Zapisz wszystkie zmiany w kreatorze motywów i podgląd wyników

Po zakończeniu projektowania nagłówka upewnij się, że zapisałeś wszystkie zmiany Divi Theme Builder przed wyświetleniem wyniku na swojej stronie!

Zapowiedź

Teraz, gdy wykonaliśmy już wszystkie kroki, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Końcowe przemyślenia

W tym poście pokazaliśmy, jak wyróżnić określone pozycje menu w globalnym nagłówku zbudowanym przez Divi. Dokładniej, w naszym menu WordPressa umieściliśmy etykiety narożne, które są wyświetlane w module menu. To świetny sposób na wyróżnienie różnych pozycji menu w menu bez tworzenia przytłaczającej podróży nawigacyjnej. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.