Utwórz niesamowitą oś czasu treści w WordPress za pomocą Elementora

Oś czasu treści to narzędzie do łamania zabezpieczeń umożliwiające wyświetlanie informacji sekwencyjnych o dowolnym wydarzeniu, ale utworzenie takiej osi czasu w witrynie WordPress wymaga użycia odpowiedniego narzędzia z pełnym poleceniem.

Jeśli wybierzesz dowolne narzędzie WordPress do zbudowania osi czasu treści, istnieje ryzyko, że narzędzie będzie poniżej średniej i będzie wyglądać tandetnie.

Przeprowadziłem dogłębną analizę, aby znaleźć optymalny sposób tworzenia osi czasu treści w WordPress. Zgadnij co? W tym artykule przedstawiłem najprostszą metodę tworzenia osi czasu treści w WordPress za pomocą Elementora.

Zrozumienie osi czasu treści

Oś czasu treści przedstawia informacje w formie chronologicznej. Jest to prosta, ale skuteczna metoda udostępniania informacji w efektowny wizualnie sposób.

Podstawowym celem osi czasu treści jest pokazanie działania zdarzenia sekwencyjnie w określonym przedziale czasu. Pomaga czytelnikom uzyskać więcej informacji w mgnieniu oka.

Ogólnie rzecz biorąc, oś czasu treści zawiera długi pasek z punktami i pewnymi informacjami wokół niego. Pasek ten może być zarówno pionowy, jak i poziomy. Niezależnie od kierunku, po prostu upewnij się, że pasek osi czasu zawiera wystarczającą ilość zasobów. Możesz ulepszyć pasek za pomocą powiązanych obrazów, ikon, liczb, klikalnych tekstów lub innych interaktywnych elementów.

Gdzie należy używać osi czasu treści?

Oś czasu treści to narzędzie wielofunkcyjne. Możesz użyć tego narzędzia niemal wszędzie, aby sprawnie wykonać zadanie. Przyjrzyjmy się głównym sektorom, w których ta oś czasu sprawdza się najlepiej.

Jak utworzyć oś czasu treści

Stworzenie odpowiedniego harmonogramu wymaga czasu i poświęcenia. Oto prosty proces tworzenia osi czasu.

Krok #1: Przeanalizuj swój temat

Na początek wybierz temat i zbierz wymagane informacje na jego temat. Musisz dokładnie wybrać informacje, które chcesz wyświetlić na osi czasu.

Krok #2: Nazwij oś czasu

Zachowaj ostrożność przy wyborze nazwy osi czasu. „Nazwa osi czasu” musi odzwierciedlać cel osi czasu.

Zawsze umieszczaj oś czasu na górze osi czasu, aby nazwa była widoczna dla wszystkich.

Krok #3: Narysuj przybliżoną oś czasu

W tym momencie narysuj na kartce papieru przybliżoną strukturę osi czasu. Po prostu narysuj poziomą lub pionową linię wraz z kilkoma punktami. Każdy punkt wskazuje datę lub kamień milowy Twojego projektu.

Teraz nadszedł czas, aby dodać kilka tekstów lub innych powiązanych informacji na temat Twojego projektu. I to wszystko!

Krok #4: Sfinalizuj temat

Mam nadzieję, że przybliżony plan harmonogramu jest już w twoich rękach. Teraz zrób sobie przerwę i jeszcze raz przeprowadź szczegółowe badania na swój temat. W ten sposób możesz znaleźć głupie problemy i je naprawić.

Krok #5: Dostosuj oś czasu

Dostosowanie osi czasu sprawia, że jest ona łatwa do zrozumienia i wizualnie oszałamiająca. W tym celu możesz dodać ikony lub pliki multimedialne.

Jak dodać oś czasu treści Elementora do swojej witryny WordPress?

Teraz, gdy masz już jasną wiedzę na temat osi czasu treści i jej zastosowania wraz z procesem tworzenia osi czasu.  

Teraz nadszedł czas, aby zintegrować oś czasu treści z witryną WordPress. Jak więc możesz to zrobić?

Dobra!

Istnieją głównie dwie różne metody tworzenia osi czasu treści w WordPress. Przewiń w dół, aby dowiedzieć się więcej o procesach.

Proces ręczny (trudny sposób)

Proces ręczny to tradycyjny sposób tworzenia osi czasu treści w witrynie. Aby utworzyć oś czasu treści, będziesz potrzebować obrazu lub pliku GIF. Jak więc możesz to zrobić?

Prosty! Po prostu postępuj zgodnie z instrukcjami.

• Po pierwsze, narysuj zawartość cyfrowo. Do narysowania osi czasu możesz użyć oprogramowania do edycji zdjęć, takiego jak Photoshop, Gimp lub Paint. Po zakończeniu projektu zapisz obraz lub plik gif.
• Po drugie, utwórz stronę lub post na swojej stronie i umieść na niej plik obrazu/gifa. Następnie dodaj wymaganą treść i opublikuj. 

Bum! To wszystko, gotowe!

Wady tego procesu:

Proces może wydawać się dość prosty. Ale nie relaksuj się jeszcze! W prawdziwym życiu napotkasz wiele problemów związanych z tym procesem. Poniżej wymieniono istotne wady.

• Nie można zaktualizować opublikowanej osi czasu za pośrednictwem panelu administratora witryny.
• Nie można utworzyć interaktywnej osi czasu.
• Dostosowywanie ikon i obrazów jest uciążliwym procesem.

Proces automatyczny (najprostszy sposób – ElementsKit pro)

Aby w pełni wykorzystać oś czasu treści, możesz użyć Zestaw elementów. Jest to dodatek premium do Elementora, który może być przydatny do tworzenia osi czasu treści w witrynie WordPress.

W tej sekcji przedstawię Ci proces tworzenia osi czasu treści Elementora w ciągu kilku minut. Zacznijmy.

Uzyskaj dostęp do panelu administracyjnego witryny

Podobnie jak w przypadku metody ręcznej, nie trzeba rysować osi czasu w oprogramowaniu do edycji zdjęć. Wszystko możesz zrobić z poziomu panelu administracyjnego swojej witryny.

Wystarczy zalogować się do panelu administracyjnego. Ogólnie adres URL pulpitu nawigacyjnego wygląda następująco Twojadomena.com/wp-admin

Zainstaluj Elementora i ElementsKit

Po zalogowaniu się do panelu administracyjnego czas zainstalować Elementor i Dodatek do Elementora Zestaw elementów. Będziesz potrzebować obu tych elementów, aby automatycznie utworzyć oś czasu.

Otwórz nową lub istniejącą stronę internetową

Po aktywowaniu Elementora i ElementsKit nadszedł czas, aby użyć ich w poście lub stronie. Utwórz więc nowy post, klikając Posty > Dodaj nowe.

Kliknij na "Dodaj tytuł” zablokuj i dodaj swój tytuł. Do posta możesz także dodać zwykły tekst i obrazy.

Uruchom Elementora

Teraz kliknij „Edytuj za pomocą Elementora” i otworzy Twój nowy post w edytorze Elementora. Edytor Elementor służy do bardziej profesjonalnej edycji postu.

Uruchom oś czasu ElementsKit

Przewiń w dół panel „Elementor” i poszukaj „Oś czasu” dodatek na liście. W przeciwnym razie możesz po prostu wyszukać „Oś czasu” w panelu Elementora.

Uruchamianie osi czasu ElementsKit

Teraz przeciągnij i upuść widżet Oś czasu do swojego posta i gotowe! W swoim poście zauważysz przykładową oś czasu.

Domyślnie będą trzy punkty na osi czasu. Możesz usunąć to wszystko i zacząć tworzyć własną oś czasu. W przeciwnym razie możesz także edytować zawartość istniejących punktów i w razie potrzeby dodać więcej punktów.

Następnym krokiem jest modyfikacja tekstu, ikony lub stylu osi czasu treści.

Dostosowywanie zawartości osi czasu

Karta „Treść” umożliwia dostosowanie stylu osi czasu, stylu treści, zawartości osi czasu itp. Na karcie treści można modyfikować wiele opcji. Przyjrzyjmy się tym kluczowym opcjom.

1. Styl osi czasu

To jest pierwsza sekcja zakładki Treść. Pozwala wybrać pionowy styl osi czasu Elementora lub poziomy styl osi czasu Elementora. Domyślnie wybrany zostanie styl pionowy. Możesz zmienić styl, kiedy tylko masz na to ochotę!

2. Styl treści

Karta stylu treści pozwala wybrać strony. Możesz wyświetlić całą zawartość po tej samej stronie lub po obu stronach.

Perspektywa osi czasu treści jest już gotowa. W tej sekcji musisz zaktualizować teksty, obrazy lub ikony osi czasu.

3. Treść osi czasu

Zawartość osi czasu pozwala modyfikować wiele opcji, takich jak tytuł, opis, link, data, adres, ikona itp. Możesz włączyć tę funkcję, po prostu klikając nazwę tytułu.

W ustawieniach domyślnych będą trzy tytuły. Możesz dodać lub usunąć te tytuły. Po kliknięciu tytułu widoczne będą dla Ciebie opcje edycji treści.

W sekcji treści osi czasu możesz modyfikować następujące opcje:

• Tytuł
• Podtytuł
• Link tytułowy
• Opis
• Ikona tytułu
• Data
• Adres
• Kolor napisów
• Tło pola zawartości
• Kolor tekstu ikony i
• Tło ikony
  

4. Styl elementu powtarzalnego

W tej sekcji możesz modyfikować kolor treści oraz tło tekstów i ikon. Co najważniejsze, w tej sekcji można również zmienić styl najechania myszką.

Brawa dla twórców!

5. Ustawienia animacji

W opcji ustawień możesz zmienić ikonę i animację zarówno daty, jak i adresu. Ten widżet osi czasu Elementora umożliwia wybór wielu stylów powiększania, takich jak zanikanie, powiększanie, odbijanie, przesuwanie, obracanie, drżenie, kołysanie, galaretka, zwijanie itp.

Chodzi o dostosowanie zawartości osi czasu. Nadszedł czas, aby dodać trochę stylu do swoich treści. Przejdź do następnego etapu, aby uzyskać szczegółowe informacje na temat dodawania stylu.

Dostosuj styl osi czasu

Na karcie Styl możesz dostosować styl zawartości, styl linii i styl kontenera. Przewiń w dół, aby uzyskać szczegółowy przegląd tych funkcji.

1. Zakładka Treść:

Karta treści oferuje wiele możliwości dostosowywania treści. Na przykład możesz kontrolować wyrównanie, dopełnienie, dopełnienie wewnętrzne, promień obramowania, kolor tekstu, podtytuł, styl osi czasu itp.

Możesz dostosować wszystkie te ustawienia dla każdej platformy, w tym wersji na komputery stacjonarne, tablety i urządzenia mobilne. Sprawdź poniższe obrazy, aby dobrze zrozumieć funkcje znajdujące się pod zakładką treści.

Nie tylko to! Możesz także modyfikować wiele innych opcji, takich jak kolor tekstu, kolor tekstu zakotwiczenia, kolor napisów, odstęp na marginesie, typografia, okrągła ikona itp. W tej sekcji można modyfikować zarówno ikonę, jak i kolor tła tej okrągłej ikony.

Do tej pory poprawiliśmy wiele stylów w tekście Twojej witryny. Jednak widget osi czasu ElementsKit Elementor potrafi jeszcze więcej!

Możesz także płynnie modyfikować kolor paska osi czasu, rozmiar ikony, margines, typografię, adresy itp.

2. Zakładka Linia

Karta Linia umożliwia dodanie czterech stylów dostosowywania do osi czasu treści. To są -

• ● Kolor linii –zmienić kolor poziomego lub pionowego paska osi czasu Elementora
• ● Kolor szpilki – zmień kolor swojej pinezki
• ● Aktywny kolor pinu – zmień kolor aktywowanego pinu
• ● Precyzyjny kolor – zmienia dokładny kolor

3. Zakładka Kontener

Zakładka kontenera umożliwia zmianę odstępów między treścią. Obejmuje to zmianę adresu lub odstępów między datami i odstępami u dołu pozycji.

Zaawansowane dostosowywanie

Możesz dokończyć dostosowywanie swojej witryny internetowej wyłącznie za pomocą zakładek „treść” i „styl”. Jeśli jednak chcesz dokonać bardziej zaawansowanego dostosowania, musisz skorzystać z karty Zaawansowane.

Co więc otrzymasz w naszej zakładce Zaawansowane?

Na karcie Zaawansowane znajdziesz warunek ElementsKit, efekty, element lepki, efekty ruchu, responsywność, typ tła, dopełnienie i funkcję dostosowywania marginesów.

Pozwólcie, że przedstawię wam wszystkie te funkcje, jedna po drugiej.

1. Warunki zestawu ElementsKit

Włączając warunek ElementsKit, możesz publikować posty warunkowe na swojej stronie internetowej. Nawiasem mówiąc, możesz wybrać wyświetlanie określonej części swojej strony internetowej za pomocą zakładek stylu WordPress Elementor w zależności od warunku. Możesz zastosować różne warunki w zależności od statusu logowania, przeglądarki, dnia, godziny itp.

2. Efekty ElementsKit

Funkcja efektów ElementsKit umożliwia dodanie do tekstu interaktywnych efektów. Umożliwia dodawanie interaktywnych osi czasu w WordPress. Możesz dodać cztery różne style efektów, którymi są CSS, przechylenie, przewijanie i ruch myszą.

● Efekty CSS

Funkcja CSS umożliwia dodanie animacji CSS do tekstów internetowych. Możesz zmienić styl wyglądu animacji, szybkość animacji, kierunek i liczbę iteracji.

Włączając funkcję CSS Transform, możesz zmienić cztery ustawienia transformacji, takie jak opcje Translate, Rotate, Scale i Skew. Jeśli coś pójdzie nie tak, możesz kliknąć przycisk „Powrót do ustawień domyślnych”, a wszystko powróci do poprzedniej fazy.

• ● Efekty pochylenia

Włączając efekty pochylenia, możesz zmieniać funkcje MaxTilt, skale obrazu, funkcje osi itp.

• ● Efekty przewijania

Efekty przewijania pozwalają webmasterowi modyfikować styl paralaksy, przejścia, gładkość, ustawienia przesunięcia itp.

• ● Efekt ruchu myszy

Efekty ruchu myszy umożliwiają kontrolowanie prędkości ruchu oraz włączanie/wyłączanie animacji w trybie edytora.

3. ● ElementsKit jest przyklejony

Tutaj odbywa się kontrola lepkiego ruchu elementu Twojej witryny. Możesz wybrać lokalizację swojej przyklejonej zawartości. Możesz wybierać spośród opcji Góra, Dół, Kolumna i Przewijanie w górę. Możesz dostosować przesunięcie elementu przyklejonego, kolor tła i urządzenie przyklejone w układzie.

4. Efekty ruchu:

Funkcja efektu ruchu umożliwia wybór stylu wejścia, czasu trwania i opóźnienia animacji.

ElementsKit oferuje wiele stylów animacji wejścia, takich jak powiększanie, zanikanie, odbijanie, obracanie, przesuwanie, drżenie, galaretka, kołysanie, wtaczanie itp.

5. Efekty tła

Opcja tła na karcie Zaawansowane umożliwia transformację obrazu tła zarówno w stylu normalnym, jak i po najechaniu.

W sekcji tła „Normalne” możesz wybrać opcję zmiany funkcji klasycznej lub gradientowej. Klasyczna funkcja obrazu umożliwia zmianę stylu obrazu i koloru wraz z szybkością przejścia.

Z drugiej strony sekcja gradientu umożliwia zmianę typu tła, koloru, lokalizacji, kąta oraz typu tła liniowego lub promieniowego.

Wszystkie te czynności możesz wykonać również w opcjach najechania kursorem.

6. Granica

W sekcji treści zrobiliśmy już wiele. Dostosujmy tekst i obramowania ramek.

Możesz wybrać różne typy obramowań, takie jak pełne, podwójne, kropkowane, przerywane i wpustowe. Po wybraniu rodzaju obramowania czas wybrać promień. The zaktualizowany zestaw ElementsKit pozwala także na zmianę stylu promienia i cienia pudełkowego!

Wszystkie te funkcje znajdziesz także w sekcji Najechanie. Przy okazji, możesz także zmienić „Czas trwania przejścia” na karcie po najechaniu myszką.

7. Pozycjonowanie

Przede wszystkim możesz modyfikować „szerokość” i „położenie” swojej treści.

W sekcji szerokości możesz zachować domyślną szerokość lub zmienić ją na pełną szerokość, wstawioną, automatyczną lub niestandardową. Możesz także wybrać wyrównanie w pionie.

Następnie nadszedł czas na ulepszenie sekcji pozycji. Zamiast opcji domyślnej możesz zmienić opcję „Bezwzględną” lub „Stałą”. Niezależnie od tego, którą opcję wybierzesz, podsekcja będzie podobna.

Na przykład otrzymasz orientację poziomą i pionową z modyfikacją przesunięcia w pikselach.

Ostrożność: Nie używaj funkcji pozycjonowania niestandardowego, chyba że jest ona bardzo potrzebna. Ponieważ wpływa to na responsywność Twojej witryny. Nawet jeśli tak, staraj się nie używać go zbyt często.

8. Czuły

Zakładka responsywna pozwala Ci wybrać wygląd Twoich elementów. Możesz zmienić ustawienia na każdej platformie, np. w sekcjach komputerów stacjonarnych, tabletów i urządzeń mobilnych.

9. niestandardowe CSS

Jak sama nazwa wskazuje, za pomocą tej funkcji możesz wstawić do swojego posta niestandardowy CSS. Będziesz jednak potrzebować Wersja ElementsKit Pro aby wstawić niestandardowy CSS lub atrybuty na swoją stronę internetową.

To wszystko, co znajdziesz w widgecie „Oś czasu treści” w ElementsKit – dodatku „wszystko w jednym” do Kreatora stron Elementor.

Dlaczego warto korzystać z osi czasu treści opracowanej przez ElementsKit?

Dobra! Mamy nadzieję, że przejrzałeś wszystkie nasze funkcje w poprzedniej sekcji. Czy zatem powinieneś używać ElementsKit, czy raczej pozostać przy tradycyjnej metodzie opartej na piórze i papierze?

Cóż, myślę, że musisz użyć osi czasu treści autorstwa ElementsKit. Skoncentrujmy się na kilku głównych powodach używania tego produktu.

• Przyjazny użytkownikowi

Aby utworzyć oś czasu treści za pomocą ElementsKit, nie potrzebujesz żadnych umiejętności kodowania ani projektowania. Dzięki temu staje się całkowicie przyjazny dla użytkownika.

• Oszczędność czasu

Tworzenie nowej osi czasu i ręczne dostosowywanie jest procesem czasochłonnym. Mamy nadzieję, że ta wielofunkcyjna wtyczka umożliwia utworzenie lub dostosowanie osi czasu w ciągu kilku minut.

• Wbudowane układy

ElementsKit ma wiele wbudowanych stylów osi czasu. Jeśli znajdujesz się w sytuacji awaryjnej i nie masz czasu na zaprojektowanie harmonogramu, mamy dla Ciebie wsparcie. Po prostu wybierz jeden z wbudowanych układów, dostosuj teksty i opublikuj!

• Zaawansowane ulepszanie

Moduł osi czasu umożliwia wprowadzenie zaawansowanych zmian w celu stworzenia łatwiejszej i przyciągającej wzrok osi czasu dla Twojej witryny. Omówiliśmy już zaawansowaną funkcję dostosowywania w sekcji „Zaawansowane dostosowywanie”.

• Szybki i responsywny

Moduł Timeline w ElementsKit jest niezwykle lekki i ładuje się szybko. Będąc produktem responsywnym, dopasowuje się także do każdego urządzenia pod względem wielkości ekranu.

Rzeczy do dodania na osi czasu treści

Stworzenie osi czasu nie jest wielkim problemem. Jednak zbudowanie pomysłowej i przyciągającej wzrok osi czasu jest dość kreatywnym zadaniem!

Cóż, dodanie poniższych opcji sprawi, że oś czasu sprawi, że Twój projekt będzie bardziej zaradny i zaspokoi wszystkie Twoje zapytania. Rzućmy okiem na opcje, które mogą być uwzględnione na osi czasu.

• Data

Czy możesz sobie wyobrazić oś czasu bez żadnej daty?

Nie!

Dlatego musisz dodać odpowiednie daty na osi czasu treści. W przeciwnym razie będzie to po prostu strata czasu. Oś czasu bez daty nie ma żadnej wartości dla odbiorców.

• Odpowiedni nagłówek

Nigdy nie zapomnij nazwać swojej osi czasu. Właściwy nagłówek pozwala użytkownikom szybko zrozumieć cel Twojej osi czasu.

• Ikona graficzna

Użycie efektownych ilustrowanych obrazów, ikon lub innych elementów graficznych sprawi, że Twoja oś czasu będzie żywa i bardzo atrakcyjna.

• Projekt

Wybierz przyciągający wzrok projekt pasujący do prezentacji na osi czasu. Dodaje przejrzystości i upraszcza percepcję.

• Krótki opis

Krótkie opisy pozwalają użytkownikom zrozumieć kamienie milowe projektu na osi czasu.

Ostatnie słowa

Oś czasu treści jest idealnym elementem reprezentującym kamienie milowe projektu. Choć obejmuje długi przedział czasu, nie zaśmiecaj go nadmiernym opisem. Zamiast tego staraj się zachować prostotę, używając obrazów, krótkich opisów itp.

Ten widżet osi czasu Elementora może znacząco pomóc użytkownikom w tworzeniu i dostosowywaniu osi czasu bez żadnych problemów.

Jeśli nadal masz pytania dotyczące osi czasu treści Elementora, opublikuj je w sekcji komentarzy. Odpowiem na Twoje zapytanie JAK NAJSZYBCIEJ!

Czas zacząć tworzyć oś czasu treści w witrynie WordPress!