Dodawanie obrazka jako tła w menu Divi

Jak dodać obrazek jako tło menu w Divi?

Menu nawigacyjne w Divi można łatwo zmodyfikować za pomocą CSS. Jednym z ciekawszych sposobów na zmianę wyglądu nagłówka jest zastosowanie obrazka jako tła menu.

Takie rozwiązanie może być wykorzystane np. do stworzenia dekoracyjnego tła, dodania grafiki związanej z firmą albo wyróżnienia menu na stronie internetowej.

W starszych wersjach Divi, w których nie wszystkie elementy nagłówka można było wygodnie konfigurować z poziomu ustawień wizualnych, CSS jest szczególnie przydatny.

Obrazek jako tło całego menu Divi

Najprostsze rozwiązanie polega na ustawieniu grafiki jako tła elementu menu.

Przejdź w WordPressie do:

Divi → Theme Options → Custom CSS

i dodaj:

.et_pb_menu {
    background-image: url("https://twojadomena.pl/wp-content/uploads/tlo-menu.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

W adresie url() wpisz adres obrazka, który ma zostać wykorzystany jako tło.

Co robi poszczególna właściwość?

background-image – określa grafikę tła.

background-size: cover – dopasowuje obraz do całego obszaru menu.

background-position: center – ustawia środek grafiki na środku menu.

background-repeat: no-repeat – zapobiega powtarzaniu obrazu.

Obrazek jako tło menu w starszym Divi

W starszych wersjach Divi klasy CSS mogą różnić się od tych stosowanych w nowszym module Menu. Jeżeli powyższy kod nie zadziała, można zastosować reguły odnoszące się bezpośrednio do głównego nagłówka.

Przykład:

#main-header {
    background-image: url("https://twojadomena.pl/wp-content/uploads/tlo-menu.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Ten wariant ustawia grafikę jako tło całego głównego nagłówka Divi.

Tło tylko pod menu

Jeżeli nie chcesz zmieniać całego nagłówka, można ograniczyć obrazek do obszaru zawierającego menu:

#et-top-navigation {
    background-image: url("https://twojadomena.pl/wp-content/uploads/tlo-menu.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Warto jednak pamiętać, że dokładny selektor może zależeć od wersji Divi i zastosowanej konstrukcji nagłówka.

Jak dodać półprzezroczyste tło?

Jeżeli grafika jest zbyt intensywna i utrudnia odczytanie pozycji menu, dobrym rozwiązaniem jest zastosowanie dodatkowej warstwy lub przyciemnienie obrazu.

W prostych przypadkach można zastosować kolor tła z przezroczystością:

#main-header {
    background-color: rgba(0, 0, 0, 0.75);
    background-blend-mode: multiply;
    background-image: url("https://twojadomena.pl/wp-content/uploads/tlo-menu.jpg");
    background-size: cover;
    background-position: center;
}

Dzięki temu grafika może być widoczna, ale tekst menu pozostanie bardziej czytelny.

Obrazek tylko przy najechaniu na pozycję menu

Można również wykorzystać grafikę jako efekt hover.

Przykład:

#top-menu > li > a {
    background-image: none;
    transition: background-image 0.3s ease;
}

#top-menu > li:hover > a {
    background-image: url("https://twojadomena.pl/wp-content/uploads/menu-hover.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Takie rozwiązanie może być wykorzystane do wyróżnienia wybranej pozycji menu.

Obrazek jako tło konkretnej pozycji menu

Jeżeli chcesz ustawić grafikę tylko dla jednej pozycji menu, najlepiej nadać jej własną klasę CSS.

W WordPressie w:

Wygląd → Menu

włącz Klasy CSS w opcjach ekranu, a następnie dodaj np.:

menu-obrazek

do wybranej pozycji menu.

Następnie w CSS:

#top-menu li.menu-obrazek > a {
    background-image: url("https://twojadomena.pl/wp-content/uploads/menu.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 10px 15px;
}

Dzięki temu grafika pojawi się tylko pod wybraną pozycją menu.

Tło menu a urządzenia mobilne

W przypadku grafiki w menu koniecznie należy sprawdzić wygląd strony na telefonie.

Obraz, który wygląda dobrze na komputerze, może na małym ekranie:

• zostać nieprawidłowo przycięty,
• utrudniać czytanie tekstu,
• zwiększyć wysokość nagłówka,
• powodować problemy z menu mobilnym.

Można więc zastosować osobne ustawienia dla urządzeń mobilnych:

@media (max-width: 767px) {
    #main-header {
        background-position: center;
        background-size: cover;
    }
}

Jeżeli grafika nie jest potrzebna na telefonach, można ją również całkowicie wyłączyć:

@media (max-width: 767px) {
    #main-header {
        background-image: none;
    }
}

Jaki obraz wybrać do menu?

Do tła menu najlepiej stosować grafikę, która nie zawiera dużej ilości drobnych szczegółów. Tekst menu musi pozostać czytelny.

Dobrze sprawdzają się:

• delikatne tekstury,
• zdjęcia z dużą ilością pustej przestrzeni,
• rozmyte fotografie,
• grafiki związane z branżą,
• jednolite lub subtelne wzory.

Warto również odpowiednio skompresować obraz przed dodaniem go do strony. Zbyt duży plik może negatywnie wpłynąć na szybkość ładowania witryny.

Podsumowanie

W starszym Divi obrazek można wykorzystać jako tło całego nagłówka, obszaru menu albo pojedynczej pozycji nawigacji. Najczęściej wystarczy odpowiedni kod CSS i adres grafiki.

Jeżeli korzystasz ze starszej wersji Divi, a konkretny kod nie działa, warto sprawdzić strukturę HTML nagłówka za pomocą narzędzi deweloperskich przeglądarki. Klasy CSS mogą różnić się w zależności od wersji Divi i rodzaju zastosowanego nagłówka.