Jak dodać piękne osie czasu wydarzeń w WordPress

Osie czasu wydarzeń są fantastyczne do wizualnego przedstawiania twoich wydarzeń, dzięki czemu są bardziej angażujące i łatwiejsze do śledzenia przez odbiorców.

Poza wydarzeniami, osie czasu mogą być również używane na twojej stronie „Zamierzasz”, aby podkreślić historię firmy i kamienie milowe.

Jednak bez odpowiednich narzędzi planowanie i prezentowanie osi czasu wydarzeń na twojej witrynie WordPress może być trudne.

W tym artykule pokażemy ci, jak dodać 111111 pięknych osi czasu wydarzeń do twojej witryny WordPress.

Dlaczego warto dodać piękną oś czasu wydarzenia w WordPress?

Osie czasu wydarzeń podkreślają ważne kamienie milowe dzięki przejrzystej, chronologicznej strukturze. Użycie jednej z nich może pomóc wzmocnić aspekt opowiadania historii w twojej treści.

Poza kamieniami milowymi, osie czasu pozwalają na wizualne przedstawienie postępów, faz i wzajemnych powiązań między wydarzeniami. Może to sprawić, że twoja treść będzie bardziej angażująca.

Jeśli chodzi o przypadki użycia, wielu właścicieli witryn internetowych WordPress używa osi czasu do wyświetlania powiązanych wydarzeń w zorganizowany i atrakcyjny wizualnie sposób. Firmy i organizacje również często korzystają z osi czasu, aby pokazać swoją historię.

Jeśli masz witrynę internetową z portfolio, taką jak portfolio fotograficzne online, możesz pokazać swoje zdjęcia na ładnej pionowej osi czasu, która pokazuje twoją podróż dookoła świata.

Może to być bardziej angażujące niż napisanie twojej historii i dodanie jej do witryny jako strony zwykłego tekstu.

Jak dodać oś czasu wydarzenia w WordPress

Najprostszym sposobem na dodanie osi czasu wydarzenia w WordPress jest użycie wtyczki Cool Timeline. Ta darmowa, przyjazna dla użytkownika wtyczka umożliwia szybkie i łatwe tworzenie oszałamiających osi czasu.

Po włączaniu, zobaczysz nowy obszar Timeline Addons w twoim kokpicie WordPress.

Za pomocą tej wtyczki można tworzyć osie czasu wydarzeń na 2 sposoby.

Pierwszym z nich jest kliknięcie przycisku „Utwórz nową relację” na kokpicie Timeline Addons.

Spowoduje to otwarcie edytora, w którym można wpisać tytuł i opis, ustawić obrazek wyróżniający i dodać inne ważne informacje.

Po zakończeniu dodawania wydarzeń, Cool Timeline wyświetli wszystkie te relacje z wydarzeń na tej samej osi czasu. Oś czasu można następnie dodać do dowolnej strony lub wpisu.

Ta metoda jest idealna do wielokrotnego wyświetlania tej samej osi czasu w twojej witrynie internetowej. Pozwala ona jednak na utworzenie tylko jednej osi czasu.

Inną opcją jest użycie Cool Timeline Block do zbudowania wizualnej osi czasu wewnątrz edytora bloków WordPress.

Dodanie wielu Cool Timeline Blocks do twojej witryny internetowej pozwala na wyświetlanie różnych osi czasu w różnych częściach witryny.

Metoda ta nie pozwala jednak na ponowne wykorzystanie tej samej osi czasu w twojej witrynie internetowej, chyba że sam zapiszesz ją jako wzorzec bloku.

W tym przewodniku omówimy obie metody. Bez względu na to, w jaki sposób zbudujesz swoją oś czasu, będziesz musiał zainstalować i włączyć wtyczkę Cool Timeline. Jeśli potrzebujesz więcej szczegółów, zapoznaj się z naszym przewodnikiem na temat instalacji wtyczki WordPress.

Gdy to zrobisz, będziesz gotowy do utworzenia twojej osi czasu za pomocą menu Timeline Addons lub edytora bloków. Jeśli wolisz od razu przejść do konkretnej metody, możesz skorzystać z poniższych odnośników:

Gotowy? Zaczynajmy.

Metoda 1. Jak utworzyć oś czasu wydarzenia wielokrotnego użytku przy użyciu menu dodatków osi czasu

Aby utworzyć twoje pierwsze wydarzenie, możesz przejść do Timeline Addons ” Add New Story z kokpitu WordPress.

Następnie możesz nadać wydarzeniu tytuł, wpisując go w polu „Dodaj tytuł”.

W głównym edytorze możesz przejść dalej i wpisać cały rodzaj tekstu, który chcesz wyświetlić na swojej osi czasu. Zazwyczaj będzie to opis wydarzenia.

Gdy już to zrobisz, czas kliknąć odnośnik „Ustaw obrazek wyróżniający”.

Możesz teraz wybrać obrazek, który będzie reprezentował wydarzenie na twojej osi czasu. Możesz kliknąć, aby wybrać obrazek z biblioteki multimediów WordPress lub przesłać nowy plik obrazu z twojego komputera.

Następnie przewiń w dół do sekcji „Ustawienia relacji na osi czasu”. Tutaj możesz kliknąć pole „Data / rok relacji” i użyć wyskakującego okienka kalendarza, aby wybrać godzinę i datę wydarzenia.

Można również wybrać „Pełny” lub „Mały” obrazek dla wydarzenia.

Na poniższym obrazku można zobaczyć przykład „Pełnego” obrazka.

Większe obrazki przyciągną uwagę odwiedzającego do najważniejszych wydarzeń na osi czasu. Pełne obrazki zajmują jednak więcej miejsca.

Poniższy obrazek przedstawia to samo zdarzenie, ale tym razem z „małym” obrazkiem.

Jeśli chcesz dodać wiele różnych wydarzeń do twojej osi czasu, możesz użyć ustawienia „Mały”.

Dzięki temu Twoja oś czasu nie będzie wyglądać na zagraconą.

Po wprowadzeniu tych zmian należy przewinąć stronę do góry i kliknąć przycisk „Opublikuj”.

I to wszystko! Możesz teraz powtórzyć te kroki, aby utworzyć więcej wydarzeń.

Chcesz zobaczyć wszystkie wydarzenia, które utworzyłeś do tej pory? W takim razie po prostu przejdź do Timeline Addons ” Cool Timeline Stories.

Po utworzeniu wszystkich wydarzeń, następnym krokiem jest dostosowanie wyglądu osi czasu na twojej witrynie internetowej.

Aby to zrobić, możesz przejść do Dodatki osi czasu ” Ustawienia osi czasu ” Ustawienia ogólne.

W sekcji „Tytuł osi czasu” możesz wpisać rodzaj tytułu, który będzie wyświetlany nad twoją osią czasu.

Cool Timeline może również wyświetlać obrazek nad osią czasu, taki jak logo twojej firmy. Może to pomóc wzmocnić twój branding i poinformować odwiedzających, co pokazuje oś czasu.

Aby dodać ten opcjonalny obrazek, należy kliknąć przycisk „Prześlij”.

Możesz teraz wybrać obrazek z twojej biblioteki multimediów WordPress lub przesłać nowy plik z komputera.

Jeśli dodasz dużo tekstu do osi czasu, może ona wyglądać na zagraconą i nieatrakcyjną.

Mając to na uwadze, warto ustawić maksymalną liczbę słów, które będą wyświetlane na osi czasu. Aby ustawić maksymalny limit słów, wystarczy wpisać rodzaj liczby w polu „Długość treści”.

Jeśli ustawisz limit, dobrym pomysłem jest dodanie odnośników „Dowiedz się więcej” do twojej osi czasu. Cool Timeline doda ten odnośnik do każdego opisu, który przekracza twój limit słów.

Aby dodać ten odnośnik, znajdź sekcję „Wyświetlić Dowiedz się więcej?” i kliknij przycisk „Tak”.

Możesz teraz zdecydować, czy kliknięcie odnośnika „Dowiedz się więcej” spowoduje wyświetlenie reszty twojego tekstu w tej samej karcie, czy w nowej karcie przeglądarki. Aby dokonać tego wyboru, wystarczy kliknąć przycisk opcji „Ta sama karta” lub „Nowa karta”.

Domyślnie oś czasu pokazuje rok wystąpienia każdego wydarzenia. Jednak nie zawsze może być konieczne wyświetlanie tej informacji. Na przykład, jeśli wszystkie wydarzenia miały miejsce w tym samym roku.

Aby ukryć etykietę roku, wystarczy kliknąć na pokaz slajdów „Etykieta roku”, aby zmienić ją z „Pokaż” na „Ukryj”.

Domyślnie pierwsze wydarzenie na twojej osi czasu pojawi się po prawej stronie pionowej linii osi czasu.

Chcesz zamiast tego wyświetlić to wydarzenie po lewej stronie osi czasu? Następnie kliknij przycisk „Po lewej” obok opcji „Pionowa oś czasu, od której zaczynają się relacje”.

Kiedy będziesz zadowolony z twoich zmian, kliknij przycisk „Zapisz”, aby zapisać zmiany.

Teraz możesz przejść do karty „Ustawienia stylu”.

Domyślnie oś czasu nie ma tła.

Jeśli chcesz, możesz dodać kolorowe tło do swojej osi czasu, klikając na pokaz slajdów „Tło osi czasu”, aby zmienić go z „Nie” na „Tak”.

Następnie kliknij przycisk obok opcji „Kolor tła relacji”.

Teraz powinieneś być w stanie wybrać kolor tła za pomocą ustawień próbnika kolorów.

Ten ekran ma również podobne ustawienia kolorów dla wszystkich różnych części twojej osi czasu, w tym linii pionowej i tytułów wydarzeń. Aby zmienić dowolny z tych domyślnych kolorów, wystarczy kliknąć przycisk sekcji, a następnie użyć wyświetlonego próbnika kolorów.

Gdy będziesz zadowolony z wprowadzonych zmian, nie zapomnij kliknąć przycisku „Zapisz”.

Następnie warto przejść do karty „Ustawienia typografii”. Tutaj możesz zmienić wielkość i krój pisma używanego dla różnych treści na twojej osi czasu, takich jak tytuł osi czasu i tytuł relacji.

Jeśli zmienisz domyślne ustawienia typografii, nie zapomnij zapisać swoich zmian, klikając przycisk „Zapisz”.

Po zakończeniu konfiguratora osi czasu możesz dodać ją do swojej witryny internetowej. Po prostu otwórz stronę lub wpis, w którym chcesz ją wyświetlić, a następnie kliknij przycisk „+”.

Teraz będziesz chciał wpisać „Cool Timeline” w pasku wyszukiwania. Ta wtyczka ma kilka różnych bloków, więc upewnij się, że kliknąłeś „Cool Timeline Shortcode Block”.

Teraz możesz zaktualizować lub opublikować twoją stronę w normalny sposób.

Teraz, jeśli przejdziesz na swoją witrynę internetową, zobaczysz oś czasu na żywo.

Metoda 2. Jak utworzyć wiele osi czasu wydarzeń w WordPress przy użyciu bloku osi czasu

Możesz również zbudować piękną oś czasu wydarzenia w WordPressie za pomocą edytora bloków i „Cool Timeline Block”.

Ten blok zawiera wiele treści zastępczych. Aby zbudować swoją oś czasu, wystarczy zastąpić każdy element zastępczy własnym tekstem i obrazkami. Pozwala to na stworzenie twojej osi czasu w bardziej wizualny sposób.

Aby rozpocząć, po prostu otwórz stronę lub wpis, do którego chcesz dodać oś czasu.

Następnie możesz kliknąć ikonkę „+” i wpisać „Cool Timeline Block”. Gdy pojawi się ten blok, kliknij, aby dodać go do strony lub wpisu.

Blok Cool Timeline zawiera 4 zdarzenia zastępcze. Można rozpocząć ich edycję, klikając pierwsze zdarzenie na osi czasu.

W menu po prawej stronie zastąp symbol zastępczy „Nagłówek relacji” nagłówkiem, którego chcesz użyć dla tego wydarzenia.

Następnie możesz dodać opis do pola „Opis relacji”.

Następnie należy znaleźć pole „Primary Label (Date/Steps)”. W tym miejscu należy wpisać rodzaj daty wystąpienia zdarzenia.

Domyślnie blok Cool Timeline pokazuje pierwsze zdarzenie po prawej stronie osi czasu.

Jeśli wolisz wyświetlać wydarzenie po lewej stronie pionowej linii, możesz kliknąć przycisk opcji „Left”.

Teraz blok Cool Timeline ma obrazek zastępczy dla każdego wydarzenia. Aby zastąpić ten symbol zastępczy twoim własnym obrazkiem, po prostu kliknij przycisk „Usuń”.

Gdy już to zrobisz, kliknij przycisk „Prześlij/Wybierz obrazek”.

Następnie możesz wybrać obrazek z biblioteki multimediów WordPress lub przesłać nowy plik z twojego komputera.

Blok Cool Timeline pokaże każdy obrazek w pełnym rozmiarze. Aby zamiast tego wyświetlić mniejszy obrazek, otwórz menu rozwijane „Rozmiar obrazka” i wybierz opcję „Średni” lub „Miniaturka”.

Po kliknięciu jednego z różnych rozmiarów obrazka, blok zostanie zaktualizowany, aby pokazać nowy obrazek. Pozwala to na wypróbowanie różnych rozmiarów, aby zobaczyć, co wygląda najlepiej na twojej witrynie internetowej.

Domyślnie oś czasu oznacza każde zdarzenie na linii pionowej kropką. Możesz zastąpić tę zwykłą kropkę własną ikonką.

Możesz na przykład użyć różnych ikonek dla różnego rodzaju wydarzeń. Następnie możesz zapoznać się z różnymi własnymi ikonami, których możesz użyć na swojej osi czasu, klikając przycisk opcji „Niestandardowe (krój pisma Awesome)”.

Gdy to zrobisz, pojawi się lista rozwijana z ikonką strzałki. Należy ją rozwinąć, aby przewinąć wszystkie ikonki.

Kiedy znajdziesz idealną ikonkę do wykorzystania w twoim wydarzeniu, możesz ją kliknąć.

Możesz teraz dostosować pozostałe zdarzenia zastępcze, postępując zgodnie z tym samym procesem opisanym powyżej.

Jeśli chcesz dodać więcej wydarzeń do osi czasu, po prostu kliknij ikonkę „Dodaj relację”. Spowoduje to utworzenie nowego wydarzenia zastępczego, gotowego do dostosowania.

Gdy jesteś zadowolony z wyglądu osi czasu, możesz zaktualizować lub opublikować stronę w normalny sposób. Gdy to zrobisz, twoja oś czasu będzie dostępna na żywo w witrynie internetowej WordPress.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać piękną oś czasu wydarzenia do twojej witryny internetowej WordPress. Możesz również zapoznać się z naszymi przewodnikami na temat tworzenia prostego kalendarza wydarzeń i dodawania widżetu odliczającego czas w WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.