Stylizacja menu pełnoekranowego Divi

Pełnoekranowe menu Divi stanowi doskonałą okazję do niestandardowego projektowania. W przeciwieństwie do pozostałych czterech stylów nagłówków dostępnych w Divi's Theme Customizer, menu pełnoekranowe wypełnia cały ekran, gdy jest aktywne. Stwarza to miejsce na kreatywny układ menu i elementów nagłówka Divi.

W dzisiejszym poście pokażę, jak stylizować menu pełnoekranowe, aby nadać mu bardziej spersonalizowany charakter dla odwiedzających. Aby to osiągnąć, zmienię kilka opcji w dostosowywaniu motywów i dodam trochę niestandardowego CSS.

Zacznijmy.

Przed i po

Tak domyślnie wygląda menu o pełnej szerokości:

Oto zajawka nowego projektu:

Stylizacja menu pełnoekranowego Divi

Subskrybuj nasz kanał YouTube

Pierwsze kroki

Zanim zaczniemy projektowanie, upewnij się, że masz aktywne menu główne z już dodanymi pozycjami menu.

Zaktualizuj ustawienia w konfiguratorze motywów

Z pulpitu nawigacyjnego WordPress przejdź do Divi > Dostosowywanie motywu > Nagłówek i nawigacja > Format nagłówka. Następnie wybierz Pełny ekran jako Styl nagłówka.

Po ustawieniu stylu nagłówka pełnoekranowego wróć do nagłówka i nawigacji. Teraz zobaczysz nowy zestaw opcji o nazwie „Ustawienia wsuwania i pełnoekranowego nagłówka”.

Zaktualizuj ustawienia nagłówka wsuwania i pełnoekranowego w następujący sposób:

Sprawdź opcję Pokaż górny pasek
Rozmiar tekstu menu: 46px
Rozmiar tekstu na górnym pasku: 24px
Czcionka: Wyświetlacz Playfair
Styl czcionki: pogrubienie (B)
Kolor łącza menu: #ffffff
Kolor aktywnego łącza: #edef86
Kolor tekstu górnego paska: #ffffff

Teraz wróć do ustawień nagłówka i nawigacji i kliknij Elementy nagłówka. W obszarze Elementy nagłówka zaktualizuj następujące elementy:

Wybierz Pokaż ikony społecznościowe
Wybierz Pokaż ikonę wyszukiwania
Numer telefonu: [wprowadź numer]
E-mail: [wpisz e-mail]

Po skonfigurowaniu wszystkiego powinien wyglądać domyślny układ:

Dodajmy teraz trochę niestandardowego CSS.

Dodawanie niestandardowego CSS

Dodawanie niestandardowego CSS w Divi można zrobić w kilku miejscach. Ponieważ już korzystamy z dostosowywania motywów, przejdź do sekcji Dodatkowy CSS. Tutaj dodamy nasz CSS. Oczywiście, jeśli wolisz dodać go do zewnętrznego pliku style.css w motywie potomnym, zrób to.

Dla tych, którzy nie mają czasu, możesz przejść do ukończonej wersji kodu CSS, który możesz skopiować i wkleić do sekcji Dodatkowy CSS. Po prostu wiedz, że nadal będziesz musiał wrócić i dodać kilka elementów, takich jak obraz tła do swojego kodu.

Wróćmy teraz do dodawania naszego CSS.

Ponieważ większość niestandardowych CSS będzie dotyczyć tylko wersji nagłówka pełnoekranowego na komputery stacjonarne, zaczniemy od dodania zapytania o media, którego celem są rozmiary ekranu o minimalnej szerokości 980 pikseli. Dodaj następujące elementy w sekcji Dodatkowe CSS:

@media all and (min-width: 980px){

}

Teraz zmieńmy nieco układ nagłówka pełnoekranowego, dostosowując położenie menu nawigacyjnego i elementów górnego paska tak, aby nawigacja znajdowała się po lewej stronie ekranu, a elementy górnego paska były ułożone pionowo po prawej stronie ekran. Aby wprowadzić tę zmianę, dodaj następujący kod CSS w nawiasach zapytania o media.

/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
	width: 50%;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
	padding-top: 0px !important;
}

/*adjust position of top bar elements*/
.et_header_style_fullscreen .et_slide_menu_top {
    width: 50%;
    text-align: center;
    display: table !important;
    vertical-align: middle;
    position: initial;
    float: right!important;
    height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
    display: table-cell !important;
    position: relative;
    vertical-align: middle;
    text-align: left!important;
	padding: 0 15%;
	width: 100%;
}

.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
    width: 100%;
}

.et_header_style_fullscreen div#et-info {
	float: none!important;
	width: 100%;
}

.et_header_style_fullscreen div#et-info span {
	display: block;	
	margin-bottom: 30px;
	
}

Następnie zwiększmy rozmiar naszego paska wyszukiwania za pomocą następującego kodu CSS:

/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
	margin-top: 30px !important;
	margin-bottom: 15px;
	width: 100% !important;
	max-width: 300px !important;
	padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
	width: 50px;
	height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
	font-size: 22px;
}

Dodajmy następujący kod CSS, aby wyrównać menu do prawej:

/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
	text-align: right;
	padding: 0 15%;
}

Następnie powiększmy ikonę zamykania menu w prawym górnym rogu i łatwiej ją klikamy:

/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
	font-size: 120px;
}

Usuńmy również nakładkę tła za górnymi elementami menu i usuńmy krycie tła.

/*take out background overlay*/
.et_slide_menu_top {
background: none;
}

/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}

Jeśli masz pozycje menu podrzędnego, ten CSS powiększa strzałkę w dół po prawej stronie pozycji menu:

/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;

}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}

Sprawdźmy, co mamy do tej pory:

Teraz jesteśmy gotowi do dodania naszego obrazu tła. Ponieważ chcę, aby mój obraz tła był wyświetlany na wszystkich urządzeniach, dodam ten kod CSS poza nawiasami zapytania o media, aby tło nie było ukryte na ekranach o szerokości mniejszej niż 980 pikseli.

/*add background image*/
body #page-container .et_slide_in_menu_container{
	background: url('INSERT IMAGE URL') center center !important;
	background-size: cover !important;
}

Jeśli nie masz jeszcze adresu URL obrazu tła, prześlij obraz tła (1920 × 1080) do galerii multimediów WordPress i skopiuj adres URL.

Teraz zastąp tekst „WSTAW URL OBRAZU”, wklejając adres URL obrazu w kodzie.

Teraz gotowe!

Oto kompletna wersja kodu CSS, który powinieneś dodać do dodatkowego CSS (z wyjątkiem adresu URL obrazu, który musisz podać):

@media all and (min-width: 980px){

/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
	width: 50%;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
	padding-top: 0px !important;
}

/*adjust position of top menu and elements*/
.et_header_style_fullscreen .et_slide_menu_top {
    width: 50%;
    text-align: center;
    display: table !important;
    vertical-align: middle;
    position: initial;
    float: right;
    height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
    display: table-cell !important;
    position: relative;
    vertical-align: middle;
    text-align: left!important;
	padding: 0 15%;
	width: 100%;
}

.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
    width: 100%;
}

.et_header_style_fullscreen div#et-info {
	float: none!important;
	width: 100%;
}

.et_header_style_fullscreen div#et-info span {
	display: block;	
	margin-bottom: 30px;
	
}

/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
	margin-top: 30px !important;
	margin-bottom: 15px;
	width: 100% !important;
	max-width: 300px !important;
	padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
	width: 50px;
	height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
	font-size: 22px;
}

/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
	text-align: right;
	padding: 0 15%;
}

/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
	font-size: 120px;
}

/*dark background overlay*/
.et_slide_menu_top {
background: none;
}

/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}

/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;

}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}

}

/*add background image*/
body #page-container .et_slide_in_menu_container{
	background: url('http://megamenu.wpengine.com/wp-content/uploads/2017/08/bgdark.jpg') center center !important;
	background-size: cover !important;
}

Kliknij Zapisz i opublikuj

Sprawdźmy teraz:

Alternatywny układ menu siatki

Aby dodać układ siatki do menu, dodaj następujący kod CSS poniżej bieżącego kodu i w nawiasach zapytania o media:

/*add grid menu links*/
.et_header_style_fullscreen .et_mobile_menu li {
    opacity: 1;
    width: 46%;
    float: left !important;
    margin-right: 2%;
    margin-bottom: 2%;
}

.et_slide_in_menu_container #mobile_menu_slide li a, .et_slide_in_menu_container #mobile_menu_slide li.current-menu-item a {
    padding: 20% 0;
    border: 1px solid #fff;
    color: #fff;
    width: 100%;
    text-align: center;
}

Ważna uwaga: może być konieczna zmiana rozmiaru czcionki menu na 30 pikseli (lub zbliżony), aby upewnić się, że elementy menu nie nakładają się na mniejsze rozmiary ekranu. Ponadto ten układ nie będzie działał, jeśli menu zawiera pozycje podmenu.

Pozycje podmenu w nagłówku pełnoekranowym

Pamiętaj, że jeśli masz elementy podmenu, element menu nadrzędnego będzie działał tylko jako łącze przełączające, aby pokazać i ukryć elementy podmenu. Nie będzie działać jako samo łącze menu.

Czuły?

Ta personalizacja jest responsywna i działa dobrze na wszystkich rozmiarach ekranu.

Pełnoekranowy nagłówek składa się z dwóch sąsiednich komórek tabeli, które są wyrównane w pionie. Lewa komórka tabeli zawiera menu, a prawa komórka zawiera inne elementy nagłówka. Ponieważ zawartość jest wyrównana w pionie, a komórki tabeli będą przez cały czas zajmować 50% (połowę) rozmiaru ekranu, zawartość zawsze dopasuje się do każdego rozmiaru ekranu.

Jeśli rozmiar ekranu jest mniejszy niż 980 pikseli (tablety i telefony), domyślny układ Divi uruchomi się i ładnie wyświetli menu na telefonie komórkowym.

Końcowe przemyślenia

Jeśli zastanawiasz się nad dodaniem pełnoekranowego nagłówka na swojej stronie, mam nadzieję, że ten projekt będzie przydatną inspiracją. Symetria elementów nagłówka i pozycji menu równoważy wszystko i zwraca większą uwagę na informacje kontaktowe, które są ważne dla wielu klientów.

Pamiętaj, że ponieważ to menu jest w trybie pełnoekranowym, obraz tła będzie kluczowy. Nie chcesz, aby obraz odwracał uwagę lub zagłuszał ważne treści menu. Jeśli nie możesz znaleźć idealnego obrazu, który nadałby pożądanej osobowości, wybierz obraz, który po prostu świetnie wygląda jako tło i jest zgodny z Twoim projektem. Możesz też po prostu użyć domyślnej opcji koloru tła.

Cóż, to wszystko co mam.

Czekamy na kontakt z Państwem w komentarzach.