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

Jak dodać moduł pełnoekranowego menu Divi

Zanim będziesz mógł dodać moduł menu pełnoekranowego 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 menu pełnoekranowego 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.

Znajdź pełnoekranowy moduł nagłówka 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łnego ekranu”, 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: dodanie pełnoekranowego nagłówka do strony Informacje

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

Wszystkie moduły pełnego ekranu są dostępne tylko podczas korzystania z sekcji pełnego ekranu. Korzystając z programu Visual Builder, wstaw nową sekcję pełnoekranową. Następnie dodaj moduł Person do sekcji.

Zaktualizuj ustawienia nagłówka pełnego ekranu w następujący sposób:

Opcje zawartości

Tytuł: O nas Tekst napisów: Robimy coś innego ... Adres URL obrazu tła: [wstaw obraz 1920 x 800] Kolor tła nakładki: rgba (0,0,0,0.2 , XNUMX)

Opcje projektowania

Orientacja tekstu i logo: Środkowy przycisk Przewiń w dół Przycisk: TAK Ikona: [ikona wyboru] Ikona przewijania w dół Kolor: # fcbf00 Ikona przewijania: 50px Kolor tekstu: Jasny Kolor tekstu: # fcbf00 Czcionka Tytuł: Otwórz Bez, pogrubienie, wielkie litery Tytuł Rozmiar czcionki: 60 pikseli (komputer), 40 pikseli (tablet), 30 pikseli (telefon) Podtytuł Rozmiar czcionki: 25 pikseli

Opcje zaawansowane (niestandardowy CSS)

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

To wszystko!

Opcje zawartości nagłówka pełnoekranowego

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.

Tytuł

Tutaj wpisz tytuł swojej strony.

Tekst napisów

Jeśli chcesz użyć napisów, dodaj je tutaj. Twój podpis 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.

URL obrazu logo

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

URL obrazu nagłówka

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

URL obrazu tła

Jeśli jest ustawiona, 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ę na wierzchu kolorów tła, co oznacza, że ​​kolor tła nie będzie widoczny po zastosowaniu obrazu tła.

Kolor tła

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

Kolor nakładki w tle

Wybierz kolor tła, który zostanie umieszczony nad obrazem tła. Półprzezroczyste obrazy nakładek mogą tworzyć fajne efekty, gdy zostaną umieszczone na obrazach tła.

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

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 ma być rozszerzony do pełnego rozmiaru ekranu.

Użyj efektu Parallax

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

Metoda paralaksy

Zdefiniuj metodę zastosowaną do 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 listy rozwijanej 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ę u dołu nagłówka.

Wyrównanie obrazu w pionie

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 jasnym tle, tekst powinien być ciemny.

Pionowe wyrównanie tekstu

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

Czcionka tytułu

Możesz zmienić czcionkę tekstu tytułu, 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.

Rozmiar czcionki tytułu

Tutaj możesz dostosować rozmiar tekstu tytułowego. 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 tytułu

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

Odstępy liter tytułu

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 tytułu, 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 tytułowej

Wysokość linii wpływa na odstęp między poszczególnymi wierszami tekstu tytułu.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.

Czcionka zawartości

Możesz zmienić czcionkę tekstu treści, 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.

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 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 zawartości

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

Odczytywanie liter treści

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 treści, 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 treści

Wysokość wiersza wpływa na odstęp między każdym wierszem tekstu zawartoś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 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.

Font Subtitle

Możesz zmienić czcionkę tekstu podpisu, 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.

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 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 napisów

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

Rozstawianie liter napisów

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 podpisu, 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 napisów

Wysokość linii wpływa na odstęp między każdym wierszem tekstu podpisu. 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 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 całego modułu nagłówka.

Użyj niestandardowych stylów dla przycisku

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

Rozmiar tekstu przycisku

To ustawienie może służyć do zwiększania lub zmniejszania rozmiaru tekstu na przycisku. Przycisk dostosowuje się wraz ze wzrostem i zmniejszeniem rozmiaru tekstu.

Kolor tekstu przycisku

Domyślnie przyciski przyjmują kolor akcentów motywu, zgodnie z definicją w narzędziu Dostosowywanie motywu. Ta opcja umożliwia przypisanie niestandardowego koloru 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 z próbnika kolorów.

Przycisk granicy szerokości

Wszystkie przyciski Divi mają domyślnie obramowanie 2px. Za pomocą tego ustawienia można zwiększyć lub zmniejszyć tę granicę. Obramowania można usunąć, wprowadzając wartość 0.

Kolor obramowania przycisku

Domyślnie obramowania przycisków przyjmują kolor akcentu motywu, zgodnie z definicją w narzędziu Dostosowywanie motywu. Ta opcja umożliwia przypisanie niestandardowego koloru obramowania do przycisku tego modułu. Wybierz swój 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 o 3 piksele. Możesz zmniejszyć tę wartość do 0, aby utworzyć kwadratowy przycisk, lub znacznie ją zwiększyć, aby utworzyć przyciski z okrągłymi krawędziami.

Rozstawianie liter przycisków

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 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 wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Czcionka przycisku

Możesz zmienić czcionkę tekstu przycisku, 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.

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ę, która ma być używana na przycisku. Divi ma różne ikony do wyboru.

Kolor ikony przycisku

Dostosowanie tego ustawienia spowoduje zmianę koloru ikony wyświetlanej na przycisku. Domyślnie kolor ikony jest taki sam, jak kolor tekstu przycisku, ale to ustawienie umożliwia niezależną regulację koloru.

Przycisk umieszczania ikon

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

Pokaż ikonę tylko po najechaniu na przycisk

Domyślnie ikony przycisków są wyświetlane tylko po najechaniu kursorem. Jeśli chcesz, aby ikona była zawsze wyświetlana, wyłącz to ustawienie.

Przycisk Umieść kolor tekstu

Ten kolor zostanie użyty po najechaniu kursorem myszy na przycisk gościa. Kolor zmieni się z koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

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

Ten kolor zostanie użyty po najechaniu kursorem myszy na przycisk gościa. Kolor zmieni się z koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Przycisk Obrysuj kolor obramowania (kolor obramowania kursora)

Ten kolor zostanie użyty po najechaniu kursorem myszy na przycisk gościa. Kolor zmieni się z koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Przesuń kursor na obramowanie

Wartość ta zostanie użyta, gdy przycisk zostanie umieszczony nad przyciskiem myszy gościa. Wartość zmieni się od wartości bazowej zdefiniowanej w poprzednich ustawieniach.

Przycisk odstępu między nutami

Wartość ta zostanie użyta, gdy przycisk zostanie umieszczony nad przyciskiem myszy gościa. Wartość zmieni się od wartości bazowej zdefiniowanej w poprzednich ustawieniach.

Zaawansowane opcje nagłówka o 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.

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]

Inne samouczki Divi

• strony internetowe 5 dotyczące stosowania restauracja Divi tematu
• Jak dodać tekst do produktu Divi WooCommerce
• Jak zmienić kolor menu między stronami Divi
• Jak spersonalizować siatki bloga za pomocą Divi
• Jak korzystać z roli Divi edytor na WordPressie
• Jak utworzyć pełnoekranowy suwak Divi
• Jak zmienić kolor menu między stronami Divi
• Funkcje, których prawdopodobnie nie wiesz o Divi
• Jak korzystać z Divi Builder na WordPress
• Jak korzystać z modułu przewijania wideo Divi
• Jak korzystać z modułu Divi Builder Flip
• Jak dodać moduł referencji w Divi Builder
• Jak korzystać z modułu tekstowego Divi
• Jak utworzyć suwak na Divi
• Jak edytować rolę użytkownika Divi
• Jak korzystać z modułu Divi Social Media
• Jak korzystać z modułu sklepu na temat WordPress Divi
• Jak korzystać z modułu paska bocznego Divi
• Jak korzystać z modułu tabeli cen Divi
• Jak korzystać z modułu tytułowego publikacji Divi
• Jak dodać moduł wideo Divi
• Jak korzystać z modułu nawigacji artykułów
• Jak korzystać z modułu wyszukiwania Divi
• Jak korzystać z modułu portfela Divi
• Jak korzystać z modułu person w Divi Builder
• Jak korzystać z modułu portfela z filtrem Divi
• Jak korzystać z modułu suwaka o pełnej szerokości
• Jak korzystać z modułu obrazu Divi Builder
• Jak korzystać z modułu nawigacji pełnej szerokości Divi Builder
• Jak korzystać z modułu galerii obrazów
• Jak korzystać z pełnego modułu karty Divi Builder
• Jak korzystać z modułu portfela o pełnej szerokości Divi
• Jak korzystać z modułu nagłówka Divi o pełnej szerokości
• Jak korzystać z modułu licznika Divi
• Jak korzystać z suwaka artykułów w Divi Builder
• Jak korzystać z modułu Divi Email Optin