Zanim będziesz mógł dodać moduł nawigacji Divi do swojej strony, musisz najpierw przejść do Divi Builder. Kiedyś Motyw Divi zainstalowany na Twojej stronie, 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 Użyj Visual Builder podczas przeglądania witryny na pierwszym planie, jeśli jesteś podłączony do pulpitu nawigacyjnego WordPress.
Po wejściu do programu Visual Builder możesz kliknąć szary przycisk plus, aby dodać nowy moduł do swojej strony. Nowe moduły można dodawać tylko w wierszach. Jeśli zaczynasz nową stronę, pamiętaj, aby najpierw dodać wiersz do swojej strony.
Znajdź moduł nawigacji na liście modułów i kliknij go, aby dodać go do swojej strony. Listę modułów można przeszukiwać, co oznacza, że można również wpisać słowo „nawigacja po wpisach”, a następnie kliknąć Enter, aby automatycznie znaleźć i dodać moduł nawigacji. 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 niestandardowych linków nawigacyjnych u dołu posta na blogu
Umieszczenie linków nawigacyjnych do następnych i poprzednich artykułów na dole artykułu to świetny sposób na zachowanie odwiedzający zaangażowany w Twoje treści. W tym przykładzie pokażę, jak używać rzeczywistych nazw tytułów postów dla linków nawigacyjnych zamiast ogólnych nazw linków „poprzedni” i „następny”. Pokażę ci również, jak dodać obramowanie wokół linków, aby nadać im większy efekt.
Zacznijmy.
Użyj kreatora wizualnego, aby dodać standardową sekcję z układem o pełnej szerokości (1 kolumna) u dołu postu. Następnie dodaj moduł nawigacyjny po wierszu.
Zaktualizuj ustawienia nawigacji publikowania w następujący sposób:
Karta Zawartość
Tekst poprzedniego linku:% title (ta zmienna wstawia tytuł artykułu)
Tekst linku:% title (ta zmienna wstawia tytuł artykułu)
Karta Projekt
Linki do czcionek: PT Sans
Linki Rozmiar czcionki: 20px
Kolor tekstu linków: # 5e95c1
Użyj granicy: TAK
Kolor obramowania: # 5e95c1
Szerokość obramowania: 1px
Niestandardowa tapicerka: 20px Top, 20px Right, 20px Bottom, 20px Left
To wszystko ! Masz teraz tytuły postów w łączach nawigacyjnych
Opcje zawartości modułu nawigacji
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.
Tekst poprzedniego linku
Zdefiniuj własny tekst dla poprzedniego łącza. Możesz użyć zmiennej% title, aby dołączyć tytuł artykułu. Pozostaw puste jako domyślne.
Tekst następującego linku
Zdefiniuj niestandardowy tekst dla następującego łącza. Możesz użyć zmiennej% title, aby dołączyć tytuł posta. Pozostaw puste jako domyślne.
W tej samej kategorii
W tym miejscu można określić, czy poprzednie i kolejne artykuły powinny mieć ten sam termin taksonomii co artykuł bieżący.
Nazwa niestandardowej taksonomii
Pozostaw tę opcję pustą, jeśli używasz tego modułu w projekcie lub artykule. W przeciwnym razie wpisz nazwę taksonomii, aby opcja „W tej samej kategorii” działała poprawnie.
Ukryj poprzedni link
Tutaj możesz ukryć lub pokazać poprzedni link.
Ukryj poniższy link
Tutaj możesz ukryć lub pokazać poniższy link.
Etykieta administratora
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 projektu po nawigacji
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.
Łącza czcionkę
Możesz zmienić czcionkę tekstu linków, 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.
Połącz rozmiar czcionki
Tutaj możesz dostosować rozmiar tekstu linku. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub bezpośrednio wprowadzić żądaną wartość 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 linków
Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu linków, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.
Rozstawianie listów odnośnikó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 linkó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 rozmiaru, aby zmienić typ jednostki.
Wysokość linii linków
Wysokość linii wpływa na odstęp między poszczególnymi wierszami tekstu linku.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. wpis 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.
Użyj granicy
Włączenie tej opcji spowoduje umieszczenie ramki wokół modułu. To obramowanie można dostosować za pomocą następujących parametrów warunkowych.
Kolor obramowania
Ta opcja wpływa na kolor obramowania. Wybierz kolor niestandardowy z próbnika kolorów, aby zastosować go do obramowania.
Szerokość granicy
Domyślnie krawędzie mają szerokość 1 piksela. Możesz zwiększyć tę wartość, przeciągając suwak zakresu lub wprowadzając niestandardową wartość w polu wprowadzania po prawej stronie suwaka. Obsługiwane są niestandardowe jednostki miary, co oznacza, że możesz zmienić domyślną jednostkę z „px” na inną, np. Em, vh, vw itp.
Styl graniczny
Krawędzie obsługują osiem różnych stylów: jednolity, kropkowany, kropkowany, podwójny, rowek, grzbiet, nakładka i początek. Wybierz żądany styl z menu rozwijanego, aby zastosować go do obramowania.
Margines niestandardowy
Margines to przestrzeń dodana na zewnątrz modułu, między modułem a następnym elementem powyżej, poniżej lub po lewej i prawej stronie. Możesz dodać niestandardowe wartości marginesów do dowolnej z czterech stron modułu. Aby usunąć niestandardowy margines, usuń wartość dodaną z pola wejściowego. Domyślnie wartości te są mierzone w pikselach, ale w polach wejściowych można wprowadzić niestandardowe jednostki miary.
Niestandardowe wypełnienie
Wypełnienie to przestrzeń dodana wewnątrz modułu, pomiędzy krawędzią modułu a jego elementami wewnętrznymi. Możesz dodać niestandardowe wartości dopełnienia do dowolnej z czterech stron modułu. Aby usunąć niestandardowy margines, usuń wartość dodaną z pola wejściowego. Domyślnie wartości te są mierzone w pikselach, ale w polach wejściowych można wprowadzić niestandardowe jednostki miary.
Zaawansowane opcje modułu nawigacyjnego
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 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.
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