Jak zoptymalizować moduł menu Divi za pomocą 5 globalnych ustawień wstępnych (DARMOWE pobieranie)

Menu jest istotną częścią każdej witryny, więc warto poświęcić trochę więcej czasu i wysiłku, aby upewnić się, że wyświetlają się prawidłowo. W Divi możemy szybko zbudować niestandardowe menu za pomocą modułu Divi Menu, który zapewnia wiele potrzebnych opcji stylów. Ale zawsze pomaga usprawnić proces projektowania nagłówka witryny, przygotowując wcześniej kilka globalnych ustawień menu. Umożliwi to wdrożenie niestandardowej struktury stylu menu za pomocą jednego kliknięcia, dzięki czemu możesz poświęcić więcej czasu na dostosowywanie projektu, aby pasował do marki Twojej witryny. Na przykład, jeśli chcesz mieć wyśrodkowane menu z logo i łączami, które wyglądają jak przyciski, możesz użyć globalnego ustawienia wstępnego, aby wdrożyć tę platformę jednym kliknięciem. Oszczędza to cenny czas i energię.

W tym samouczku udostępnimy 5 globalnych ustawień wstępnych modułu menu, których możesz użyć podczas tworzenia niestandardowych nagłówków Divi. Oprócz bezpłatnego pobrania, które zawiera wszystkie 5 ustawień wstępnych, przeprowadzimy Cię przez proces tworzenia tych ustawień od podstaw.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, 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!

Aby użyć tych globalnych ustawień wstępnych menu w globalnym nagłówku, musisz najpierw zaimportować układ (wraz z ustawieniami wstępnymi) do biblioteki Divi w następujący sposób:

1. Przejdź do Divi > Biblioteka Divi.
2. Kliknij przycisk importu/eksportu u góry strony.
3. Wybierz zakładkę Importuj w wyskakującym okienku przenośności
4. Wybierz plik JSON układu do zaimportowania
5. Wybierz Importuj ustawienia wstępne
6. Kliknij przycisk Importuj

Następnie przejdź do kreatora motywów i edytuj globalny nagłówek. Dodaj moduł menu, w którym chcesz umieścić logo, i użyj ustawień wstępnych, aby odpowiednio stylizować i umieszczać menu.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Tworzenie 5 globalnych ustawień wstępnych modułu menu w Divi

#1 - Wyśrodkowane linki przycisków z logo

W przypadku naszego pierwszego globalnego ustawienia wstępnego stylu menu zaprojektujemy menu, które będzie zawierało łącza przycisków o równej szerokości, tak aby menu wyglądało symetrycznie. Uwzględnimy nawet stany najechania, które odpowiadają aktywnemu stanowi linków przycisków menu.

Aby utworzyć pierwsze globalne ustawienie wstępne menu, dodaj jednokolumnowy wiersz do zwykłej sekcji.

Następnie dodaj moduł menu do wiersza.

Otwórz ustawienia menu i dodaj menu do modułu.

Następnie dodaj logo witryny jako zawartość dynamiczną również do modułu.

Na karcie projekt zaktualizuj następujące elementy:

• Styl: wyśrodkowany

• Czcionka menu: Poppins
• Grubość czcionki menu: pogrubiona
• Styl czcionki menu: TT
• Rozmiar tekstu menu: 14px (komputer), 24px (tablet i telefon)
• Odstępy między literami menu: 0.15em
• Wysokość linii menu: 1,3 mm (komputer stacjonarny), 1,8 mm (tablet i telefon)

• Maksymalna wysokość logo: 60px

• Margines: 0px dół

Na karcie Zaawansowane dodamy kilka niestandardowych stylów linków menu, aby były wyświetlane jako przyciski.

Menu Link CSS

Dodaj następujący niestandardowy CSS do łącza menu:

Na komputerze…

min-width: 10em;
padding: 1em !important;
justify-content:center;
background: #f8f8f8;
border-radius: 10px;

Po najechaniu…

background: #333333;
color: #ffffff;
opacity: 1;

Aktywny link do menu CSS

background: #333333;
color: #ffffff;
opacity: 1;

Menu Logo CSS

margin-bottom: 10px;

Styl 1 Wynik

Oto efekt końcowy…

Dodawanie stylu menu 1 jako globalnego ustawienia wstępnego

Zduplikowana sekcja

Zanim dodamy styl menu jako globalne ustawienie wstępne, zduplikuj całą sekcję zawierającą moduł menu, abyśmy mogli użyć stylów menu do szybkiego rozpoczęcia następnego projektu.

Utwórz nowe ustawienie z bieżących stylów

Aby dodać globalne ustawienie wstępne, otwórz ustawienia oryginalnego modułu menu, który stworzyliśmy, i kliknij rozwijane łącze Preset.

Wybierz opcję Utwórz nowe ustawienie wstępne z bieżących stylów.

Nadaj nowemu presetowi nazwę („Centered Button Links with Logo”), a następnie zapisz preset.

#2 – Logo wyśrodkowane w linii z linkami do przycisków

Aby utworzyć drugie globalne ustawienie wstępne menu, otwórz ustawienia zduplikowanego modułu menu z poprzedniego projektu.

Na karcie projekt zaktualizuj styl:

• Styl: Logo wyśrodkowane w linii

Ze względu na niestandardowy CSS odziedziczony z poprzedniego stylu modułu, linki menu zachowują projekt przycisku, podczas gdy logo jest idealnie umieszczone w środku. Niestandardowy styl linków do przycisków pozwala linkom menu zachować ładny, symetryczny wygląd.

Na karcie Zaawansowane zaktualizuj menu CSS Logo w następujący sposób:

margin-bottom: 0px;

Styl 2 Wynik

Oto ostateczny wynik.

Dodawanie stylu menu 2 jako globalnego ustawienia wstępnego

Zduplikowana sekcja

Zanim dodamy styl menu jako globalne ustawienie wstępne, zduplikuj całą sekcję zawierającą moduł menu (styl 2), abyśmy mogli użyć stylów menu do szybkiego rozpoczęcia następnego projektu.

Utwórz nowe ustawienie z bieżących stylów

Aby dodać globalne ustawienie wstępne, otwórz ustawienia oryginalnego modułu menu dla utworzonego przez nas stylu 2 i kliknij rozwijane łącze Preset.

Wybierz opcję Utwórz nowe ustawienie wstępne z bieżących stylów.

Nadaj presetowi nazwę („Inline Centered Logo with Button Links”) i zapisz preset.

#3 – W pełni wyśrodkowane menu VW z odstępami i etykietą mobilną

W tym następnym stylu menu zaprojektujemy menu wyśrodkowane na pełnej szerokości bez logo, które ma tekst menu o rozmiarze i odstępie z jednostką długości vw, tak aby skalował się z szerokością przeglądarki. Będzie również miał etykietę „menu” nad ikoną hamburgera na urządzeniu mobilnym.

Aby utworzyć trzecie globalne ustawienie wstępne menu, potrzebujemy wiersza o pełnej szerokości. Otwórz ustawienia wiersza zawierające zduplikowane menu i zaktualizuj następujące elementy:

• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

Otwórz ustawienia modułu menu i usuń logo.

Na karcie projekt zaktualizuj styl:

• Styl: wyśrodkowany

Następnie zaktualizuj rozmiar tekstu za pomocą następującej jednostki długości VW, aby rozmiar tekstu był skalowany wraz z szerokością przeglądarki.

• Rozmiar tekstu menu: 1,5vw (komputer stacjonarny)

Aby utworzyć etykietę „menu” dla menu mobilnego, możemy dodać niestandardowy kod CSS do wyświetlacza Przed Psuedo Element na tablecie w następujący sposób:

Przed CSS

content: "MENU";
font-family: poppins;
font-size:12px;
position: absolute;
top:0;
left:50%;
transform: translate(-50%, -100%);

Zwróć uwagę, że rodzina czcionek jest ustawiona na „wyskakujące”, aby dopasować czcionkę używaną przez łącza menu. Musisz to zaktualizować, jeśli używasz innej czcionki.

UWAGA: To może, ale nie musi być widoczne w kreatorze wizualnym. Może być konieczne załadowanie aktywnej strony, aby zobaczyć wynik.

Następnie dodamy dodatkowe odstępy i obramowania linków menu po najechaniu myszą. Kontynuuj dodawanie następującego niestandardowego kodu CSS:

Menu Link CSS (komputer):

min-width: 10em;
justify-content:center;
text-align:center;
padding: .3em;
margin-bottom: 8px;
border: 1px solid transparent;

Menu Link CSS (najechanie):

color: #333;
border: 1px solid #333;
opacity:1;

CSS linku aktywnego menu :

color: #333;
border: 1px solid #333;
opacity:1;

Styl 3 Wynik

Dodawanie stylu menu 3 jako globalnego ustawienia wstępnego

Zduplikowana sekcja

Zanim dodamy styl menu jako ustawienie globalne, zduplikuj całą sekcję zawierającą moduł menu (styl 3), abyśmy mogli użyć stylów menu do szybkiego rozpoczęcia następnego projektu.

Utwórz nowe ustawienie z bieżących stylów

Aby dodać styl 3 jako globalne ustawienie wstępne, otwórz ustawienia oryginalnego modułu menu dla utworzonego przez nas stylu 3 i kliknij rozwijane łącze Preset.

Wybierz opcję Utwórz nowe ustawienie wstępne z bieżących stylów.

Nadaj ustawieniem nazwę („Full Centered VW Spaced Menu with Mobile Label”) i zapisz ustawienie.

#4 – Menu z prawym odstępem i etykietą na telefon komórkowy

Aby utworzyć czwarte globalne ustawienie wstępne menu, musimy zaktualizować układ kolumn wiersza o układ 0-czwarte-trzecie-czwarte. Będzie to naśladować niestandardowy układ nagłówka, który będzie zawierał moduł menu po prawej stronie i osobne miejsce na obraz logo w lewej kolumnie.

Upewnij się, że menu znajduje się w prawej kolumnie. Następnie otwórz ustawienia menu i zaktualizuj opcje elementów, aby wyświetlić ikonę koszyka na zakupy i ikonę wyszukiwania.

Na karcie projekt zaktualizuj styl:

• Styl: wyrównany do lewej

Następnie zaktualizuj następujące style łączy i wyrównanie tekstu:

• Kolor aktywnego łącza: #ac3cf7
• Rozmiar tekstu menu (komputer): 14px
• Wyrównanie tekstu: do prawej

Teraz, gdy nasza ikona hamburgera na urządzeniu mobilnym będzie po prawej stronie, musimy dostosować umiejscowienie etykiety menu na urządzeniu mobilnym. Następnie dodamy CSS linków do menu, aby upewnić się, że linki są rozmieszczone i umieszczone równo po prawej stronie kolumny/wiersza.

Dodaj następujący niestandardowy CSS:

Przed CSS (tablet)

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
right:6px;
transform: translateY(-100%);

CSS łącza menu:

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

Styl 4 Wynik

Oto końcowy wynik naszego wyrównanego do prawej menu. Dodałem jasnoszare tło do wiersza, aby lepiej widzieć wyrównanie.

Dodawanie stylu menu 4 jako globalnego ustawienia wstępnego

Zduplikowana sekcja

Zanim dodamy styl menu jako globalne ustawienie wstępne, zduplikuj całą sekcję zawierającą moduł menu (styl 4), abyśmy mogli użyć stylów menu do szybkiego rozpoczęcia następnego projektu.

Utwórz nowe ustawienie z bieżących stylów

Aby dodać styl 4 jako globalne ustawienie wstępne, otwórz ustawienia oryginalnego modułu menu dla utworzonego przez nas stylu 4 i kliknij rozwijane łącze Preset.

Wybierz opcję Utwórz nowe ustawienie wstępne z bieżących stylów.

Nadaj presetowi nazwę („Menu z prawym odstępem i etykietą na telefon komórkowy”) i zapisz preset.

#4 – Menu z odstępem po lewej stronie z etykietą na telefon komórkowy

Aby utworzyć czwarte globalne ustawienie wstępne menu, będziemy musieli zaktualizować układ kolumn wiersza o układ 0-czwarte-trzecie-czwarte. Będzie to naśladować niestandardowy układ nagłówka, który będzie zawierał moduł menu po lewej stronie i osobne miejsce na obraz logo (lub wezwanie do działania) w prawej kolumnie.

Otwórz ustawienia menu i zaktualizuj wyrównanie tekstu dla łączy menu:

• Wyrównanie tekstu: do lewej

Następnie musimy dostosować etykietę menu mobilnego tak, aby znajdowała się nad nawigacją z hamburgerami po lewej stronie. A dodając „kierunek: rtl” na tablecie, upewnimy się, że ikony telefonu komórkowego będą wyrównane po lewej stronie również na telefonie komórkowym.

Na karcie Zaawansowane zaktualizuj następujący niestandardowy CSS:

Przed CSS (tablet):

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
left:6px;
transform: translateY(-100%);

Główny element (tablet):

direction:rtl;

CSS łącza menu:

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

Oto ostateczny wynik.

Ostateczne rezultaty

Końcowe przemyślenia

Chociaż styl zewnętrzny tych modułów menu jest prosty, wewnętrzny projekt ramowy układu menu jest niezwykle pomocny w szybkim rozpoczęciu procesu twórczego. Co więcej, posiadanie globalnego ustawienia wstępnego z tymi frameworkami jeszcze bardziej przyspieszy ten proces. Zachęcamy do odkrywania innych sposobów dostosowywania modułu menu i dodawania unikalnych ustawień wstępnych do kolejnych projektów.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!