Jak dodać niestandardowy stały nagłówek dla urządzeń mobilnych za pomocą Divi

Opublikowany: 2017-09-01

Posiadanie stałego nagłówka (lub nawigacji) na urządzeniu mobilnym może zwiększyć użyteczność witryny, jeśli zostanie to zrobione poprawnie. Poprawiona nawigacja ogólnie wydaje się być o 22% szybsza w nawigacji niż standardowe nagłówki. W tym szybkim świecie technologii jest to znacząca statystyka, nawet jeśli była to połowa tego.

A dzięki Divi dodanie stałego nagłówka do witryny można wykonać za pomocą kilku wierszy CSS. Divi umożliwia już dostosowywanie nagłówków mobilnych za pomocą narzędzia Theme Customizer, ale obecnie nie ma wbudowanego ustawienia wdrażania stałego nagłówka dla urządzeń mobilnych. W tym samouczku pokażę, jak dodać niestandardowy stały nagłówek na telefonie komórkowym, który zawiera następujące elementy:

  • Inne (bardziej przyjazne dla urządzeń mobilnych) logo niż wersja na komputery.
  • Krótszy nagłówek, aby zapewnić więcej dostępnej przestrzeni wyświetlania.
  • Większa klikalna ikona nawigacji po hamburgerach, ułatwiająca wdrożenie mobilnej nawigacji.
  • Półprzezroczyste tło, które sprawia, że ​​nagłówek jest jeszcze bardziej uciążliwy podczas przeglądania witryny.

Oto mała zapowiedź tego, jak będzie wyglądał nagłówek.

naprawiony nagłówek

Ustawić

Ta konfiguracja jest podobna do mojego poprzedniego postu na temat przełączania logo w stałym nagłówku. Zanim zaczniesz, upewnij się, że wykonałeś następujące czynności:

  1. Upewnij się, że masz zainstalowaną najnowszą wersję Divi.
  2. Utwórz aktywne menu główne dla swojej witryny.
  3. Z zaplecza witryny WordPress przejdź do Dostosowywanie motywu > Nagłówek i nawigacja > Format nagłówka i upewnij się, że masz wybrany domyślny styl nagłówka.

    naprawiony nagłówek

  4. Stwórz dwie wersje swojego logo o wymiarach 200×131 i dodaj je do swojej biblioteki multimediów WordPress. Jedno logo będzie używane do głównego nagłówka, a drugie do nagłówka stałego. Jeśli możesz, ustaw wersję logo ze stałym nagłówkiem bardziej poziomo, aby nie było rozmyte pionowo na mniejszym stałym nagłówku. Oto przykład mojego głównego logo nagłówka, którego używam. naprawiony nagłówek Oto przykład mojego stałego logo nagłówka. Zauważ, że wyciąłem tekst, aby stworzyć prostsze i bardziej poziome logo, które ładnie pasuje do nagłówka o mniejszej wysokości. Jest mało prawdopodobne, by ktokolwiek i tak był w stanie przeczytać ten tekst, a marka nadal jest reprezentowana.

    naprawiony nagłówek

  5. Skonfiguruj swoje menu główne z pozycjami menu.

    Ponieważ dodamy niestandardowy kod CSS, aby uzyskać stały nagłówek, nie musimy dostosowywać opcji standardowego nagłówka lub stałego nagłówka w konfiguratorze motywów. Ale jeśli chcesz powielić ustawienia rozmiarów menu i logo w moim przykładzie, wykonaj następujące czynności (jest to całkowicie opcjonalne):

    Przejdź do ustawień nagłówka i nawigacji w konfiguratorze motywów. Wybierz Główny pasek menu i zaktualizuj następujące elementy:

    Wysokość menu: 105
    Maksymalna wysokość logo: 80
    Rozmiar tekstu: 20

    naprawiony nagłówek

    Teraz wróć do nagłówka i nawigacji. Wybierz Stałe ustawienia nawigacji i zaktualizuj następujące elementy:

    Naprawiono wysokość menu: 60
    Rozmiar tekstu: 20

    naprawiony nagłówek

Po wykonaniu tych kroków możesz rozpocząć.

Jak dodać niestandardowy stały nagłówek dla urządzeń mobilnych za pomocą Divi

Subskrybuj nasz kanał YouTube

Pierwsze kroki

Wdrożymy ten projekt, wprowadzając niestandardowy CSS w sekcji Dodatkowe CSS w Konfiguratorze motywów Divi. Ponieważ będziemy kierować reklamy tylko na urządzenia mobilne, umieścimy wszystkie nasze CSS w zapytaniu o media, które ogranicza stylizację do szerokości przeglądarki mniejszej niż 980 pikseli. Śmiało i zacznij od wpisania następujących danych w polu Dodatkowe CSS: 

@media (max-width: 980px) {



}

naprawiony nagłówek

Tworzenie mobilnego stałego nagłówka za pomocą CSS

Ponieważ Divi dodaje już klasę o nazwie „et-fixed-header”, gdy użytkownik przewija stronę w dół, możemy użyć tego selektora w naszym niestandardowym CSS, aby utworzyć i stylizować nasz stały nagłówek dla urządzeń mobilnych.

Ta pierwsza grupa CSS poniżej sprawia, że ​​nagłówek jest stały (lub przyklejony) u góry strony, a następnie dostosowuje wysokość stałego nagłówka do 55 pikseli. Dodaje również półprzezroczysty biały kolor tła. Dodaj następujące elementy do dodatkowego kodu CSS w konfiguratorze motywów w nawiasach zapytania o media. 

/*********************************
style mobile fixed header
*********************************/

.et_fixed_nav #main-header.et-fixed-header  {
position: fixed;
background: rgba(255,255,255,0.8); /*change header background color here*/
height: 55px;
}

.et-fixed-header .logo_container {
height: 55px;
}

.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}

Apple sugeruje, że wszystkie klikalne elementy interfejsu użytkownika dla ich aplikacji mają co najmniej 44 × 44 piksele, aby nasze kciuki i palce mogły je łatwo kliknąć. Byłby to dobry przewodnik dla elementów w ruchomym stałym nagłówku. Poniższy CSS sprawia, że ​​ikona nawigacji ma 45px. 

/*********************************
make mobile fixed header navigation icon larger
*********************************/

.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}

.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}

Na koniec zwiększmy wysokość naszego logo w stałym nagłówku, abyśmy mogli lepiej je widzieć. Wprowadź następujący kod CSS: 

/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}

Otóż ​​to! Wszyscy skończyliśmy.
Oto ostateczna kolekcja CSS do tworzenia stałego nagłówka mobilnego: 

@media (max-width: 980px) {

/*********************************
style mobile fixed header
*********************************/

.et_fixed_nav #main-header.et-fixed-header  {
position: fixed;
background: rgba(255,255,255,0.8);
height: 55px;
}

.et-fixed-header .logo_container {
height: 55px;
}

.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}

/*********************************
make mobile fixed header navigation icon larger
*********************************/

.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}

.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}

/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}

}

Zapisz swoje ustawienia. Teraz masz działający mobilny stały nagłówek.

naprawiony nagłówek

Przełączanie logo na mobilnym stałym nagłówku

Jeśli chcesz użyć innego logo dla swojego stacjonarnego nagłówka mobilnego, możesz to zrobić dość łatwo za pomocą niektórych jQuery. Wszystko, czego potrzebujesz, to adresy URL obu logo, z których będziesz korzystać. Pierwszy adres URL obrazu logo powinien być domyślnym logo, którego już używasz w swojej witrynie. Drugi adres URL obrazu logo powinien być logo, którego chcesz użyć w stałym nagłówku mobilnym. Upewnij się, że przesyłasz oba logo do biblioteki multimediów i pobierasz adresy URL.

Gdy masz oba adresy URL, przejdź do pulpitu WordPress i przejdź do Divi> Opcje motywu> Integracje. Znajdź pole wejściowe „Dodaj kod do nagłówka swojego bloga” i wprowadź następujący skrypt jQuery: 

<script>
    var imageUrl = [
  'ENTER DESKTOP LOGO IMAGE URL',
  'ENTER MOBILE LOGO IMAGE URL',
    ];

    jQuery(window).on('scroll', function() {
        var $header = jQuery('header');
        var $logo = jQuery('#logo');

        if ((jQuery(window).width() < 981) &&
        ($header.hasClass('et-fixed-header'))) {
            return $logo.attr('src', imageUrl[1]);
        };

        return $logo.attr('src', imageUrl[0])
    });
</script>

naprawiony nagłówek

Teraz zastąp tekst „WPISZ URL OBRAZU LOGO DESKTOP LOGO” adresem URL logo, którego obecnie używasz w swojej witrynie.

Następnie zastąp tekst „WPROWADŹ URL OBRAZU MOBILNEGO LOGO” adresem URL logo, którego chcesz używać tylko na urządzeniach mobilnych.

Zapisz ustawienia i sprawdź wyniki.

naprawiony nagłówek

Obsługa przeglądarki

W tym poście stworzyłem stały nagłówek wyłącznie za pomocą CSS, opierając się w dużej mierze na właściwości CSS „position:fixed”. Ta właściwość CSS może być niespójna ze starszymi wersjami przeglądarek mobilnych, zwłaszcza w iOS Safari i Android. Ale obecnie „position:fixed” jest całkiem dobrze obsługiwany w nowszych wersjach przeglądarek mobilnych (z wyjątkiem Opery Mini).

Istnieją inne, solidniejsze wtyczki i rozwiązania JavaScript, ale pomyślałem, że najlepiej będzie dać ci prostą wersję CSS. Rozważ zbadanie tych opcji, jeśli to rozwiązanie nie działa dla Ciebie.

Końcowe przemyślenia

Warto wspomnieć, że mobilne nagłówki stacjonarne mogą być szkodliwe dla użyteczności. Ponieważ przez cały czas blokują górną część przeglądarki, jeśli nie będziesz ostrożny, możesz zmarnować cenną nieruchomość bez ważnego powodu. Pamiętaj, nie każdy ma takiego phableta jak ten facet.

naprawiony nagłówek

Dlatego ważne jest, aby dostosować swój stały nagłówek do urządzeń mobilnych, nadając mu mniejszą wysokość, inne logo i większy przycisk nawigacyjny. Dodając kilka wierszy CSS do swojej witryny Divi, możesz mieć stały nagłówek na telefonie komórkowym bez konieczności korzystania z wtyczki innej firmy. Więc jeśli ma sens dodanie jednego do następnego projektu, zrób to. Posiadanie tego rodzaju funkcjonalności może poprawić interfejs użytkownika Twojej witryny.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!