Przejdź do głównej treści

Samouczek Divi: Jak korzystać z modułu nawigacji w artykułach

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]

Aby dodać moduł nawigacyjny do artykułów Divi na swojej stronie, 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 również kliknąć przycisk Użyj Visual Builder kiedy przeglądasz swoją witrynę na pierwszym planie, jeśli jesteś podłączony do pulpitu WordPress.

divi budowniczy

Po wprowadzeniu programu Visual Builder można kliknąć szary przycisk plus, aby dodać nowy moduł do strony. Nowe moduły można dodawać tylko w rzędach. Jeśli zaczynasz nową stronę, nie zapomnij najpierw dodać linii do swojej strony.

navigation in articles.png

Znajdź moduł nawigacyjny na liście modułów i kliknij go, aby dodać go do swojej strony. Lista modułów jest dostępna do przeszukiwania, co oznacza, że ​​możesz również wpisać słowo "nawigacja w artykułach", a następnie kliknąć enter, aby wyszukać i automatycznie dodać moduł nawigacyjny. 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 przypadku: dodawanie niestandardowych linków nawigacyjnych u dołu posta na blogu

Posiadanie linków nawigacyjnych do poniższych i poprzednich artykułów na dole artykułu to świetny sposób, aby utrzymać zainteresowanie odwiedzających Twoją zawartością. W tym przykładzie pokażę, jak używać rzeczywistych nazw tytułów publikacji dla linków nawigacyjnych zamiast "poprzednich" i "następnych" ogólnych nazw linków. Pokażę ci również, jak dodać obramowanie wokół linków, aby nadać im większy efekt.

przykładowy tytuł menu nawigacji publication.jpg

Zacznijmy.

Za pomocą kreatora wizualnego dodaj sekcję standardową z układem o pełnej szerokości (kolumna 1) u dołu publikacji. Następnie dodaj moduł nawigacyjny po linii.

zmień tytuły linków divi.png

Zaktualizuj ustawienia nawigacji publikowania w następujący sposób:

Karta Zawartość

Poprzedni tekst linku:% title (ta zmienna wstawia tytuł artykułu)
Tekst następującego 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
Niestandardowe dopełnienie: 20px Top, 20px Right, 20px Bottom, 20px Left

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

zmień nawigację links.png

To wszystko! Masz teraz tytuły publikacji na linkach nawigacyjnych

przykład linku do artykułu o divi.png

Opcje zawartości modułu nawigacji

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.

moduł obszaru treści tytuł artykułu.png

Tekst poprzedniego linku

Zdefiniuj niestandardowy tekst dla poprzedniego linku. Możesz użyć zmiennej tytułowej%, aby dołączyć tytuł artykułu. Pozostaw puste dla wartości domyślnej.

Tekst następującego linku

Ustaw niestandardowy tekst dla następującego linku. Możesz użyć zmiennej tytułowej%, aby dołączyć tytuł wiadomości. Pozostaw puste dla wartości domyślnej.

W tej samej kategorii

Tutaj możesz określić, czy poprzednie i następne artykuły powinny być w tym samym terminie taksonomicznym co bieżący artykuł.

Nazwa niestandardowej taksonomii

Pozostaw tę opcję pustą, jeśli korzystasz z tego modułu w projekcie lub artykule. W przeciwnym razie wpisz nazwę systematyki, aby opcja "W tej samej kategorii" działała poprawnie.

Ukryj poprzedni link

Możesz tu wybrać, aby ukryć lub pokazać poprzedni link.

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]

Ukryj poniższy link

Możesz tutaj wybrać, aby ukryć lub pokazać poniższy link.

Etykieta administratora

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.

Opcje projektowania po nawigacji

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.

artykuł o projekcie sekcji title.png

Łącza czcionkę

Możesz zmienić czcionkę tekstu linku, wybierając żądaną czcionkę z menu rozwijanego. 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.

Połącz rozmiar czcionki

Tutaj możesz dostosować rozmiar tekstu linku. 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 linków

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

Rozstawianie listów odnośników

Odstępy liter wpływają na przestrzeń między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście łącza, 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 linków

Wysokość linii wpływa na przestrzeń między wierszami w twoich linkach Jeśli chcesz zwiększyć odstęp między liniami, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu tekstowym. wpisane 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.

Użyj granicy

Włączenie tej opcji spowoduje umieszczenie granicy wokół twojego modułu. Granicę tę można dostosować za pomocą następujących parametrów warunkowych.

Kolor obramowania

Ta opcja wpływa na kolor twojej granicy. Wybierz niestandardowy kolor w selektorze kolorów, aby zastosować go do obramowania.

Szerokość granicy

Domyślnie granice mają szerokość piksela 1. Możesz zwiększyć tę wartość, przeciągając suwak zasięgu lub wprowadzając wartość niestandardową w polu wprowadzania po prawej stronie suwaka. Niestandardowe jednostki miary obsługiwane, co oznacza, że ​​możesz zmienić domyślną jednostkę "px" na inną, np. Em, vh, vw itp.

Styl graniczny

Granice obsługują osiem różnych stylów: pełny, kropkowany, kropkowany, podwójny, groove, grzebień, intarsja 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, pomiędzy modułem a następnym elementem powyżej, poniżej lub z lewej i prawej strony. Możesz dodać niestandardowe wartości marginesów do jednej z czterech stron modułu. Aby usunąć niestandardowy margines, usuń wartość dodaną z pola wejściowego. Domyślnie te wartości są mierzone w pikselach, ale można wprowadzić niestandardowe jednostki miary w polach wejściowych.

Niestandardowe dopełnienie

Wypełnienie to przestrzeń dodana wewnątrz modułu, między krawędzią modułu a jego elementami wewnętrznymi. Możesz dodać niestandardowe wartości wypełnienia do jednej z czterech stron modułu. Aby usunąć niestandardowy margines, usuń wartość dodaną z pola wejściowego. Domyślnie te wartości są mierzone w pikselach, ale można wprowadzić niestandardowe jednostki miary w polach wejściowych.

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

Zaawansowane opcje modułu nawigacji

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.

advance opcja title module of articles.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.

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
114 akcji
udział10
ćwierkanie3
Enregistrer101