Przejdź do głównej treści

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

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 901.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

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!

Podział menu o pełnej szerokościJak dodać pełnoekranowy moduł menu do swojej strony

Zanim dodasz moduł menu o pełnej szerokości do swojej strony, musisz najpierw przejść do Divi Builder. Po zainstalowaniu motywu Divi na swojej stronie internetowej 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 podczas przeglądania witryny na pierwszym planie, jeśli jesteś podłączony do pulpitu nawigacyjnego WordPress.

Korzystanie z Divi Builder

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.

moduł menu o pełnej szerokości.png

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:

przykład menu fullwidth divi.jpg

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.

atrybut strony.png

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.

przykładowe menu wordpress.jpg

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.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

dodaj pełne menu poniżej tytułu.jpg

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ół .

menu wyników divi.jpg

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.

fullwidth-menu-section content.png

Menu

Wybierz menu do użycia w module. Za pomocą tej strony możesz tworzyć nowe menu Wyglądy> Menu z pulpitu WordPress. Za każdym razem, gdy utworzysz nowe menu, będzie można wybrać je z tego menu rozwijanego.

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.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

menu modułu projektowania sekcji fullwidth.png

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.

menu moduł fullwidth advanced section divi.png

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

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 do użycia w tym module. Do tworzenia niestandardowych stylów CSS można użyć klasy CSS. Możesz dodać wiele klas oddzielonych spacją. Klasy te mogą być używane w motywie potomnym Divi lub w niestandardowym arkuszu stylów CSS, który dodajesz do swojej strony lub do witryny internetowej za pomocą opcji motywu Divi lub ustawień na stronie 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.

Inne samouczki Divi

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
17 akcji
udział10
ćwierkanie3
Enregistrer4