Przejdź do głównej treści

Samouczek Divi: Jak korzystać z pełnoekranowego modułu menu

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. [Zalecane]

Pełnoekranowy moduł Divi Menu ułatwia dodawanie pięknych kolorowych nagłówków na górze stron (lub w dowolnym miejscu na stronie, jeśli chcesz). Moduły te można umieszczać tylko w sekcjach o pełnej szerokości.

moduł nagłówkowy pełnej szerokości divi.png

Jak dodać moduł pełnoekranowego menu Divi

Aby dodać moduł menu pełnoekranowego 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 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 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.

używaj konstruktora divi

Po wejściu do programu Visual Builder możesz kliknąć szary przycisk plus, aby dodać nowy moduł do swojej strony. Nowe moduły menu pełnoekranowego 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.

pełne menu divi.png

Znajdź moduł nagłówka pełnoekranowego 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 także wpisać słowo „nagłówek pełnoekranowy”, a następnie kliknąć „Enter”, aby automatycznie znaleźć i dodać moduł nagłówka pełnoekranowego! 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 zastosowania: dodawanie pełnoekranowego nagłówka do strony Informacje

W tym przykładzie pokażę, jak używać modułu nagłówka Fullwidth, aby dodać nagłówek z niestandardowym tekstem i obrazem tła.

Wszystkie moduły pełnoekranowe są dostępne tylko podczas korzystania z sekcji pełnoekranowych. Za pomocą programu Visual Builder wstaw nową sekcję pełnego ekranu. Następnie dodaj moduł Person do sekcji.

Zaktualizuj ustawienia nagłówka na pełnym ekranie w następujący sposób:

Opcje zawartości

Tytuł: O nas Tekst podtytułu: Robimy wszystko inaczej ... URL obrazu tła: [wstaw obraz 1920 x 800] Tło nakładki Kolor: rgba (0,0,0,0.2)

Opcje projektowania

Orientacja tekstu i logo: Środkowy przycisk Przycisk przewijania w dół: Ikona TAK: [Wybierz ikonę] Ikona przewijania w dół Kolor: #fcbf00 Ikona przewijania: 50px Kolor tekstu: Jasny kolor tekstu: #fcbf00 Tytuł: Otwarty, pogrubiony, wielkie litery Tytuł Rozmiar czcionki: 60px (komputer), 40px (tablet), 30px (telefon) Rozmiar czcionki napisów: 25px

Opcje zaawansowane (niestandardowy CSS)

Główny element:
tapicerka: 100px 0;

sekcja zawartość divi moduł full screen.png

To wszystko!

przykładowy nagłówek divi.jpg

Opcje treści nagłówka na pełnym ekranie

W zakładce treści 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.

treść sekcja divi.png

Tytuł

Tutaj wpisz tytuł swojej strony.

Tekst napisów

Jeśli chcesz użyć napisów, dodaj go tutaj. Podtytuł pojawi się pod tytułem małą czcionką.

Przycisk # 1 Tekst

Wprowadź tekst przycisku.

Przycisk # 2 Tekst

Wprowadź tekst przycisku.

Treść

Tutaj możesz zdefiniować treść, która zostanie umieszczona pod nagłówkiem i tekstem tytułu.

Przycisk URL 1

Wprowadź adres URL przycisku.

Przycisk URL 2

Wprowadź adres URL przycisku.

Adres URL obrazu logo

Prześlij wybrany obraz lub wpisz adres URL obrazu, który chcesz wyświetlić.

URL obrazu nagłówka

Prześlij wybrany obraz lub wpisz adres URL obrazu, który chcesz wyświetlić.

Adres URL obrazu tła

Jeśli jest ustawiony, ten obraz będzie używany jako tło dla tego modułu. Aby usunąć obraz tła, po prostu usuń adres URL z pola ustawień. Obrazy tła pojawią się powyżej kolorów tła, co oznacza, że ​​kolor tła nie będzie widoczny po zastosowaniu obrazu tła.

Kolor tła

Ustaw niestandardowy kolor tła dla swojego modułu lub pozostaw puste, aby użyć domyślnego koloru.

Ł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]

Kolor nakładki w tle

Wybierz kolor nakładki tła, który zostanie umieszczony nad obrazem tła. Półprzezroczyste obrazy nakładki mogą tworzyć fajne efekty po umieszczeniu na obrazach tła.

Etykieta administracyjna

Spowoduje to zmianę etykiety modułu w konstruktorze w celu łatwej identyfikacji. Gdy używasz widoku WireFrame w Visual Builder, te etykiety pojawiają się w bloku modułu interfejsu Divi Builder.

Opcje projektowania nagłówka o pełnej szerokości

Na karcie Projektowanie znajdziesz wszystkie opcje stylu modułu, takie jak czcionki, kolory, rozmiar i odstępy. Jest to karta, której użyjesz do zmiany wyglądu swojego modułu. Każdy moduł Divi ma długą listę parametrów projektowych, których można użyć do zmiany czegokolwiek.

przekrój projektu moduł pełnej szerokości divi.png

Orientacja tekstu i logo

To kontroluje sposób wyrównywania tekstu w module.

Zrób pełny ekran

Tutaj możesz wybrać, czy nagłówek zostanie rozszerzony do pełnego ekranu.

Użyj efektu Parallax

Jeśli ta opcja jest włączona, obrazy tła będą miały ustaloną pozycję, taką jak przewijanie, tworząc zabawny efekt paralaksy.

Metoda paralaksy

Zdefiniuj metodę zastosowaną dla efektu paralaksy.

Pokaż przycisk przewijania w dół

Tutaj możesz wybrać, czy ma być wyświetlany przycisk przewijania w dół.

ikona

Wybierz ikonę do wyświetlenia dla przycisku przewijania w dół.

Przewiń w dół Ikona koloru

Domyślnie ikona rozwijana dziedziczy kolor tekstu nagłówka (biały lub szary). Możesz zmienić ten kolor, dostosowując kolor w tej opcji za pomocą próbnika kolorów.

Przewiń w dół Rozmiar ikony

Użyj tego ustawienia, aby zwiększyć lub zmniejszyć rozmiar ikony przewijania w dół, która pojawia się na dole nagłówka.

wyrównanie divi moduł pełna szerokość w head.png

Pionowe wyrównanie obrazu

Kontroluje orientację obrazu w module.

Kolor tekstu

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

Pionowe wyrównanie tekstu

To ustawienie określa pionowe wyrównanie zawartości. Treść może być wyśrodkowana w pionie lub wyrównana u dołu.

Czcionka tytułu

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

Rozmiar czcionki tytułu

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

Kolor tekstu tytułu

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

Odstępy liter tytułu

Odstępy między literami wpływają na odstęp między literami. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście tytułowym, 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 swojego rozmiaru, aby zmienić typ jednostki.

tytuł sectio moduł projektu w pełnym ekranie na głowę divi.png

Wysokość linii tytułowej

Wysokość linii wpływa na odstęp między wierszami tekstu tytułowego 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 znajduje się na prawo od 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 swojego rozmiaru, aby zmienić typ jednostki.

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]

Czcionka zawartości

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

Rozmiar czcionki treści

Tutaj możesz dostosować rozmiar tekstu treści. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub wpisać wartość żądanego rozmiaru tekstu bezpośrednio 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 swojego rozmiaru, aby zmienić typ jednostki.

Kolor tekstu zawartości

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

Odczytywanie liter treści

Odstępy między literami wpływają na odstęp między literami. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście, 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 swojego rozmiaru, aby zmienić typ jednostki.

Wysokość linii treści

Wysokość linii wpływa na odstęp między wierszami tekstu treści 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 wejściowym znajduje się na prawo od 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 swojego rozmiaru, aby zmienić typ jednostki.

Font Subtitle

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

Rozmiar czcionki napisów

Tutaj możesz dostosować rozmiar tekstu napisów. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub wpisać wartość żądanego rozmiaru tekstu bezpośrednio 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 swojego rozmiaru, aby zmienić typ jednostki.

Kolor tekstu napisów

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

Rozstawianie liter napisów

Odstępy między literami wpływają na odstęp między literami. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście napisów, 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 swojego rozmiaru, aby zmienić typ jednostki.

Wysokość linii napisów

Wysokość linii wpływa na odstęp między każdą linią tekstu napisów. 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 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 swojego rozmiaru, aby zmienić typ jednostki.

Maksymalna szerokość tekstu

Użyj tego ustawienia, aby zmniejszyć maksymalną szerokość tekstu w module nagłówka. Na przykład wartość 50% zapewni, że tekst nigdy nie przekroczy 50% szerokości globalnego modułu nagłówka.

moduł projektowania sekcji divi head full width.png

Użyj niestandardowych stylów dla przycisku

Włączenie tej opcji ujawnia różne ustawienia dostosowywania przycisków, których można użyć do zmiany wyglądu przycisku w module.

Rozmiar tekstu przycisku

To ustawienie może być użyte do zwiększenia lub zmniejszenia rozmiaru tekstu w przycisku. Przycisk zmienia się wraz ze wzrostem i zmniejszaniem rozmiaru tekstu.

Kolor tekstu przycisku

Domyślnie przyciski przyjmują kolor akcentu motywu zgodnie z definicją w Personalizatorze motywu. Ta opcja pozwala przypisać niestandardowy kolor tekstu do przycisku tego modułu. Wybierz kolor niestandardowy za pomocą próbnika kolorów, aby zmienić kolor przycisku.

Kolor tła przycisku

Domyślnie przyciski mają przezroczysty kolor tła. Można to zmienić, wybierając żądany kolor tła w próbniku kolorów.

Przycisk granicy szerokości

Wszystkie przyciski Divi mają domyślną ramkę 2px. Granicę tę można zwiększyć lub zmniejszyć za pomocą tego parametru. Granice można usunąć, wprowadzając wartość 0.

Kolor obramowania przycisku

Domyślnie obramowania przycisków zmieniają się na kolor akcentu motywu zdefiniowany w Personalizatorze motywu. Ta opcja umożliwia przypisanie niestandardowego koloru obramowania do przycisku w tym module. Wybierz kolor niestandardowy za pomocą próbnika kolorów, aby zmienić kolor obramowania przycisku.

Promień obramowania przycisku

Promień obramowania wpływa na zaokrąglenie rogów przycisków. Domyślnie przyciski w Divi mają mały promień obramowania, który zaokrągla rogi pikseli 3. Możesz zmniejszyć tę wartość do 0, aby utworzyć kwadratowy przycisk lub znacznie go zwiększyć, aby utworzyć przyciski z okrągłymi krawędziami.

Rozstawianie liter przycisków

Odstępy między literami wpływają na odstęp między literami. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście przycisku, 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 wprowadzić „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Czcionka przycisku

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

Dodaj ikonę przycisku

Wyłączone, to ustawienie usunie ikony z przycisku. Domyślnie wszystkie przyciski Divi wyświetlają ikonę strzałki w dymku.

Ikona przycisku

Jeśli ikony są włączone, możesz użyć tego ustawienia, aby wybrać ikonę do użycia w przycisku. Divi ma różne ikony do wyboru.

Kolor ikony przycisku

Ustawienie tego ustawienia zmieni kolor ikony wyświetlanej na przycisku. Domyślnie kolor ikony jest taki sam, jak kolor tekstu przycisków, ale to ustawienie umożliwia niezależne dostosowanie koloru.

Przycisk umieszczania ikon

Możesz wybrać wyświetlanie ikony przycisku po lewej lub prawej stronie przycisku.

Pokaż tylko ikonę najechania przyciskiem

Domyślnie ikony przycisków są wyświetlane tylko podczas najazdu. Jeśli chcesz, aby ikona zawsze się pojawiała, wyłącz to ustawienie.

Przycisk Umieść kolor tekstu

Gdy przycisk zostanie przesunięty przez mysz gościa, ten kolor zostanie użyty. Kolor zmieni się od koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

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]

Wskaźnik tła przycisku przesuwania (kolor przycisku kursora)

Gdy przycisk zostanie przesunięty przez mysz gościa, ten kolor zostanie użyty. Kolor zmieni się od koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Przycisk Obrysuj kolor obramowania (kolor obramowania kursora)

Gdy przycisk zostanie przesunięty przez mysz gościa, ten kolor zostanie użyty. Kolor zmieni się od koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Przesuń kursor na obramowanie

Gdy przycisk zostanie naciśnięty przez mysz gościa, ta wartość zostanie użyta. Wartość zmieni się od wartości podstawowej określonej w poprzednich parametrach.

Przycisk odstępu między nutami

Gdy przycisk zostanie naciśnięty przez mysz gościa, ta wartość zostanie użyta. Wartość zmieni się od wartości podstawowej określonej w poprzednich parametrach.

Zaawansowane opcje nagłówka o pełnej szerokości

Na karcie Zaawansowane znajdziesz opcje, które mogą być przydatne bardziej doświadczonym projektantom stron internetowych, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do jednego z wielu elementów modułu. Możesz także zastosować niestandardowe klasy i identyfikatory CSS do modułu, których można użyć do dostosowania modułu w pliku style.css motywu podrzędnego.

nagłówek sekcji divi section advance.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 określonych sekcji strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS, które będą używane dla tego modułu. Klasy CSS można użyć do utworzenia niestandardowego stylu CSS. Możesz dodać wiele klas oddzielonych spacją. Tych klas można używać w motywie podrzędnym Divi lub w niestandardowym arkuszu stylów CSS, który dodajesz do swojej strony lub witryny za pomocą 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 Niestandardowy CSS znajdziesz pole tekstowe, w którym możesz dodać niestandardowe arkusze stylów CSS bezpośrednio do każdego elementu. Wpisy CSS w tych parametrach są już opakowane w znaczniki stylu. Wpisz reguły CSS oddzielone średnikami.

widoczność

Ta opcja pozwala kontrolować urządzenia, na których pojawia się moduł. Możesz wyłączyć moduł indywidualnie na tabletach, smartfonach lub komputerach stacjonarnych. Jest to przydatne, jeśli chcesz korzystać z różnych modułów na różnych urządzeniach lub chcesz uprościć projektowanie mobilne poprzez wyeliminowanie niektórych elementów strony.

Inne samouczki Divi

Ten artykuł zawiera 1 komentarz

Zostaw komentarz

Twój adres e-mail nie zostanie 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
8 akcji
udział3
ćwierkanie1
Enregistrer4