Jak korzystać z modułu nawigacyjnego o pełnej szerokości w Divi Builder

Moduł menu pełnej szerokości Divi umożliwia umieszczenie menu nawigacyjnego w dowolnym miejscu na stronie. Można to wykorzystać do dodania drugiego menu strony do strony lub w połączeniu z funkcją Pusta strona, aby przenieść podstawową nawigację na dół strony. Na przykład możesz przenieść menu poniżej pierwszej sekcji, aby pomieścić osoby z dużym obrazem startowym. To w zasadzie umożliwia nawigację w nagłówku, aby poruszać się po stronie za pomocą kreatora!

Jak dodać pełnoekranowy moduł menu do swojej strony

Zanim będziesz mógł dodać moduł menu o pełnej szerokości do swojej strony, musisz najpierw przejść do Divi Builder. Kiedyś Motyw Divi zainstalowany na twoim Witryna internetowa, zauważysz przycisk Użyj Divi Builder nad edytorem postów za każdym razem, gdy tworzysz nową stronę. Kliknij ten przycisk, aby aktywować Divi Builder i uzyskać dostęp do wszystkich modułów Divi Builder. Następnie kliknij przycisk Użyj Visual Builder aby uruchomić generator w trybie wizualnym. Możesz także kliknąć przycisk Włącz narzędzie Visual Builder kiedy przeglądasz swoje Witryna internetowa na pierwszym planie, jeśli jesteś zalogowany do pulpitu WordPress.

Po wejściu do programu Visual Builder możesz kliknąć szary przycisk plus, aby dodać nowy moduł do swojej strony. Nowe moduły o pełnej szerokości można dodawać tylko w sekcjach o pełnej szerokości. Jeśli zaczynasz nową stronę, nie zapomnij najpierw dodać sekcji pełnej szerokości do swojej strony. Mamy kilka świetnych samouczków na temat korzystania z elementów sekcji Divi.

Znajdź moduł menu o pełnej szerokości na liście modułów i kliknij go, aby dodać go do swojej strony. Listę modułów można przeszukiwać, co oznacza, że możesz również wpisać słowo „menu o pełnej szerokości” lub „menu o pełnej szerokości” (w zależności od wersji), a następnie kliknąć Enter, aby automatycznie wyszukać i dodać moduł menu o pełnej szerokości ! Po dodaniu modułu zostaniesz powitany przez listę opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany .

Przykład zastosowania: dodanie menu o pełnej szerokości pod nagłówkiem strony

W tym przykładzie pokażę, jak dodać menu o pełnej szerokości w sekcji nagłówka strony.

Oto przykład:

Ponieważ to nowe menu pełnej strony zastąpi domyślne główne menu nawigacyjne, konieczne jest wybranie pustego szablonu strony, aby domyślne menu nawigacji nie pojawiało się na górze strony oprócz menu o pełnej szerokości. że dodam.

Aby edytować szablon strony, przejdź do edytora stron i wybierz szablon „pustej strony” w obszarze Atrybuty strony na prawym pasku bocznym.

Ponieważ ten moduł wyświetli menu, które już istnieje, ważne jest, abyś utworzył menu przed dodaniem go do modułu menu o pełnej szerokości.

Po utworzeniu menu użyj narzędzia wizualnego, aby dodać sekcję o pełnej szerokości tuż pod sekcją nagłówka strony. Następnie dodaj moduł menu o pełnej szerokości do sekcji.

Zaktualizuj ustawienia menu Fullwidth w następujący sposób:

Opcje zawartości

Menu: [wybierz menu, które ma być używane w module] Kontekst: # 333333

Opcje projektowania

Kolor tekstu: Jasny Orientacja tekstu: Środkowa czcionka menu: Roboto Menu Rozmiar czcionki: 20 pikseli

To wszystko!

Sztuką : Możesz użyć opcji widoku na karcie Zaawansowane, aby ukryć to menu na telefonie komórkowym i wyświetlić inne menu nad nagłówkiem, aby użytkownicy mobilni mogli zobaczyć menu bez konieczności przewijania strony w dół .

Opcje zawartości menu pełnej szybkości

W zakładce Treść znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko to kontroluje co pojawi się w module zawsze będzie można znaleźć w tej zakładce.

Kolor tła

Domyślnie moduł menu ma białe tło. Jeśli chcesz użyć innego koloru tła menu, możesz go wybrać tutaj za pomocą próbnika kolorów.

Kolor tła menu rozwijanego

Domyślnie menu rozwijane w module menu dziedziczą kolor tła zdefiniowany w poprzednim ustawieniu. Jeśli chcesz, aby menu rozwijane miały własny kolor, możesz wybrać kolor niestandardowy za pomocą tego ustawienia.

Kolor tła menu mobilnego

Na urządzeniach mobilnych moduł menu jest przekształcony w inny wygląd i bardziej dostosowany do urządzeń mobilnych. Możesz sterować kolorem tła rozwijanego menu telefonu komórkowego niezależnie od jego odpowiednika na komputerze.

Etykieta administracyjna

Spowoduje to zmianę etykiety modułu w konstruktorze w celu łatwej identyfikacji. Podczas korzystania z widoku WireFrame w programie Visual Builder etykiety te pojawiają się w bloku modułu interfejsu Divi Builder.

Opcje projektowania menu o pełnej szerokości

Na karcie Projekt znajdziesz wszystkie opcje stylizacji modułu, takie jak czcionki, kolory, rozmiar i odstępy. To jest zakładka, której użyjesz do zmiany wyglądu modułu. Każdy moduł Divi ma długą listę ustawień projektu, których możesz użyć do zmiany czegokolwiek.

Otwórz podmenu

Domyślnie wszystkie podmenu są otwierane jako menu rozwijane poniżej głównego paska menu. Jeśli umieścisz menu u dołu strony, a menu ma długie menu rozwijane, możesz chcieć otworzyć te menu nad modułem menu, aby menu nie wychodziło poza okno przeglądarki.

Twórz linki menu o pełnej szerokości

Domyślnie łącza najwyższego poziomu z modułem menu są umieszczane w ramach domyślnej szerokości treści. Jeśli chcesz usunąć to ograniczenie i mieć linki działające na całej szerokości strony, zaczynając od lewej strony ekranu, możesz włączyć tę opcję.

Kolor rozwijanego menu

W menu rozwijanych linki są oddzielone linią o szerokości 1 piksela. Jeśli chcesz dostosować kolor tego wiersza, możesz wybrać kolor niestandardowy za pomocą próbnika kolorów w tym ustawieniu.

Kolor tekstu

Tutaj możesz wybrać wartość swojego tekstu. Jeśli pracujesz na ciemnym tle, tekst powinien być włączony. Jeśli pracujesz na jasnym tle, tekst powinien być ciemny.

Orientacja tekstu

Kontroluje sposób wyrównywania tekstu w module. Możesz wybrać pomiędzy Lewą, Prawą i Środkową.

Aktywny kolor łącza

Kolory aktywnych łączy są podświetlone w module menu, aby pokazać użytkownikowi ich bieżącą lokalizację. Za pomocą tego ustawienia możesz zmienić kolor podświetlenia używany dla tych aktywnych linków.

Kolor tekstu menu rozwijanego

Domyślnie tekst w rozwijanych menu modułu dziedziczy kolor tekstu z menu głównego. Możesz jednak chcieć zmienić ten kolor, jeśli zdefiniowałeś niestandardowy kolor tła menu rozwijanego.

Kolor mobilnego tekstu menu

Domyślnie tekst w rozwijanych menu modułu dziedziczy kolor tekstu z menu głównego. Możesz jednak chcieć zmienić ten kolor, jeśli ustawiłeś niestandardowy kolor tła menu mobilnego.

Czcionka menu

Możesz zmienić czcionkę czcionki menu, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Menu Rozmiar czcionki

Tutaj możesz dostosować rozmiar czcionki menu. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub bezpośrednio wprowadzić wartość żądanego rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Kolor tekstu menu

Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu cyfrowego, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Odstępy między literami menu

Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście numerycznym, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Wysokość linii menu

Wysokość wiersza wpływa na odstęp między każdym wierszem tekstu numerycznego Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajdujący się po prawej stronie kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Zaawansowane opcje menu pełnej szerokości

Na karcie Zaawansowane znajdziesz opcje, które mogą być przydatne dla bardziej doświadczonych projektantów stron internetowych, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do dowolnego z wielu elementów modułu. Możesz również zastosować niestandardowe klasy CSS i identyfikatory do modułu, których można użyć do dostosowania modułu w pliku style.css motywu potomnego.

Identyfikator CSS

Wprowadź opcjonalny identyfikator CSS do użycia w tym module. Identyfikator może służyć do tworzenia niestandardowego stylu CSS lub do łączenia z określonymi sekcjami strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS, których chcesz użyć w tym module. Klasy CSS można używać do tworzenia niestandardowych stylów CSS. Możesz dodać wiele klas, oddzielonych spacją. Klasy te mogą być używane w motywie podrzędnym Divi lub w niestandardowym arkuszu stylów CSS, który dodajesz do swojej strony lub witryny. Witryna internetowa korzystając z opcji motywu Divi lub ustawień strony Divi Builder.

Niestandardowy CSS

Niestandardowy CSS można również zastosować do modułu i dowolnych elementów wewnętrznych modułu. W sekcji Niestandardowe CSS znajdziesz pole tekstowe, w którym możesz dodać własne arkusze stylów CSS bezpośrednio do każdego elementu. Wpisy CSS w tych ustawieniach są już opakowane w znaczniki stylu. Po prostu wprowadź reguły CSS oddzielone średnikami.

Animacja menu rozwijanego

Możesz wybierać między różnymi animacjami, które mają być używane, gdy włączone jest menu rozwijane. Domyślnie animacja jest ustawiona na zanikanie, ale możesz to zmienić na: rozwijanie, przeciąganie lub odwracanie.

widoczność

Ta opcja umożliwia sterowanie urządzeniami, na których pojawia się Twój moduł. Możesz indywidualnie dezaktywować swój moduł na tabletach, smartfonach lub komputerach stacjonarnych. Jest to przydatne, jeśli chcesz używać różnych modów na różnych urządzeniach lub jeśli chcesz uprościć projekt mobilny, usuwając określone elementy ze strony.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]POBIERZ MOTYW DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”centrum” font_family = „Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]POBIERZ SZABLONY DIVI[/vcex_button][/vc_column][/vc_row]

Jak korzystać z pełnego modułu nawigacyjnego Divi Builder