Jak dodać pełnoekranowe responsywne menu w WordPress

Menu są niezbędne, aby pomóc odwiedzającym poruszać się po Twojej stronie WordPress i znajdować więcej Twoich postów i stron. Pełnoekranowe responsywne menu mogą być szczególnie pomocne przy projektowaniu strony internetowej dla użytkowników mobilnych.

Kiedy użytkownicy klikną lub dotkną ikony hamburgera, pełnoekranowe nakładka menu Twojej strony internetowej zostanie wyświetlona przy użyciu pięknej animacji.

Eksperymentowaliśmy z kilkoma różnymi typami menu na naszych własnych stronach internetowych, aby zobaczyć, co przynosi najlepsze rezultaty. W tym artykule pokażemy Ci, jak dodać responsywne menu pełnoekranowe w WordPressie bez pisania kodu.

Dlaczego warto dodać pełnoekranowe responsywne menu w WordPressie?

Menu pełnoekranowe responsywne znacznie ułatwia odwiedzającym nawigację po Twojej witrynie WordPress lub sklepie WooCommerce na smartfonach i tabletach.

Wykorzystując cały ekran na menu, łatwo jest dotykać linków bez przypadkowego wybierania niewłaściwej pozycji.

Ponieważ obecnie więcej osób przegląda strony na urządzeniach mobilnych niż na komputerach stacjonarnych, sprawdzanie wyglądu witryny na małych ekranach jest kluczowe.

Responsywne menu automatycznie dostosowuje się do różnych rozmiarów ekranu, zapewniając płynne doświadczenie dla każdego odwiedzającego.

Przyjrzyjmy się, jak dodać pełnoekranowe responsywne menu w WordPress.

Krok 1: Zainstaluj i aktywuj wtyczkę FullScreen Menu

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki FullScreen Menu.

Możesz zapoznać się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress dla początkujących, aby uzyskać więcej szczegółów.

Krok 2: Skonfiguruj ogólne ustawienia menu

Po aktywacji powinieneś przejść do strony Opcje menu pełnoekranowego w menu administracyjnym WordPress, aby skonfigurować ustawienia wtyczki.

Zostaniesz automatycznie przeniesiony do zakładki „Ustawienia”. Zacznij od zaznaczenia pola wyboru „Aktywuj animowane menu pełnoekranowe”, aby włączyć menu.

Dobrym pomysłem jest również zaznaczenie na początku pola „Pokazuj tylko dla użytkowników administracyjnych”. Pozwoli Ci to zobaczyć zmiany podczas konfigurowania menu, ale odwiedzający Twoją witrynę nie będą mogli go zobaczyć, dopóki nie skończysz.

Nie zapomnij wrócić i odznaczyć tego pola, gdy skończysz.

Poniżej tych opcji znajdziesz inne ustawienia, które pozwalają pokazywać menu tylko na urządzeniach mobilnych, zamykać menu po kliknięciu lub przewinięciu oraz ukrywać menu na określonych stronach. 

W naszym przykładzie pozostawimy te ustawienia niezaznaczone, ale możesz je dowolnie dostosować do swojej witryny.

Krok 3: Dostosuj wygląd i styl menu

Następnie dostosujemy wygląd menu. Na szczęście wtyczka menu pozwala na to bez potrzeby używania niestandardowego CSS.

Aby dostosować menu, musisz kliknąć zakładkę „Projekt/Wygląd” na górze strony. Na tej stronie możesz wybrać kolory, czcionkę i ustawienia animacji dla swojego menu.

Na górze strony zauważysz dwa ustawienia kolorów. Pierwszy kolor dotyczy ikony menu hamburger. Zazwyczaj pojawia się ona w obszarze nagłówka Twojej witryny. Kiedy odwiedzający klikną lub dotkną ją, menu pełnoekranowe zostanie pokazane lub ukryte.

Drugie ustawienie koloru dotyczy tła menu.

Po kliknięciu w każde pole pojawi się paleta kolorów. Możesz kliknąć wybrany kolor lub wpisać jego kod szesnastkowy.

Po wybraniu kolorów menu należy przewinąć stronę w dół do sekcji Czcionka/Wygląd. Tutaj możesz wybrać kolor czcionki, rodzinę i rozmiar, które będą używane dla tekstu menu.

W tym samouczku zalecamy trzymanie się domyślnych ustawień czcionki, które często wykorzystują czcionkę z Twojego motywu.

Jest to dobry wybór, ponieważ dopasuje się do ogólnego wyglądu Twojej witryny, a ładowanie dodatkowych czcionek może czasami spowolnić wydajność i szybkość Twojej witryny WordPress.

Istnieją również ustawienia dotyczące wyświetlania bocznego menu po lewej stronie na określonych stronach oraz przewijania głównego menu, jeśli nie jest ono wystarczająco wysokie. W tym samouczku pozostawimy te ustawienia odznaczone, ale możesz swobodnie eksperymentować z nimi na własnym blogu WordPress lub stronie internetowej.

Następnie przewiń w dół do sekcji „Ustawienia animacji”. Tutaj możesz dostosować dwa główne ustawienia.

Pierwszym z nich jest „Typ animacji”. Pozwala to wybrać kierunek animacji po aktywacji menu. Możesz wybrać od góry do dołu, od lewej do prawej i od prawej do lewej.

Drugie ustawienie to efekt, który uzyskujesz po najechaniu kursorem myszy na pozycję menu. Dostępne opcje to subtelna linia, która się pojawia (jak linia wypełnienia), zmiana koloru tła lub zmiana koloru tła z zaokrąglonym obramowaniem.

Krok 4: Zdefiniuj zawartość menu pełnoekranowego

Na koniec musisz przewinąć z powrotem na górę strony i kliknąć zakładkę „Treść menu”. Tutaj możesz wybrać menu WordPress, które będzie wyświetlane w Twoim menu pełnoekranowym.

Obok opcji „Wybierz menu” na górze musisz wybrać menu z listy rozwijanej. Jeśli jeszcze nie utworzyłeś menu nawigacyjnego, zapoznaj się z naszym przewodnikiem na temat dodawania menu nawigacyjnych w WordPress.

Jeśli chcesz, aby dodatkowe treści były wyświetlane na ekranie menu, możesz je dodać w następnej sekcji zatytułowanej „Darmowe HTML / Krótkie kody”. Po prostu wpisz swoje treści w pole edytora i dodaj wszelkie pliki multimedialne, które chcesz. Te treści będą wyświetlane pod menu.

Istnieje również pole wyboru, które doda link do Twojej strony z polityką prywatności. Wielu właścicieli witryn woli dodać ją w stopce zamiast w głównym menu.

Następnie możesz chcieć dodać ikony społecznościowe jako elementy menu. Będą one wyświetlane w rzędzie na dole Twojego menu pełnoekranowego.

Aby je dodać, po prostu przewiń w dół do sekcji „Ikony społecznościowe” i wprowadź tytuł dla ikony, na przykład „Facebook”. Następnie wybierz odpowiednią ikonę i wpisz adres URL swojej strony społecznościowej.

Możesz dodać więcej ikon, klikając przycisk „Dodaj kolejną ikonę”.

Na koniec możesz dodać pasek wyszukiwania na górze swojego responsywnego menu. Musisz przewinąć do dołu strony „Zawartość menu” i zaznaczyć pole „Dodaj pasek wyszukiwania?”. Jeśli chcesz, możesz również wpisać tekst zastępczy.

Krok 5: Zapisz zmiany i przetestuj swoje menu

Na koniec kliknij przycisk „Zapisz zmiany”, aby zachować swoje ustawienia.

Możesz teraz odwiedzić swoją stronę internetową, aby zobaczyć menu pełnoekranowe responsywne w akcji. Zalecamy zmianę rozmiaru przeglądarki, aby zobaczyć, jak menu zachowuje się na różnych rozmiarach ekranu.

Oto jak to wygląda na naszej stronie demonstracyjnej.

Gdy będziesz zadowolony z menu pełnoekranowego, nie zapomnij wrócić do sekcji Opcje menu pełnoekranowego w menu administracyjnym WordPress i odznaczyć opcji „Pokazuj tylko dla użytkowników administracyjnych”.

Po kliknięciu przycisku „Zapisz zmiany” odwiedzający Twoją witrynę będą mogli uzyskać dostęp do menu.

Najczęściej zadawane pytania dotyczące dodawania responsywnego menu pełnoekranowego w WordPress

Oto kilka pytań, które nasi czytelnicy często zadawali na temat dodawania responsywnego menu pełnoekranowego w WordPress:

Jak utworzyć responsywne menu w WordPress?

Aby utworzyć responsywne menu w WordPress, użyj przyjaznej dla urządzeń mobilnych wtyczki menu, takiej jak FullScreen Menu. Zapewnia to, że menu dostosowuje się do różnych rozmiarów ekranu, co ułatwia nawigację.

Jak sprawić, by nagłówek był responsywny w WordPress?

Sprawienie, by nagłówek był responsywny w WordPress, oznacza, że automatycznie dostosowuje się on do każdego urządzenia. Możesz to zrobić, używając responsywnego motywu lub dostosowując układ nagłówka za pomocą CSS i edytora bloków.

Szczegółowe instrukcje znajdziesz w naszym samouczku na temat dostosowywania nagłówka WordPress.

Jak utworzyć pełnoekranową stronę w WordPress?

Możesz utworzyć pełnoekranową stronę w WordPress, używając konstruktora stron, takiego jak SeedProd, lub ustawień motywu, które pozwalają na szablony „pełnej szerokości”. Usuwa to paski boczne i rozciąga treść na cały ekran.

Jak utworzyć responsywną tabelę w WordPress?

Aby utworzyć responsywną tabelę w WordPress, użyj bloku tabeli w edytorze bloków lub wtyczki z obsługą responsywnych tabel. Zapewnia to, że tabela będzie się schludnie przewijać lub układać na urządzeniach mobilnych.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać responsywne menu na pełnym ekranie do swojej witryny WordPress. Możesz również dowiedzieć się, jak dodać menu mega w witrynie WordPress lub jak dodać menu panelu przesuwnego w motywach WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.