Jak zbudować klikalny spis treści dla posta na blogu za pomocą bloku układu Divi?
Opublikowany: 2020-03-14Dodanie klikalnego spisu treści do posta na blogu to świetny sposób na poprawę komfortu użytkownika. W wielu przypadkach spis treści wpisu na blogu korzysta z łączy kotwiczących, aby ułatwić użytkownikom poruszanie się po treści. A spis treści (z linkami do kotwic) jest naprawdę prosty do zbudowania przy użyciu podstawowego HTML. Jednak dodanie niestandardowego projektu/CSS w celu dostosowania może być wyzwaniem. Tutaj przydaje się blok układu Divi.
W tym samouczku zaprojektujemy klikalny spis treści dla pojedynczego wpisu na blogu (w Gutenburgu), który wykorzystuje linki kotwiczne, aby kierować użytkowników do wyznaczonych nagłówków w całym poście. Aby to zrobić, użyjemy bloku Divi Layout, aby utworzyć spis treści ze wszystkimi potężnymi narzędziami projektowymi konstruktora Divi do naszej dyspozycji.
Zacznijmy!
zapowiedź
Pobierz BEZPŁATNIE blok układu spisu treści wielokrotnego użytku
Aby położyć swoje ręce na bloku układu spisu treści z tego samouczka, najpierw musisz je pobrać za pomocą poniższego przycisku. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.
Pobierz za darmo
Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.
Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!
Jak korzystać z pobierania, aby zaimportować ten blok układu do swojej witryny?
Aby zaimportować te wielokrotnego użytku blok układu obrazu Divi do swojej witryny, najpierw musisz rozpakować pobrany plik. Znajdziesz tam trzy pliki JSON, które musisz zaimportować do swojej witryny.
Przejdź do edycji posta za pomocą domyślnego edytora (Gutenberg). Otwórz menu "Więcej narzędzi i opcji" w prawym górnym rogu strony i wybierz "Zarządzaj wszystkimi blokami wielokrotnego użytku".
Następnie kliknij przycisk Importuj z przycisku JSON. Wybierz jeden z plików JSON z folderu pobierania i kliknij przycisk importu.
Po zakończeniu dodaj nowy blok w obrębie Gutenberga. Zaimportowane bloki układu wielokrotnego użytku będziemy mogli znaleźć pod przełącznikiem opcji wielokrotnego użytku. Po prostu kliknij ten o nazwie „Spis treści”, aby dodać go do swojego posta.
Otóż to!
Przejdźmy do samouczka, dobrze?
Czego potrzebujemy, aby zacząć
Aby rozpocząć, musimy wykonać następujące czynności:
- Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
- Utwórz nowy post w WordPressie i użyj domyślnego edytora (Gutenberg), aby dodać fałszywą treść (tytuł, nagłówki, akapity, wyróżniony obraz itp.). Upewnij się, że utworzyłeś co najmniej trzy bloki nagłówków z zawartością pod każdym. Ponieważ będziemy dodawać linki kotwiczne do spisu treści, potrzebujemy trzech nagłówków, aby połączyć się z dalszymi postami.
Po tym jesteśmy gotowi do startu.
Tworzenie klikalnego spisu treści dla posta na blogu za pomocą bloku układu Divi
Dodaj blok układu Divi
Najpierw dodaj nowy blok układu Divi na górze treści posta na blogu.
Następnie kliknij przycisk Zbuduj nowy układ. Spowoduje to wdrożenie edytora układu, który jest konstruktorem Divi dla bloku układu.
Dodaj wiersz
W Edytorze układu rozpocznij projekt, dodając wiersz z jedną kolumną.
Dodaj górny rozdzielacz
Wewnątrz kolumny dodaj moduł rozdzielający. Będzie to jeden z dwóch przegródek, których użyjemy do obramowania spisu treści.
Ustawienia dzielnika
Następnie zaktualizuj ustawienia dzielnika w następujący sposób:
- Kolor linii: #eeeeee
- Pozycja linii: wyśrodkowana w pionie
- Waga dzielnika: 3px
- Szerokość: 25%
- Padding: 30px góra, 30px dół
Dodaj dolną przegrodę
Aby utworzyć drugi rozdzielacz, zduplikuj poprzedni rozdzielacz.
Utwórz nagłówek spisu treści za pomocą modułu Blurb
Po umieszczeniu przegród stwórzmy nasz nagłówek do spisu treści.
Dodaj nowy moduł notki pomiędzy dwoma przegrodami.
Treść rozmycia
Otwórz ustawienia notki i zaktualizuj zawartość w następujący sposób:
- Tytuł: „Spis treści”
- Użyj ikony: TAK
- Ikona: zobacz zrzut ekranu
Ustawienia projektu rozmycia
Na karcie projekt zaktualizuj następujące elementy:
- Kolor ikony: #eeeeee
- Umieszczenie obrazu/ikony: po lewej
- Użyj rozmiaru czcionki ikony: TAK
- Rozmiar czcionki ikony: 100px
- Poziom nagłówka tytułu: H2
- Szerokość treści: 100%
- Wysokość: 38px
Zauważ, że wysokość notki jest mniejsza niż wysokość ikony. Dzięki temu ikona może rozciągać się w dół obok elementów notek, które dodamy w następnej kolejności.
Gdy notka tytułowa jest już na miejscu, jesteśmy gotowi do rozpoczęcia dodawania klikalnych elementów/napisów, które składają się na nasz spis treści. W tym celu wykorzystamy również moduły notatek.
Dodaj element nr 1 Blurb
Dodaj nowy moduł notki pod tytułem noty.
Treść rozmycia
Otwórz ustawienia notki i usuń domyślną treść treści, aby widoczny był tylko tytuł. W tytule dodasz blok tekstu odpowiadający sekcji/nagłówkowi, do którego chcemy dodać link w dalszej części posta.
Następnie zaktualizuj zawartość za pomocą ikony strzałki w prawo na pulpicie.
Wdróż opcję najechania na ikonę i zmień ikonę na strzałkę w dół po najechaniu myszą. Będzie to przyjemna mikro-interakcja, podkreślająca, że link przesunie się do lokalizacji w poście.
Projekt plamy
Teraz możemy zaprojektować moduł notki w dowolny sposób. W tym przykładzie zaktualizujmy ustawienia notki w następujący sposób:
- Kolor ikony: #b856c7
- Ikona koła: TAK
- Kolor koła: #ffffff
- Pokaż obramowanie koła: TAK
- Kolor obramowania koła: #b856c7
- Umieszczenie obrazu/ikony: po lewej
- Użyj rozmiaru czcionki ikony: TAK
- Rozmiar czcionki ikony: 16px
- Rozmiar tekstu: 16px
- Wysokość wiersza tytułu: 2em
- Szerokość treści: 100%
- Margines: pozostało 118 pikseli
- Wyściółka: góra 10px
- Padding (najechanie): 10px w lewo
Powiel Blurb, aby uzyskać więcej elementów
Teraz, gdy nasza pierwsza notka jest gotowa, możemy ją powielać tyle razy, ile potrzeba, w zależności od liczby klikalnych linków, które chcemy umieścić w poście. Na razie po prostu zduplikujmy go dwukrotnie, aby utworzyć w sumie trzy elementy naszego spisu treści.
Dodawanie adresów URL linków zakotwiczonych
W tej chwili nie można klikać naszych elementów notek, więc musimy dodać do każdego z nich niezbędne adresy URL linków do zakotwiczenia. Link do kotwicy zawsze zaczyna się hashtagiem (#), po którym następuje dowolny identyfikator, który chcesz dołączyć.
Link do kotwicy #jeden
Dla uproszczenia dodamy link do kotwicy „#one” do pierwszej notki na liście. Aby to zrobić, otwórz ustawienia dla pierwszego modułu notatek na liście (nie noty tytułowej) i zaktualizuj następujące elementy:
- Adres URL łącza modułu: #jeden
Link do kotwicy # dwa
Następnie otwórz ustawienia drugiego elementu notki i dodaj następujący link:
- Adres URL łącza modułu: #dwa
Link do kotwicy #trzy
Na koniec dodaj następujący link do trzeciego elementu notki:
- Adres URL łącza modułu: #trzy
Zwiększanie odstępów
Ustawienia wiersza
W tej chwili jest trochę za dużo miejsca między elementami naszego rzędu. Aby rozwiązać ten problem, otwórz ustawienia wiersza i zaktualizuj szerokość rynny i wypełnienie w następujący sposób:
- Szerokość rynny: 1
- Szerokość: 100%
- Padding: 0px na górze, 0px na dole
Ustawienia sekcji
Wyjmijmy również dopełnienie sekcji. Otwórz ustawienia sekcji i zaktualizuj następujące elementy:
- Padding: 0px na górze, 0px na dole
Zapisz układ
Skończyliśmy z naszym projektem spisu treści. Upewnij się, że zapisałeś i wyszedłeś z edytora układu.
Teraz powinieneś zobaczyć swój nowy spis treści w domyślnym edytorze bloków.
Dodawanie zakotwiczeń HTML do nagłówków postów
Dodaliśmy adresy URL linków do zakotwiczenia do każdej notki, która składa się na elementy naszego spisu treści. Teraz musimy dodać odpowiedni identyfikator CSS (lub kotwicę HTML) do bloków nagłówków znajdujących się dalej w poście.
Kotwica HTML jeden
Kliknij blok zawierający pierwszy nagłówek, do którego chcesz połączyć/przeskoczyć. Następnie otwórz ustawienia dla tego bloku. Pod przełącznikiem Opcje zaawansowane dodaj „jeden” do pola wprowadzania Zakotwiczenie HTML :
Kotwica HTML: jedna
Pamiętaj, że nasza pierwsza notka ma adres URL „#jeden”, który będzie zawierał link do tego. Ale nie dodawaj hashtagu do tej kotwicy HTML. Nie jest to potrzebne.)
Kotwica HTML druga
Następnie wybierz drugi blok nagłówka i zaktualizuj następujące elementy:
- Kotwica HTML: dwa
Kotwica HTML trzy
I na koniec wybierz trzeci blok nagłówka i dodaj kotwicę HTML w następujący sposób:
- Kotwica HTML: trzy
Ostateczny wynik
Zobaczmy ostateczny wynik na poście na żywo.
A oto jak będą działać linki kotwiczne. Zwróć uwagę na efekt najechania na ikony i płynne przewijanie łącza do odpowiedniej kotwicy pod stroną.
Dodawanie spisu treści jako bloku układu wielokrotnego użytku
Jeśli chcesz nadal używać tego bloku układu jako szablonu dla przyszłych postów, dobrym pomysłem byłoby zapisanie bloku układu jako bloku układu wielokrotnego użytku. Umożliwi to łatwe dodanie bloku „spisu treści” z wbudowanej listy bloków.
Aby to zrobić, kliknij blok układu Divi zawierający spis treści i otwórz menu więcej ustawień. Następnie wybierz „Dodaj do bloków układu wielokrotnego użytku”.
Wprowadź nazwę bloku wielokrotnego użytku („Spis treści”) i kliknij Zapisz.
Teraz będziesz mieć blok dostępny na liście Bloki wielokrotnego użytku podczas dodawania nowego bloku do postu.
Teraz blok układu służy jako wygodny szablon do budowania spisu treści dla Twojego posta. Nie zapomnij przekonwertować bloku na zwykły blok układu przed dostosowaniem go do konkretnego posta. Nie chcesz zmieniać bloku układu wielokrotnego użytku.
Aby to zrobić, otwórz menu więcej ustawień bloku układu wielokrotnego użytku i wybierz "Konwertuj na zwykły blok".
Końcowe przemyślenia
Mam nadzieję, że ten blok układu spisu treści Divi okaże się pomocny dla tych postów, które są wystarczająco długie, aby ich potrzebować. Jeśli chcesz, aby robiono to za Ciebie dynamicznie (np. Automatyczne tworzenie spisu treści na podstawie nagłówków postów), istnieją wtyczki, takie jak Spis treści Plus, które robią tego za Ciebie. Ten post jest dla tych, którzy lubią projektować z Divi i nie mają nic przeciwko tworzeniu spisu treści na podstawie postu po postu.
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!