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 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecana]

Moduł menu Divi Full Width pozwala umieścić menu nawigacji w dowolnym miejscu na stronie. Można to wykorzystać do dodania menu drugiej strony na stronie lub w połączeniu z funkcją Pusta strona, aby przenieść główną nawigację na dół strony. Na przykład możesz przenieść menu poniżej pierwszej sekcji, aby pomieścić osoby z dużym obrazem rozruchowym. Zasadniczo pozwala to na poruszanie się po stronie za pomocą konstruktora!

Jak 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 w witrynie zauważysz przycisk Użyj Divi Builder nad wydawcą 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 również kliknąć przycisk Włącz narzędzie Visual Builder kiedy przeglądasz swoją witrynę na pierwszym planie, jeśli jesteś podłączony 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 pełnej szerokości można dodawać tylko w sekcjach pełnej szerokości. Jeśli zaczynasz nową stronę, nie zapomnij najpierw dodać do strony sekcji pełnej szerokości. Mamy kilka dobrych samouczków dotyczących 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. Lista modułów jest przeszukiwalna, co oznacza, że ​​możesz również wpisać słowo "Fullwith menu" lub "full-width menu" (w zależności od wersji), następnie kliknij enter, aby automatycznie wyszukać i dodać moduł menu o pełnej szerokości ! Po dodaniu modułu zostaniesz przywitany przez listę opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany .

Przykład użycia przykładu: Dodanie menu o pełnej szerokości w nagłówku 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 na całej stronie zastąpi domyślne główne menu nawigacji, konieczne jest wybranie pustego szablonu strony, aby domyślne menu nawigacji nie pojawiło się na górze strony oprócz menu pełnej szerokości które dodam.

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

atrybut strony.png

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

przykładowe menu wordpress.jpg

Po utworzeniu menu użyj Kreatora 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ą z Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestańcie słono płacić za to, co możecie zrobić sami. [Bezpłatny]

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

Zaktualizuj ustawienia menu Pełna szerokość 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: 20px

To wszystko!

Sztuką : Możesz użyć opcji wyświetlania na karcie Zaawansowane, aby ukryć to menu na urządzeniu mobilnym i wyświetlić inne menu nad nagłówkiem, aby użytkownicy mobilni mogli oglądać menu bez przewijania strony. ,

menu wyników divi.jpg

Opcje zawartości menu pełnej szybkości

Na karcie treści znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko, co kontroluje co pojawia się w twoim module zawsze znajdzie się na tej karcie.

fullwidth-menu-section content.png

Menu

Wybierz menu, którego chcesz użyć w module. Możesz tworzyć nowe menu za pomocą strony Wyglądy> Menu twojego pulpitu WordPress. Za każdym razem, gdy utworzysz nowe menu, z tego rozwijanego menu będzie można wybrać menu.

Kolor tła

Domyślnie moduł menu ma biały kolor tła. Jeśli chcesz użyć innego koloru dla tła menu, możesz wybrać je tutaj, używając próbnika kolorów.

Kolor tła rozwijanego menu

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

Kolor tła menu mobilnego

W wersji na komórkę moduł menu przekształca się w inny, bardziej przyjazny dla telefonu design. Możesz kontrolować kolor tła mobilnego menu rozwijanego, niezależnie od jego pulpitu.

Etykieta administracyjna

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

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress z Envato i łatwo stwórz swoją stronę internetową. Już ponad 49.720.000 XNUMX XNUMX pobrań. [EXCLUSIVE]

Opcje projektowania menu o pełnej szerokości

Na karcie Projektowanie znajdują się wszystkie opcje stylu modułu, takie jak czcionki, kolory, rozmiary i odstępy. To jest karta, której użyjesz, aby zmienić wygląd swojego modułu. Każdy moduł Divi ma długą listę parametrów projektowych, których można użyć do zmiany czegokolwiek.

menu modułu projektowania sekcji fullwidth.png

Otwórz podmenu

Domyślnie wszystkie podmenu są otwierane w rozwijanym menu pod głównym paskiem menu. Jeśli umieścisz menu u dołu strony, a Twoje menu zawiera długie rozwijane menu, 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 granicach domyślnej szerokości treści. Jeśli chcesz usunąć to ograniczenie, a linki rozciągają się na całą szerokość strony, od lewej strony ekranu możesz włączyć tę opcję.

Kolor rozwijanej linii menu

W rozwijanych menu odsyłacze są oddzielone linią pikseli 1. Jeśli chcesz dostosować kolor tej linii, możesz wybrać własny kolor 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 z czystym tłem, twój tekst powinien być ciemny.

Orientacja tekstu

Kontroluje to sposób wyrównania tekstu w module. Możesz wybrać pomiędzy lewym, prawym i wyśrodkowanym.

Aktywny kolor łącza

Aktywne kolory linków są podświetlone w module menu, aby pokazać użytkownikowi swoją aktualną lokalizację. Za pomocą tego ustawienia możesz zmienić kolor podświetlenia dla aktywnych linków.

Kolor tekstu menu rozwijanego

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

Kolor mobilnego tekstu menu

Domyślnie tekst w rozwijanych menu modułu dziedziczy kolor tekstu z głównego menu. Możesz jednak 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 rozwijanego menu. Divi zawiera dziesiątki dużych czcionek z czcionkami Google. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na twojej stronie. Możesz także dostosować styl tekstu za pomocą pogrubienia, kursywy, wielkich i podkreślonych opcji.

Menu Rozmiar czcionki

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

Kolor tekstu menu

Domyślnie wszystkie kolory tekstu Divi są wyświetlane jako białe lub ciemnoszare. Jeśli chcesz zmienić kolor tekstu cyfrowego, wybierz odpowiedni kolor z próbnika kolorów za pomocą tej opcji.

Rozstaw listów menu <

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

Wysokość linii menu

Wysokość linii wpływa na przestrzeń między każdą linią tekstu cyfrowego Jeśli chcesz zwiększyć odstęp między liniami, użyj suwaka zakresu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajduje się po prawej stronie kursora. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Zaawansowane opcje menu Pełna szerokość

Na karcie Zaawansowane znajdziesz opcje, które bardziej doświadczeni projektanci stron internetowych mogą okazać się przydatni, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do jednego z wielu elementów modułu. Do modułu można również zastosować niestandardowe klasy i identyfikatory CSS, które można wykorzystać do dostosowania modułu w pliku style.css kompozycji podrzędnej.

Łatwo stwórz swój sklep internetowy

Pobierz bezpłatne WooCommerce, najlepsze wtyczki e-commerce do sprzedaży fizycznych i cyfrowych produktów na WordPress. [Zalecana]

menu moduł fullwidth advanced section divi.png

Identyfikator CSS

Wprowadź opcjonalny identyfikator CSS, który będzie używany dla tego modułu. Identyfikatora można użyć do utworzenia niestandardowego stylu CSS lub do utworzenia linków do poszczególnych sekcji strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS, które będą używane dla tego modułu. Do utworzenia niestandardowego stylu CSS można użyć klasy CSS. Możesz dodać wiele klas oddzielonych spacją. Te klasy mogą być używane w Twoim dziecięcym motywie Divi lub niestandardowym arkuszu stylów CSS dodawanym do strony lub witryny internetowej przy użyciu opcji motywu Divi lub ustawień strony Divi Builder.

Niestandardowy CSS

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

Animacja menu rozwijanego

Możesz wybrać różne animacje do użycia, gdy menu rozwijane jest aktywne. Domyślnie animacja jest ustawiona na zanikanie, ale zmienia się ją na: rozwijanie, przeciąganie lub przewracanie.

widoczność

Ta opcja pozwala kontrolować urządzenia, na których pojawia się twój moduł. Możesz wyłączyć moduł na tabletach, smartfonach lub pulpitach indywidualnie. Jest to przydatne, jeśli chcesz korzystać z różnych modułów na różnych urządzeniach lub jeśli chcesz uprościć projektowanie mobilne, eliminując pewne elementy strony.

Inne samouczki Divi

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Pola obowiązkowe są oznaczone symbolem *

Ta strona używa Akismet do redukcji spamu. Dowiedz się więcej o tym, jak wykorzystywane są Twoje opinie.

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