Jak utworzyć oś czasu w WordPress z Elementor

Tameny terminowe zapewniają wizualny sposób wyświetlania zdarzeń, kamieni milowych lub kroków w kolejności chronologicznej. Pomagają przedstawić informacje w przepływie liniowym, który ułatwia odwiedzającym i użytkownikom zrozumienie sekwencji zdarzeń lub procesów. Korzystając z nich, możesz zaprezentować podróż swojej firmy, mapę drogową lub osobistą historię z jasnością.

Dodanie harmonogramu do WordPress może poprawić wrażenia użytkownika, dzięki czemu treści bardziej angażują się i łatwiejsze. Właśnie dlatego korzystanie z harmonogramów stało się trendem na wielu stronach internetowych. Elementor jest tak przyjazną dla użytkownika wtyczkę, której można użyć do tworzenia i dodawania harmonogramów do swoich postów i stron WordPress o ekstremalnym poziomie dostosowywania.

W tym artykule pokażemy ci przewodnik krok po kroku, jak utworzyć oś czasu w WordPress z Elementor. Wcześniej omówimy kilka części teoretycznych dotyczących dzisiejszego tematu.

Rodzaje terminów i ich przypadki użycia

Istnieją dwa rodzaje osi czasu - poziome i pionowe. Każdy z nich ma określone przypadki użycia, które inaczej dodają wartość do witryny. Zbadajmy je i ich przypadki użycia w poniższej dyskusji.

1. Oś czasu pionowego

Pionowa oś czasu wyświetla zdarzenia i informacje od góry do dołu, zwykle wzdłuż lewej lub środka strony. Jest to format przyjazny przewijaniu, który płynnie działa zarówno na urządzeniach komputerowych, jak i mobilnych. Gdy użytkownicy przewijają stronę, śledzą kolejność chronologiczną w czystym i czytelnym układzie.

Użyj przypadków dla pionowych harmonogramów:

• Historia firmy lub podróż wzrostu
• CV lub najważniejsze cechy kariery
• Blog Post Series lub Progression
• Krok po kroku wyjaśnienia
• Kamienie milowe rozwoju produktu

2. Oś czasu

Pozioma harmonogram wyświetla zdarzenia od lewej do prawej, po formacie shrolling lub ślizgania się. Jest zwykle używany tam, gdzie przestrzeń jest szersza niż wysoka. Ten format jest najlepszy dla krótszych harmonogramów lub gdy chcesz pokazać tylko kilka ważnych wydarzeń w szerokim, łatwym do zobaczeniu układ.

Przypadki użycia horyzontalnych terminów:

• Mapy drogowe lub etapy planowania
• Harmonogramy wydarzeń
• Kampanie marketingowe lub uruchomienie produktów
• Prezentacje portfela
• Harmonogramy edukacyjne lub przegląd historycznych

Jak utworzyć oś czasu w WordPress z Elementor

Jak już powiedziano, Elementor jest wtyczką budowniczego stron przeciągania i upuszczania. Ale smutna wiadomość jest taka, że ​​nie zawiera żadnego widżetu do tworzenia harmonogramów. Jednak wtyczka ma wiele dodatków, za pomocą których można rozszerzyć funkcje wtyczki Elementor Core Elementor.

Happyaddons jest jednym z nich. Jest wyposażony w 130+ widżetów i 22+ funkcje, które mogą pokonać wiele niedociągnięć Elementora. Tak więc, instalując wtyczkę HappyAddons, możesz włączyć więcej funkcji projektowych na swojej stronie. W wielu przypadkach nawet nie będziesz potrzebować Elementor Pro, jeśli masz HappyDdons.

Przeglądajmy teraz, jak tworzyć harmonogramy w WordPress z Elementor i HappyAddons.

Jak utworzyć poziomą oś czasu w WordPress

Mam nadzieję, że już wiesz, jaka jest pozioma oś czasu. HappyAddons ma poziomy widżet osi czasu , który jest całkowicie bezpłatny w użyciu. Potrzebujesz więc następujących wtyczek, które można zainstalować i aktywować najpierw na swojej stronie internetowej.

• Elementor
• Happyaddons

Po zainstalowaniu i aktywowaniu wtyczek w witrynie zacznij wykonać kroki wyjaśnione w samouczku poniżej.

Krok 01: Utwórz sekcję na płótnie Elementor

Otwórz post lub stronę z Elementor. Utwórz sekcję z żądaną strukturą kolumn FlexBox, aby utworzyć oś czasu.

Krok 02: Dodaj widżet poziomej osi czasu do płótna

Znajdź widżet poziomego osi czasu na panelu elementorowym. Po jej znajdziesz, przeciągnij widżet na płótnie.

Zobaczysz, że poziom poziomej osi czasu został dodany do płótna z domyślnym układem.

Krok 03: Wybierz ustawienie wstępne dla widżetu

Preset to predefiniowany styl lub układ projektowy, który można natychmiast zastosować do widżetu w celu szybkiego dostosowywania. Jeśli nie chcesz projektować widżetu od zera, możesz wybrać ustawienie wstępne. Widżet poziomej osi czasu jest wyposażony w sześć ustawień wstępnych.

Wybierz ustawienie wstępne dla widżetu.

Krok 04: Dodaj zawartość do poziomego widżetu osi czasu

Rozwiń sekcję osi czasu . Tutaj otrzymasz opcje dodawania treści do widżetu. Domyślnie otrzymasz cztery zakładki. Kliknij dowolną kartę , aby ją rozwinąć. To otworzy wiele pól, w których możesz umieścić i dodać żądane informacje.

Po rozszerzeniu karty możesz dodać datę zdarzenia, ikonę, obraz, rozdzielczość obrazu, tytuł i opis do odpowiedniej karty.

Możesz zobaczyć, że dodaliśmy treść do odpowiedniej sekcji widżetu poziomego.

W ten sam sposób dodaj zawartość do wszystkich zakładek osi czasu. Widać, że zrobiliśmy to na obrazie dołączonym poniżej.

Aby dodać więcej kart do widżetu, kliknij przycisk + Dodaj element pod kartą osi czasu.

Krok 05: Skonfiguruj ustawienia dla poziomego widżetu osi czasu

Po zakończeniu części zawartości rozwinąć sekcję Ustawienia na karcie treści. Możesz skonfigurować Title HTML Tab, wyrównanie treści, ukryć strzałkę zawartości, włączyć Lightbox, Prędkość animacji, liczbę slajdów do wyświetlania, ikona i wiele innych.

Są one tak łatwe do skonfigurowania. Mamy nadzieję, że sam możesz je zrobić sam.

Krok 06: Stylizuj poziomy widżet osi czasu

Aby stylizować widżet, przejdź do zakładki Style na panelu elementor.

Najpierw poszerz sekcję osi czasu .

Otrzymasz opcje dostosowywania grubości linii, koloru linii, odstępy od daty, typografia daty, kolor, ikona, promień obramowania, typ obramowania, szerokość granicy, kolor tła itp.

Przeglądaj je i wykonaj wymagane niezbędne dostosowania.

Widać, że wprowadziliśmy pewne zmiany na poziomej osi czasu.

Następnie rozszerz sekcję strzał . Stąd możesz dostosować ikony strzałek, ich pozycje, rozmiary, szerokość obramowania, promień i wiele innych .

W ten sam sposób poszerz sekcję zawartości zakładki Style. Możesz dostosować promień graniczny, wyściółkę, przestrzeń między zawartością, rodzaj granicy, szerokość granicy, kolor, cień, typografię i więcej widżetów.

Wykonaj niezbędne zmiany.

Krok 07: Podgląd w widżet poziomej osi czasu

Przejdź do strony podglądu i sprawdź, czy wszystko działa dobrze, czy nie. Widać, że nasza horyzontalna oś czasu demo działa dobrze bez żadnych usterek.

Jak utworzyć pionową oś czasu w WordPress

Podczas gdy HappyAddons pozwala na utworzenie poziomej osi czasu za darmo, musisz uaktualnić do wersji wtyczki premium, aby utworzyć pionową oś czasu. Upewnij się, że na Twojej stronie są dostępne następujące wtyczki.

• Elementor
• Happyaddons
• Happyaddons Pro

Gdy będą dostępne na Twojej stronie, zacznij śledzić samouczek wyjaśniony poniżej.

Krok 01: Przeciągnij widżet osi czasu do płótna Elementor Elementor

Wpisz oś czasu w polu wyszukiwania. Wybierz widżet osi czasu innego niż pozioma oś czasu. Przeciągnij i upuść na płótnie Elementor.

Na płótnie zostanie utworzona pionowa harmonogram z domyślnym układem.

Krok 02: Wybierz ustawienie wstępne do pionowego widżetu osi czasu

Mam nadzieję, że już wiesz, czym jest wstępnie ustawiony, jak już o tym omówiliśmy powyżej. Wybierz ustawienie wstępne, jeśli nie chcesz projektować pionowej osi czasu od zera.

Krok 03: Dodaj zawartość do pionowej osi czasu

Rozwiń sekcję osi czasu . Domyślnie zobaczysz dwie zakładki. Rozwiń dowolną kartę, klikając ją, jak pokazaliśmy powyżej.

Mam nadzieję, że nie musisz tu dużo rozmawiać. Ponieważ możesz dodać prawie ten sam typ zawartości do harmonogramu wiązki, jak można to zrobić w przypadku poziomej harmonogramu.

Możesz dodać ikonę, zmienić typ ikonę, zdefiniować czas, ustawić tytuł, dodać obraz itp. Dla każdej sekcji osi czasu. Rób samodzielne rzeczy samodzielnie.

Wypełnij dodawanie treści do osi czasu. Możesz nawet dodać więcej elementów do osi czasu, klikając element + Dodaj, jak pokazano powyżej.

Krok 04: Skonfiguruj ustawienia dla pionowego widżetu osi czasu

Rozwiń sekcję Ustawienia . Możesz skonfigurować, czy pokazać datę, godzinę, strzałkę treści i drzewo przewijające . Możesz także zmienić znacznik tytułu, wyrównanie ikony, wyrównanie drzewa i kolor tła .

Wykonaj samodzielne ustawienia. Ale dla nas domyślne wyrównanie wygląda dobrze. Trzymamy się tego w samouczku.

Krok 05: Stylizuj pionowy widżet osi czasu

Przyjdź na kartę Style na panelu elementor. Z tej karty możesz dostosować wszystkie rodzaje treści i elementów wizualnych na widżecie.

Najpierw poszerz pudełko treści . Możesz dostosować typografię, kolor, kolor strzałki, typ tła, typ graniczny i szerokość granicy stąd. Zrób to.

W ten sam sposób poszerz sekcję pudełka ikony . Możesz zmienić szerokość, wysokość, przestrzeń pudełkową i inne opcje związane z ikonami widżetu stąd. Jeśli jesteś zadowolony z domyślnej stylizacji, niczego nie dotykaj.

Stylizuj tytuł widżetu, jeśli wydaje się to konieczne. Widać, że zmieniliśmy naszą typografię.

W ten sam sposób dostosuj wygląd czasu i daty . Zmieniliśmy jego kolor, wagę i typografię.

Na koniec rozwinąć sekcję przycisku . Możesz stylizować jego kolor tła, kopiować typografię i inne .

Krok 06: Podgląd widżet pionowego osi czasu

Przyjdź na stronę podglądu i sprawdź, czy oś czasu w wiązce działa dobrze, czy nie. Zrób to, przewijając widżet. Mamy nadzieję, że będzie dobrze po twoim końcu jako nasz.

Dlatego możesz tworzyć różne typy sekcji osi czasu na swojej stronie, aby cudownie prezentować różne treści.

Rzeczy, które możesz zrobić więcej z HappyAddons

Happyaddons jest szczerze kompleksową wtyczką. Z pewnością zakochasz się w tej wtyczce zaraz po jej użyciu. Spójrz na następujące rzeczy, które możesz zrobić z wtyczką.

A. Użyj darmowego konstruktora motywów

Elementor ma również konstruktora motywów. Ale jest to zarezerwowane tylko dla użytkowników premium. Ale w przypadku Happyaddons jest zupełnie bezpłatny. Korzystając z konstruktora motywów HappyAddons, możesz tworzyć nagłówki, stopki, szablony postów na blogu i strony archiwum. Sprawdź, jak utworzyć szablon postu na blogu z HappyAddons za darmo.

B. Przyjazny dla WooCommerce

HappyAddons ma dziewięć potężnych widżetów przyjaznych WooCommerce, aby ulepszyć witrynę e-commerce. Te widżety to siatka produktów, karuzel produktów, siatka kategorii produktów, karuzel kategorii produktów, pojedynczy produkt, mini wózek, koszyk, kasę i pasek wysyłkowy.

C. Kopia-Domina-Paste-Paste

Dzięki tej funkcji możesz bezpośrednio kopiować te same widżety, sekcje i strony z jednej strony internetowej do drugiej. Może to zaoszczędzić cenny czas, ponieważ nie zawsze musisz zaczynać od zera. Poniższy film wyjaśnia funkcję wtyczki kopiowania między domenami wtyczki.

D. Projektuj kreatywne treści

Dzięki widżetom, takim jak najemnik obrazu, animowany link, czynnik zabawy, grupa stosu obrazu, stos zdjęć, kreatywny przycisk, przewijanie tekstu i ikona Lord, możesz tworzyć angażujące kreatywne treści dla użytkowników haczyków.

mi. Pokaż informacje statystyczne

W przeciwieństwie do wielu innych dodatków do elementów, ta wtyczka oferuje kilka widżetów wykresów, za pomocą których możesz zaprezentować informacje statystyczne i tworzyć posty i strony infografiki. Dowiedz się, jak utworzyć stronę infograficzną z Elementor.

Oprócz tych wszystkich, istnieje wiele innych rzeczy, które możesz zrobić z wtyczką HappyAddons.

Ostateczne myśli!

Tworzenie terminów nie jest obowiązkową rzeczą dla wszystkich stron internetowych. Mogą jednak stać się konieczne, ponieważ mogą być idealną opcją zaprezentowania określonych informacji i treści. Tak więc, ilekroć poczujesz potrzebę utworzenia osi czasu, mamy nadzieję, że ten post o samouczku dojdzie do twojego użycia.

Jeśli uwielbiałeś ten post, prosimy o poinformowanie nas za pośrednictwem pola komentarza poniżej. Poza tym, jeśli masz jakieś zapytania dotyczące wtyczki HappyAddons, możesz zostawić wiadomość w polu czatu. Nasz agent wsparcia na żywo przyjdzie na ciebie tak szybko, jak to możliwe.

Dzięki za bycie z nami do końca. Życzymy szczęśliwego dnia.