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?

Dobrze zaprojektowane menu pomaga odwiedzającym poruszać się po Twojej stronie WordPress lub sklepie WooCommerce. Jednak trudno jest dotknąć standardowego menu w nagłówku podczas korzystania z małego ekranu smartfona.

Już teraz dla wielu stron internetowych liczba odwiedzających mobilnych przewyższa liczbę odwiedzających z komputerów stacjonarnych. Dlatego zalecamy, abyś podglądał mobilną wersję swojej strony WordPress, aby zobaczyć, jak Twoja witryna wygląda na urządzeniach mobilnych.

Pełnoekranowe responsywne menu mobilne automatycznie dostosowuje się do różnych rozmiarów ekranu. Ponieważ cała dostępna przestrzeń jest wykorzystywana na menu, łatwiej jest nawigować na smartfonach i tabletach.

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

Jak dodać pełnoekranowe responsywne menu w WordPress

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki FullScreen Menu. Możesz zapoznać się z naszym przewodnikiem krok po kroku na temat jak zainstalować wtyczkę WordPress dla początkujących, aby uzyskać więcej szczegółów.

Po aktywacji przejdź do strony Opcje menu pełnoekranowego w menu administratora WordPress, aby skonfigurować ustawienia wtyczki. Zostaniesz automatycznie przekierowany 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 „Pokaż menu tylko dla użytkowników Admin”. 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.

Inne ustawienia pozwalają wyświetlać menu tylko na urządzeniach mobilnych, zamykać menu po kliknięciu lub przewinięciu, a także ukrywać menu na określonych stronach. W naszym przykładzie pozostawimy te ustawienia niezaznaczone, ale możesz je dowolnie dostosować do własnej witryny.

Projekt i Wygląd Menu Pełnoekranowego

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

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

Na górze strony zauważysz dwa ustawienia kolorów. Pierwszy kolor dotyczy ikony menu hamburgera. Będzie ona wyświetlana w prawym górnym rogu Twojej witryny. Kiedy odwiedzający klikną lub dotkną ją, menu pełnoekranowe zostanie wyświetlone 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 pozostaniemy przy domyślnych ustawieniach, które wykorzystują czcionkę z naszego motywu. Zalecamy to ustawienie, ponieważ będzie ono pasować do projektu Twojej witryny. Ponadto ładowanie dodatkowych czcionek może wpłynąć na wydajność i szybkość Twojej witryny WordPress.

Istnieją również ustawienia do wyświetlania bocznego menu na określonych stronach i przewijania głównego menu, jeśli nie jest wystarczająco wysokie. W tym samouczku pozostawimy te ustawienia odznaczone, ale zachęcamy do eksperymentowania 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.

Drugim ustawieniem jest efekt, który uzyskujesz, gdy najedziesz myszką na pozycję menu. Dostępne opcje to linia wypełnienia, kolor tła i kolor tła z zaokrągloną ramką.

Treść 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 stron internetowych woli jednak dodać ją do stopki zamiast do głównego 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ć natywną wyszukiwarkę WordPress na górze swojego responsywnego menu. Musisz przewinąć do dołu strony „Zawartość menu” i zaznaczyć pole „Dodaj wyszukiwarkę?”. Jeśli chcesz, możesz również wpisać tekst zastępczy.

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 i odznaczyć opcji „Pokazuj menu tylko dla użytkowników administracyjnych”. Po kliknięciu przycisku „Zapisz zmiany” odwiedzający Twoją witrynę będą mogli uzyskać dostęp do menu.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać pełnoekranowe responsywne menu do swojej witryny WordPress. Możesz również chcieć dowiedzieć się jak dodać mega menu na swojej stronie WordPress lub jak dodać menu z panelem bocznym 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.