Czy chcesz dodać responsywne logo do modułu menu o pełnej szerokości w Divi aby dostosować się do widoku na telefonie komórkowym?
Czy wiesz, że ponad 50 proc ruch Internet pochodzi z urządzeń mobilnych? Oznacza to, że mobilna wersja twojego Witryna internetowa jest niezwykle ważna i może być nawet głównym sposobem, w jaki ktoś odwiedzi Twoją stronę.
Upewnij się, że Witryna internetowa jest responsywna i dostosowana do urządzeń mobilnych, jest niezbędnym krokiem w projektowaniu Witryna internetowa.
W tym samouczku pokażemy, jak dodać responsywne logo do modułu menu o pełnej szerokości, korzystając z 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.
Zacznijmy!
badanie
Oto podgląd tego, co będziemy projektować. Wersja komputerowa strony będzie miała rozbudowane logo z dodatkowym tekstem, a wersja mobilna logo będzie miała tylko podstawowy branding logo.
To, czego potrzebujesz, aby zacząć
Wszystko najpierw zainstaluj i aktywuj motyw Divi i upewnij się, że masz najnowszą wersję Divi Na twojej stronie. Następnie upewnij się, że masz co najmniej dwie wersje swojego logo: jedną do widoku witryny na komputery i jedną do widoku mobilnego. Na koniec pobierz szablon Szablony nagłówków i stopek dla pakietu układów Divi's High School.
Teraz możesz zacząć!
Jak dodać responsywne logo do modułu nagłówka o pełnej szerokości w Divi
Utwórz moduł nagłówka o pełnej szerokości
Czytaj także: Divi: Jak wyświetlić moduł nagłówka o pełnej szerokości na pełnym ekranie?
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ł nagłówka o pełnej szerokości.
Najpierw dodaj sekcję o pełnej szerokości (Pełna szerokość) do globalnego nagłówka w istniejącym menu.
W ustawieniach sekcji pełnej szerokości przejdź do Zaawansowanea potem Przewiń efekty.
- Lepka pozycja: trzymaj się u góry
Następnie dodaj kolor tła.
- Tło: #f5f0eb
Dodaj inny kolor tła w stanie lepkim.
- Tło (przyklejone): #ffffff
Dodaj moduł nagłówka o pełnej szerokości
Teraz dodajmy moduł nagłówka 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 Kopiuj style, aby skopiować niektóre ustawienia niestandardowe.
Zobacz też: Divi: Jak zmienić gradient tła po najechaniu myszą
Otwórz ustawienia menu głównego, a następnie kliknij prawym przyciskiem myszy Tekst menu i wybierz Kopiuj style tekstu menu.
Po skopiowaniu kliknij trzy kropki modułu nagłówka o pełnej szerokości, a następnie wybierz Poprzednie style tekstu w menu.
Teraz powtórzymy te same kroki z ustawieniami menu rozwijanego.
Powtórz jeszcze raz dla ikon.
Ustaw wyrównanie tekstu do prawej.
- Wyrównanie tekstu: prawo
Ustaw maksymalną wysokość logo poniżej WnętrzeNastępnie Dobór.
- Maksymalna wysokość logo: 50px
Dodaj następujący kod CSS do sekcji Link do menu Menu pod niestandardowym CSS.
padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;
Na koniec dostosuj górną i dolną wyściółkę.
- Dopełnienie-Top: 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.
Sous Treść, otwórz ustawienia logo i prześlij komputerową wersję swojego logo.
Wybierz ikonę trybu mobilnego, aby skorzystać z opcji responsywnych, a następnie zastąp logo mobilne swoim responsywnym logo.
Utwórz nową stronę z predefiniowanym układem
Aby zobaczyć pełnowymiarowe menu z responsywnym logo w akcji, utwórzmy nową stronę z predefiniowanym układem z biblioteki Divi.
W tym projekcie użyjemy strony głównej szkoły średniej Pakiet układu liceum 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.
Znajdź i wybierz układ Strona główna szkoły średniej.
wybierać Użyj tego układu aby dodać układ do swojej strony.
Ostateczny wynik
Przyjrzyjmy się teraz naszemu ostatecznemu projektowi.
Pobierz DIVI teraz !!!
Wnioski
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, niezależnie od rozmiaru ekranu.
Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
