Jak dodać responsywne logo do modułu menu o pełnej szerokości w Divi

Czy wiesz, że ponad 50 procent ruchu internetowego pochodzi z urządzeń mobilnych? Oznacza to, że mobilna wersja Twojej witryny jest niezwykle ważna i może być nawet głównym sposobem, w jaki ktoś odwiedzi Twoją stronę. Upewnienie się, że Twoja witryna jest responsywna i przyjazna dla urządzeń mobilnych, jest niezbędnym krokiem w projektowaniu witryny internetowej. W tym samouczku pokażemy, jak dodać responsywne logo do modułu menu o pełnej szerokości za pomocą wbudowanych opcji responsywnych Divi. Umożliwi to dodanie większego lub bardziej złożonego logo, które pojawi się na większych ekranach oraz mniejszego lub prostszego logo, które pojawi się na mniejszych ekranach.

Zanurzmy się!

Subskrybuj nasz kanał YouTube

zapowiedź

Oto podgląd tego, co zaprojektujemy. Wersja komputerowa strony będzie miała rozszerzone logo z dodatkowym tekstem, a mobilna wersja logo będzie miała tylko podstawowy znak logo.

Dlaczego potrzebujesz responsywnego logo

Zanim zaczniemy samouczek, omówmy, dlaczego możesz potrzebować responsywnego logo w swojej witrynie.

Po pierwsze, czym jest responsywne logo? Logo responsywne to odmiana Twojego logo, która może być mniejsza, prostsza, skrócona lub zmieniona, aby była bardziej widoczna i czytelna w mniejszych rozmiarach. Jeśli Twoje logo zawiera zbyt wiele szczegółowych elementów, mogą one nie wyświetlać się dobrze w mniejszym rozmiarze. Małe rozmiary czcionek i dodatkowa typografia w responsywnym logo również mogą być trudne do odczytania na małym ekranie. Wdrażając responsywne logo na swojej stronie internetowej dostosowane do rozmiaru ekranu użytkownika, możesz mieć pewność, że tożsamość Twojej marki jest wyraźnie reprezentowana, bez względu na wszystko. Aby zobaczyć kilka świetnych przykładów responsywnych logo, zajrzyj na tę stronę!

Czego potrzebujesz, aby zacząć

Najpierw zainstaluj i aktywuj motyw Divi i upewnij się, że masz najnowszą wersję Divi na swojej stronie internetowej. Następnie upewnij się, że masz co najmniej dwie wersje swojego logo – jedną dla widoku witryny na komputery, a drugą dla widoku mobilnego. Na koniec pobierz szablon nagłówka i stopki dla pakietu układu Divi's High School.

Teraz możesz zacząć!

Jak dodać responsywne logo do modułu menu o pełnej szerokości w Divi

Importuj układ nagłówka i stopki

Przejdź do Kreatora motywów z menu Divi na pasku bocznym. Zaimportuj układ nagłówka i stopki szkoły średniej, wybierając ikonę przenoszenia. Wybierz kartę Importuj i wybierz plik układu. Następnie wybierz Importuj szablony Divi Theme Builder.

Zmodyfikujemy nagłówek i dodamy nasze responsywne logo w kreatorze motywów. Kliknij ikonę ołówka, aby edytować nagłówek.

Utwórz moduł menu o pełnej szerokości

Dodaj sekcję o pełnej szerokości

Ponieważ oryginalne menu jest zbudowane ze standardowego modułu menu, będziemy musieli zmodyfikować układ, aby dodać moduł menu o pełnej szerokości. Najpierw dodaj sekcję o pełnej szerokości do globalnego nagłówka poniżej istniejącego menu.

W ustawieniach sekcji pełnej szerokości przejdź do opcji Zaawansowane, a następnie Efekty przewijania.

• Lepka pozycja: trzymaj się u góry

Następnie dodaj kolor tła.

• Kolor tła: #f5f0eb

Dodaj inny kolor lepkiego tła.

• Lepki kolor tła: #ffffff

Dodaj moduł menu o pełnej szerokości

Teraz dodajmy moduł menu o pełnej szerokości.

Otwórz ustawienia modułu i usuń tło.

Aby łatwo odtworzyć wygląd oryginalnego menu, możemy użyć funkcji kopiowania stylów, aby skopiować niektóre niestandardowe ustawienia. Otwórz ustawienia oryginalnego menu, a następnie kliknij prawym przyciskiem myszy Style tekstu menu i wybierz opcję Kopiuj style tekstu menu.

Po skopiowaniu kliknij trzy kropki dla modułu menu o pełnej szerokości, a następnie wybierz opcję Wklej style tekstu menu.

Teraz powtórzymy te same kroki z ustawieniami menu rozwijanego. Otwórz ustawienia oryginalnego menu, a następnie kliknij prawym przyciskiem myszy Style menu rozwijanego i wybierz Kopiuj style menu rozwijanego. Kliknij trzy kropki dla modułu menu o pełnej szerokości, a następnie wybierz opcję Wklej style menu rozwijanego.

Powtórz jeszcze raz dla stylów ikon. Otwórz ustawienia oryginalnego menu, a następnie kliknij prawym przyciskiem myszy Style ikon i wybierz Kopiuj style ikon. Kliknij trzy kropki dla modułu menu o pełnej szerokości, a następnie wybierz opcję Wklej style ikon.

Ustaw wyrównanie tekstu do prawej.

• Wyrównanie tekstu: do prawej

Ustaw maksymalną wysokość logo w obszarze Projekt, a następnie Rozmiar.

• Maksymalna wysokość logo: 50px

Dodaj następujący kod CSS do sekcji Łącze menu w obszarze Niestandardowy kod CSS.

padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;

Na koniec ustaw górną i dolną wyściółkę.

• Dopełnienie-góra: 10px
• Wypełnienie-dół: 10px

Teraz usuń oryginalną sekcję menu.

Dodaj responsywne logo

Teraz dodamy responsywne logo. Na szczęście Divi ułatwia to dzięki wbudowanym opcjom responsywnym.

W sekcji Ogólne otwórz ustawienia logo i prześlij komputerową wersję swojego logo.

Wybierz ikonę telefonu, aby skorzystać z opcji responsywnych, a następnie zastąp logo telefonu komórkowego swoim responsywnym logo.

Utwórz nową stronę z gotowym układem

Aby zobaczyć pełnowymiarowe menu z responsywnym logo w akcji, stwórzmy nową stronę z gotowym układem z biblioteki Divi. W tym projekcie użyjemy strony głównej szkoły średniej z pakietu układu szkoły średniej, aby dopasować nagłówek i stopkę.

Dodaj nową stronę do swojej witryny i nadaj jej tytuł, a następnie wybierz opcję Użyj Divi Builder. Ponieważ zaimportowaliśmy układ nagłówka i stopki jako globalny nagłówek i stopkę, użyj domyślnego układu dla tej strony.

W tym przykładzie użyjemy gotowego układu z biblioteki Divi, więc wybierz Przeglądaj układy.

Wyszukaj i wybierz układ strony głównej szkoły średniej.

Wybierz opcję Użyj tego układu, aby dodać układ do swojej strony.

Ostateczny wynik

Przyjrzyjmy się teraz naszemu ostatecznemu projektowi.

Końcowe przemyślenia

Posiadanie strony internetowej przyjaznej dla urządzeń mobilnych i responsywnej jest ważniejsze niż kiedykolwiek. A dzięki wbudowanym responsywnym opcjom Divi, zbudowanie jednego jest łatwiejsze niż kiedykolwiek! Dzięki responsywnemu logo tożsamość Twojej marki będzie zawsze wyraźna, bez względu na rozmiar ekranu. Jeśli chcesz dowiedzieć się więcej na temat responsywnych opcji Divi, zapoznaj się z tym samouczkiem na temat responsywnej zawartości referencji. Jak zaimplementowałeś responsywne projekty na swojej stronie internetowej? Chętnie poznamy Twoje przemyślenia w komentarzach!