Jak dodać spis treści do swoich postów na blogu w Elementor

Tworzenie długich treści blogów jest świetne dla SEO, ale może również sprawić, że twoje posty są… cóż, długie. Przewijanie ogromnego artykułu, nie wiedząc, gdzie jesteś i ile pozostało, może być frustrujące dla czytelników. Właśnie tam przydaje się spis treści (TOC).

Spis treści (TOC) działa jak mapa, pomagając czytelnikom szybko znaleźć to, czego potrzebują, skakać do sekcji i uzyskać lepsze poczucie struktury treści. Ponadto może zwiększyć SEO, umożliwiając bogate fragmenty w wynikach wyszukiwania.

Jeśli używasz Elementor do projektowania swojej witryny i postów na blogu, dodanie spisu treści jest bardzo proste, szczególnie gdy używasz wtyczki PowerPack Addons.

W tym przewodniku pokażemy, jak dodać spis treści do swojego postu na blogu w Elementor bez dodawania kodu HTML lub CSS.

Dlaczego powinieneś dodać spis treści

Przed wskoczeniem do poradników szybko porozmawiajmy o tym, dlaczego TOC jest inteligentnym dodatkiem do postów na blogu.

• Poprawia wrażenia użytkownika: czytelnicy mogą natychmiast przejść do sekcji, która ich interesuje.
• Zwiększenie SEO: Wyszukiwarki często wyświetlają linki do TOC jako SiteLinks, które mogą poprawić stawki kliknięcia.
• Zachęca do dłuższego zaangażowania: zapewniając użytkownikom kontrolę nad nawigacją, trzymasz ich na stronie dłużej.
• Zmniejsza wskaźnik odrzuceń: Odwiedzający nie czują się przytłoczeni długą zawartością, gdy mogą go łatwo przeglądać.

Teraz przejdźmy do tego, jak możesz dodać w pełni funkcjonalny i stylowy TOC w Elementor.

Jak dodać spis treści do swoich postów na blogu w Elementor

Krok 1: Zainstaluj dodatki PowerPack dla elementora

Zanim przejdziemy, upewnij się, że zainstalowałeś i aktywujesz dodatki PowerPack dla Elementor na swojej stronie internetowej. Aby dowiedzieć się więcej, sprawdź nasz przewodnik na temat instalacji i aktywowania PowerPack Addons Pro.

Krok 2: Włącz widżet spisu treści

Po aktywności wtyczki dobrze jest upewnić się, że widżet TOC jest faktycznie włączony.

Aby to zrobić, przejdź do Elementor >> PowerPack >> Elementy na desce rozdzielczej WordPress. Stamtąd poszukaj widżetu „Spis treści” i upewnij się, że przełącznik obok niego jest włączony (niebieski).

Teraz jesteś gotowy, aby użyć go w Elementor.

Krok 3: Utwórz pojedynczy szablon w Elementor

Aby zastosować spis treści konsekwentnie we wszystkich postach na blogu, najlepiej dodać go do jednego szablonu postu.

Oto jak:

• Przejdź do szablonów >> Dodaj nowe.
• Z menu rozwijanego wybierz pojedynczy post.
• Podaj swojemu szablonowi nazwę, taką jak „ Układ blogu ” lub „ Szablon postu ”, a następnie kliknij „ Utwórz szablon ”.

Elementor zapyta teraz, czy chcesz zacząć od pustego płótna lub użyć wstępnie zbudowanego układu.

Krok 4: Użyj wstępnie zaprojektowanego szablonu postu (opcjonalnie)

Jeśli nie chcesz budować układu od zera, Elementor ułatwia wstawienie gotowego szablonu. Wybierz jedną z wstępnie zaprojektowanych opcji; Zazwyczaj zawiera niezbędne elementy, takie jak tytuł postu, wizerunek, pudełko autora i treść postu.

Zawsze możesz je później zmodyfikować, aby lepiej pasować do projektu swojego bloga.

Krok 5: Dodaj widżet spisu treści do szablonu

Następnie musimy dodać widżet spisu treści.

W panelu Elementor poszukaj „Spis treści”. Gdy pojawi się widżet (poszukaj ikony PP w rogu), przeciągnij i upuść go do układu.

Wspólne miejsce do umieszczania spisu treści (TOC) znajduje się tuż pod tytułem postu lub obrazem, ale możesz go umieścić tam, gdzie ma to sens dla Twojej treści.

Po dodaniu widżetu automatycznie wykryje i wyświetli wszystkie nagłówki (takie jak H2S i H3S) z twojego postu.

Krok 6: Dostosuj ustawienia treści

Dzięki widżetowi na stronie zobaczysz listę wszystkich nagłówków z treści postu. Teraz spersonalizujmy spis treści.

Na karcie zawartości znajdziesz kilka ustawień:

Możesz zmienić tytuł spisu treści (TOC) na coś takiego jak „Szybka nawigacja” lub „na tej stronie”. Jeśli myślisz o SEO i dostępności, możesz również dostosować znacznik HTML tytułu i ustawić go jako H2 lub H3 , w zależności od tego, jak pasuje do twojej hierarchii.

Następnie istnieją ustawienia obejmujące lub wykluczające niektóre poziomy nagłówka . Na przykład powinieneś pokazywać tylko H2 i H3, a następnie pomijać H4, a poniżej. Możesz wybrać styl listy, wybrać liczby dla ustrukturyzowanego, krok po kroku odczucia lub pocisków , aby uzyskać bardziej minimalny wygląd.

Krok 7: Przeglądaj dodatkowe funkcje (opcjonalnie, ale przydatne)

Widżet spisu treści zawartości jest pełen funkcji, które pomagają zwiększyć użyteczność, jak i projektowanie.

Możesz sprawić, że spis treści (TOC) jest spływa , który jest świetny dla użytkowników mobilnych lub gdy chcesz utrzymać układ w czystości. Dodaj ikonę do rozwinięcia/zawalenia się i określ, kiedy widżet powinien zawalić się na urządzeniach mobilnych, tabletach, komputerach stacjonarnych lub wszystkich urządzeniach.

Istnieje również hierarchiczna opcja widoku . To pokazuje związek między H2S, H3 i H4S poprzez wcięcie podwodności pod nagłówkami rodziców. Jeśli masz szczegółowy post, tworzenie spisu treści (TOC) sprawia, że ​​jest bardziej zorganizowany i łatwiejszy do skanowania.

W przypadku dłuższych postów włączenie lepkiego TOC na Scroll jest bardzo pomocne. Utrzymuje to, jak użytkownicy przewijają, aby w dowolnym momencie mogli skakać między sekcjami. Możesz nawet dodać przewijanie do przycisku górnego w widżecie, aby pomóc użytkownikom szybko wrócić do początku postu.

Jeśli masz lepki nagłówek na swojej stronie, rozważ dostosowanie przewijania Offse T, aby nagłówki nie były ukryte za nim, gdy użytkownik kliknie link TOC.

Krok 8: Styl TOC, aby dopasować Twoją witrynę

Teraz, gdy funkcjonalność jest skonfigurowana, upewnijmy się, że widżet wygląda świetnie. Na karcie Style znajdziesz pełny zestaw opcji dostosowywania:

• Stylizacja pudełka: Możesz dostosować kolor tła TOC, rodzaj granicy i promień obramowania, a nawet dodać cień, aby wyróżnić się. Jeśli wybierasz się na czysty układ, subtelna granica i lekkie tło działają pięknie.
• Stylowanie nagłówka: Chcesz dostosować tytuł TOC? Możesz ustawić wyrównanie tekstu, zmienić wyściółkę i dostosować kolory, typografię i ikony. Możesz nawet dodać linię separatora i dostosować jej szerokość i kolor.
• Stylizacja listy: W tym miejscu dostosowujesz rzeczywiste elementy TOC do sekcji linki. Dostosuj wyściółkę, zmień tekst i typografię nagłówka, wybierz wcięcie podgrzewań i spersonalizuj styl markerów (taki jak kolor i rozmiar pocisków).

Dzięki tym opcjom stylizacji możesz sprawić, by TOC poczuł się jak naturalne przedłużenie swojej witryny zamiast czegoś, co właśnie zostało wrzucone.

Krok 9: Publikuj i ustawiaj warunki

Gdy wszystko wygląda tak, jak chcesz, idź do publikacji. Elementor zapyta, gdzie wyświetlić ten szablon.

Wybierz warunek „w tym >> Wszystkie posty” , aby szablon (i TOC w nim) był stosowany do każdego postu na blogu w Twojej witrynie.

Kliknij Zapisz i Clos E, a gotowe!

Kluczowe atrakcje widżetu spisu powerpack o treści

Widżet spisu treści PowerPack jest pełen przydatnych funkcji, które nie tylko ulepszają wrażenia z czytania, ale także zapewnia pełną kontrolę nad tym, jak pojawia się spis treści i funkcje na Twojej stronie.

Łatwo dostosować tytuł tabeli

Możesz spersonalizować tytuł spisu treści, aby lepiej pasować do tonu lub celu Twojego postu. Niezależnie od tego, czy chcesz nazwać go „szybką nawigacją”, „Spis treści”, czy „Skocz do sekcji”, widżet PowerPack TOC pozwala go zaktualizować zaledwie kilka kliknięć.

Uwzględnij lub wyklucz nagłówki

Jedną z wyróżniających się funkcji tego widżetu jest elastyczność, jaką daje, jeśli chodzi o zarządzanie poziomami nagłówka. Możesz wybrać, które znaczniki nagłówka (H1, H2, H3 itp.) Powinny pojawić się w TOC. Co więcej, korzystając z wbudowanej funkcji selektora CSS, możesz konkretnie uwzględnić lub wykluczyć poszczególne sekcje lub nagłówki z tabeli, zapewniając pełną kontrolę nad tym, co się pojawi.

Wybierz swój preferowany styl listy

Chcesz zaprezentować swoją treść na czystej, minimalistycznej liście lub wybrać bardziej ustrukturyzowany, ponumerowany format? Masz opcje. Widżet umożliwia ustawienie stylu listy na „Brak”, „pociski” lub „liczby”, w zależności od preferencji projektu.

Długie nagłówki? Bez problemu

Jeśli twoje nagłówki są zwykle długie, nie martw się. Możesz włączyć opcję Wrap Wrap, aby tekst starannie pęknie, a spis treści (TOC) pozostaje czysty i wyrównany.

Złóż TOC na podstawie typu urządzenia

Możesz domyślnie zapaść spis treści, w zależności od typu urządzenia: Mobile, Tablet lub Desktop. Pomaga to zachować porządek na mniejszych ekranach. Dodatkowo możesz włączyć hierarchiczny pogląd, umożliwiając wyraźne wcięte i ustrukturyzowane nagłówki zagnieżdżone (takie jak H3 pod H2S).

Lepki spis treści dla długich postów

W przypadku zawartości długiej formy posiadanie spisu treści (TOC), które przewijają z użytkownikiem, jest zmieniaczem gier. Funkcja lepka TOC pozwala na to, że lista zawartości pozostaje widoczna, gdy odwiedzający witrynę przewijają stronę. Ułatwia im to skakanie między sekcjami w dowolnym momencie bez konieczności przewijania z powrotem na górę.

Najlepsze praktyki używania spisu treści w postach na blogu

Aby w pełni wykorzystać swoje TOC, pamiętaj o tych wskazówkach:

• Użyj właściwej struktury nagłówka: zacznij od H2S dla głównych sekcji, a następnie H3S i H4 w razie potrzeby. Unikaj pominięcia poziomów, takich jak przejście od H2 do H4, ponieważ może to mylić zarówno czytelników, jak i samej spisu treści (TOC).
• Utrzymuj swoje nagłówki jasne i zwięzłe: pamiętaj, czytelnicy używają ich do poruszania się w swoim poście. Trzymaj spis treści (TOC) krótki i wymyślny. Zwłaszcza dla użytkowników mobilnych umożliwienie załamania może utrzymać układ w czystości.
• Podgląd na wszystkich urządzeniach: Upewnij się, że spis treści (TOC) pojawia się poprawnie i działa poprawnie na komputerach stacjonarnych, tabletach i telefonach komórkowych.

Często zadawane pytania

Pytania. Czy mogę ukryć spis treści (TOC) na urządzeniach mobilnych?

Ans. Tak, możesz użyć ustawienia „zapadnięcie się”, aby TOC domyślnie zminimalizował na telefonie komórkowym lub tablecie.

Pytania. Czy to automatycznie aktualizuję, gdy dodam nowe sekcje do mojego postu?

Ans. Tak! Widżet dynamicznie pobiera znaczniki nagłówka z treści, więc aktualizuje się automatycznie.

Pytania. Czy mogę używać tego widżetu poza postami na blogu?

Ans. Absolutnie. Możesz dodać go do dowolnej strony układu elementora, niestandardowego typu postu, a nawet opisu produktu, o ile są znaczniki nagłówka do odebrania.

Podsumowanie!

Spis treści nie jest tylko funkcją projektowania; Jest to aktualizacja użyteczności, która może poprawić wrażenia czytelników, zwiększyć SEO i zwiększyć angażowanie treści.

Dzięki dodatkom Elementor i PowerPack dodanie i dostosowanie spisu treści (TOC) jest zaskakująco łatwe. Otrzymujesz pełną kontrolę nad tym, jak to wygląda i zachowuje się, wszystko bez pisania jednej linii kodu.

Możesz zrobić znacznie więcej z dodatkami PowerPack dla Elementor. Istnieje ponad 70 kreatywnych widżetów, których można użyć do dostosowania stron Elementor. Jeśli chcesz dowiedzieć się więcej o dodatkach PowerPack dla Elementor, sprawdź tutaj.