Divi Plugin Highlight – Konfigurator menu mobilnego

Czy kiedykolwiek chciałeś zmienić styl swojego menu mobilnego niezależnie od menu pulpitu? System menu Divi zawiera ustawienia dla urządzeń mobilnych, które umieszczają menu w ikonie hamburgera, ale co, jeśli chcesz użyć innego nagłówka dla urządzeń mobilnych, dodać nową stylizację, a nawet animować otwieranie lub zamykanie menu? Możesz to zrobić za pomocą wtyczki innej firmy o nazwie Mobile Menu Customizer.

W tym wyróżnieniu wtyczki przyjrzymy się Mobile Menu Customizer z Divicio.us i zobaczymy, co może zrobić i jaki będzie miał wpływ na czas ładowania Twojej witryny. Obrazy w tych przykładach zostały zaczerpnięte z Unsplash.com.

Instalowanie Konfiguratora menu mobilnego

Musisz najpierw rozpakować pobrany plik. W nim zobaczysz trzy pliki:

1. Dziennik zmian
2. Divi-mobile-menu-customizer
3. CZYTAJ

Prześlij i aktywuj plik divi-mobile-menu-customizer.

W menu wtyczki na pulpicie nawigacyjnym znajduje się nowy link o nazwie Licencja wtyczki DMMC. Kliknij to i wprowadź klucz licencyjny, aby otrzymywać aktualizacje.

Nowe ustawienia dostosowywania motywów

Do Konfiguratora motywów dodawany jest nowy element menu o nazwie Konfigurator menu mobilnego. Wybranie go automatycznie wyświetla Twoją witrynę w widoku mobilnym za pomocą menu mobilnego. Możesz także wybrać tryb tabletu. W menu znajduje się siedem menu.

Ustawienia nagłówka menu

Ustawienia nagłówka menu obejmują ustawienia koloru tła nagłówka, koloru tekstu i ikon, formatu ikon, wpisywania tekstu dla otwartego i zamkniętego menu, rozmiaru tekstu, rozmiaru ikony, stylu czcionki paska menu oraz przesunięcia górnego menu rozwijanego.

Zmieniłem kolor tła nagłówka oraz kolory tekstu i ikon. Wybrałem wyświetlanie tekstu i ikony menu, wprowadziłem tekst, który ma być wyświetlany, oraz wybrałem pogrubienie i kursywę. Pozostawiłem domyślne rozmiary tekstu i czcionek. Mógłbym również pokazać ikonę po lewej stronie i tekst po prawej, tylko tekst lub samą ikonę.

W otwartym menu wpisałem tekst do wyświetlenia i wybrałem wyświetlanie ikony X. Ustawiłem również górne przesunięcie menu rozwijanego na 5, aby pokazać, że można je regulować.

Ustawienia menu

Ustawienia menu obejmują stałe menu, pełną szerokość (w trybie pionowym), dopełnienie, kolor tła górnego paska, ustawienia tekstu i ustawienia obramowania. Podoba mi się, że automatycznie pokazuje stronę w trybie pionowym, ale nie widziałem sposobu na wyświetlanie w trybie poziomym, więc nie jestem w stanie zobaczyć efektu menu o pełnej szerokości.

Ustawiłem to na stałe, aby menu pozostało na ekranie podczas przewijania. Ustawiłem kolory górnego paska i tła menu oraz wyśrodkowałem tekst. Widać, że ustawiłem przezroczystość, aby pokazać tylko trochę tła.

Zwiększyłem także odstępy i rozmiar czcionki, kolory czcionek oraz dostosowałem szerokość, promień i kolor obramowania. W tym drugim przykładzie dostosowałem promień górnej krawędzi oraz szerokość prawej i lewej krawędzi. Przydałoby się, gdyby małe suwaki miały przycisk przywracający ich domyślne ustawienia.

Ustawienia pozycji menu

Ustawienia pozycji menu dotyczą poszczególnych pozycji w menu. Dostosuj marginesy, wysokość, kolor tła, szerokość obramowania, promień obramowania i kolor obramowania.

W tym przykładzie zwiększyłem marginesy do 4, ustawiłem wysokość elementu na 22, szerokość obramowania na 5 i promień obramowania na 8, aby nadać mu lekko zaokrąglony róg.

Podmenu Ustawienia

Ustawienia podmenu umożliwiają zwijanie podmenu, zmianę kolorów tła i linków oraz dostosowanie rozmiaru i stylu czcionki. Dopasowałem kolory, zwiększyłem rozmiar czcionki z 14 do 16, ustawiłem kursywę i umożliwiłem zwijanie.

Cień

Cień pozwala kontrolować kierunek do wewnątrz i na zewnątrz, przesunięcie X i Y, rozmycie, rozmieszczenie i kolor. Ustawiłem ten na początek z przesunięciem X na 20, przesunięciem Y na -17, rozmyciem cienia na 5 i rozproszeniem na 10. Przyciemniłem go również, aby się wyróżniał.

Gradienty

Gradienty można zastosować do nagłówka menu i do samego menu. Daje ci trzy kolory z miejscem zatrzymania dla każdego. Możesz także zmienić kąt.

To jest spojrzenie na gradient menu.

Możesz także wyświetlić inny gradient dla menu i nagłówka menu. Oto ten sam gradient z innym kątem i miejscami zatrzymania dla nagłówka menu.

Animacje

Animacje udostępnia dwie listy rozwijane — jedną dla animacji otwartej i jedną dla animacji zamykającej, każda po 10 animacji. Animacje obejmują zanikanie, zmniejszanie, powiększanie, odwracanie itp. Możesz używać animacji wejścia i wyjścia w dowolnej kombinacji.

Ten używa Fade In Right i Fade Out Left.

Ten używa Grow and Shrink.

Ten używa Flip In X i Flip Out Y.

Ten używa Lightspeed In i Fade Out.

Wspólne korzystanie z ustawień

Do tego momentu podświetliłem każdy element menu osobno, abyś mógł zobaczyć, co robią. Oto kilka przykładów tego, jak wyglądają po połączeniu.

W tym przykładzie dostosowałem tło menu i kolory linków, zamieniłem ikonę menu na tekst, zmieniłem kolor paska, dostosowałem wysokość pozycji menu, zapewniłem górną ramkę, ustawiłem czcionki podmenu na pogrubienie i kursywę, ustawiłem kolor podmenu i zapewnił cień za pomocą wstawki i dostosował ustawienia tak, aby po prostu się wyświetlał.

Ten używa odsuniętej szerokości obramowania o promieniu 12, aby zaokrąglić rogi. Kolor obramowania jest czerwony. Zwiększyłem rozmiar i szerokość czcionki do maksimum. Tło jest czarne z kryciem 0,87. Nagłówek jest czarny z nieprzezroczystością 0,55. Link do menu jest czerwony, aby pasował do ramki menu rozwijanego.

Ten przykład zwiększa rozmiary czcionek i wykorzystuje różne odcienie czerwonych gradientów zarówno dla nagłówka, jak i menu rozwijanego. Ustawiłem kolor górnego paska na ciemny odcień czerwieni, aby pasował. Dostosowałem również wysokość menu.

W tym przykładzie zastosowano przesunięcie górne menu rozwijanego o wartości 100 i nie jest ono stałe. Odstępy między literami i rozmiar czcionki są maksymalne. Promień obramowania menu jest ustawiony na 50, a szerokość obramowania na 5. Tekst jest wyrównany do prawej. Tło jest białe z kryciem 30.

Szerokość obramowania pozycji menu to 1, a promień to 25. Użyłem tego samego czarnego tła, ale z kryciem 0,08, a krycie obramowania to 0,12.

Ustawienia podmenu mają krycie tła 0,55 i białą czcionkę. Cień nieco się wyróżnia, używając tej samej czerni z kryciem 0,17. Przesunięcie cienia jest ustawione na 16 zarówno dla x, jak i y. Umieściłem gradient w nagłówku, używając czerni z różnymi poziomami cienia i krycia.

Kilka drobnych poprawek całkowicie zmienia wygląd. Ten używa pogrubionych czcionek, które są wyśrodkowane, a krycie tła wynosi 0,90.

Oto spojrzenie na menu w trybie tabletu. Dobrym pomysłem jest przełączanie się między trybami podczas dostosowywania.

Aktualizacja – dwa nowe ustawienia

Przed opublikowaniem tego artykułu dodano dwa nowe ustawienia: obraz tła i ikony menu.

Ustawienia obrazu tła

Ustawienia obrazu tła umożliwiają przesłanie obrazu do umieszczenia za rozwijanym menu. Możesz wybrać jego rozmiar, położenie, czy powtarza się i jak przycina obramowanie.

Ustawienia ikony menu

Ustawienia ikon menu pozwalają wybrać ikonę dla każdego elementu menu oraz dostosować rozmiar i lokalizację.

Test strony mobilnej dostosowywania menu

Ponieważ wtyczka renderuje wiele efektów przy wszystkich włączonych funkcjach, postanowiłem przetestować ją za pomocą PageSpeed ​​Insights. Po wyłączeniu wtyczki mój serwer testowy uzyskuje wynik 70. Nie używam żadnych wtyczek minifikujących ani pamięci podręcznej.

Po włączeniu wtyczki wynik wzrósł z 70 do 69. Przetestowałem test dwa razy i za każdym razem otrzymałem ten sam wynik. Aby mieć taki poziom personalizacji, warto mieć 1 punkt.

Licencja

Możesz zainstalować wtyczkę na nieograniczonej liczbie stron internetowych zarówno dla Ciebie, jak i Twoich klientów. Obejmuje dożywotnie aktualizacje i 6 miesięcy wsparcia. Dokumentacja jest dostarczana w postaci filmów na stronie dewelopera.

Końcowe przemyślenia

Mobile Menu Customizer dodaje wiele funkcji stylizujących menu mobilne. Uważam, że dostosowania są łatwe w użyciu. Chciałem zobaczyć dołączone ikony menu, a teraz zostały. Chciałbym zobaczyć kilka funkcji logo. Chciałbym również zobaczyć dostosowania dostępne dla menu pulpitu. Wtyczka nie działa z Extra.

Dostosowania wyglądają świetnie, a do wyboru jest wiele ustawień. Podoba mi się, że możesz niezależnie stylizować nagłówek i menu. Jeśli interesuje Cię dostosowanie stylów menu mobilnego i dodanie animacji, warto zajrzeć do Konfiguratora menu mobilnego.

Chcielibyśmy usłyszeć od Ciebie. Czy wypróbowałeś Konfigurator menu mobilnego? Daj nam znać o swoich doświadczeniach z nim w komentarzach.

Polecane zdjęcie za pośrednictwem Francois Poirier / shutterstock.com