Jak utworzyć kalendarz wydarzeń w WordPress za pomocą Elementora

Opublikowany: 2025-01-13

Kalendarz wydarzeń nie jest banalną i zwyczajną funkcją strony internetowej. Działa jako potężna brama do angażowania użytkowników i budowania z nimi silnych połączeń. Zapewniając przejrzysty obraz nadchodzących wydarzeń i kampanii, pozwala użytkownikom planować z wyprzedzeniem i korzystać ze zniżek, oszczędności i prezentów. Dzięki temu mogą przewidywać nadchodzące wydarzenia i odpowiednio w nich uczestniczyć.

Jeśli Twoja witryna jest zbudowana przy użyciu Elementora na WordPressie, tworzenie kalendarzy wydarzeń będzie bardzo łatwe. W tym artykule omówimy krok po kroku, jak utworzyć kalendarz wydarzeń w WordPress, z którego może skorzystać każdy, nawet z ograniczoną wiedzą techniczną.

Wcześniej omówimy kilka aspektów teoretycznych, aby przygotować grunt pod dyskusję. Zacznijmy!

Co to jest kalendarz wydarzeń?

Kalendarz wydarzeń to funkcja internetowa, która pozwala w zorganizowany sposób wyświetlać nadchodzące wydarzenia, kampanie i działania Twojej firmy na stronie internetowej. Możesz nawet wyświetlić ważne szczegóły, takie jak daty, godziny i lokalizacje, w jednym miejscu, aby ludzie mogli łatwo sprawdzić, co będzie dalej.

Obecnie wiele firm wykorzystuje swoje strony internetowe nie tylko do obsługi klientów, ale także do usprawnienia komunikacji wewnątrz działów. Dzięki temu, korzystając z kalendarza wydarzeń, możesz podzielić się z członkami zespołu informacjami o spotkaniach, warsztatach, koncertach czy dowolnym szczególnym dniu, aby mogli wcześniej przygotować plany pracy.

Przypadki użycia do tworzenia kalendarza wydarzeń

Zanim przejdziesz do samouczka, rzućmy okiem na to, jak utworzenie kalendarza wydarzeń może być naprawdę pomocne dla Twojej firmy.

Promocja biznesu: udostępniaj ważne wydarzenia, takie jak seminaria internetowe, warsztaty i premiery produktów, aby informować klientów na bieżąco i zachęcać ich do przyłączenia się do programu.

Wydarzenia społecznościowe: udostępniaj aktualizacje dotyczące wydarzeń, takich jak zbiórki pieniędzy, festiwale i zgromadzenia publiczne, aby motywować do udziału w życiu społecznym i rozwijać ducha społeczności.

Zarządzanie edukacją: Prezentuj nadchodzące daty egzaminów, zajęcia pozalekcyjne i wydarzenia kulturalne, aby pomóc uczniom i zapewnić rozrywkę rodzicom.

Działalność non-profit: Zwiększaj świadomość na temat wydarzeń wolontariackich, kampanii darowizn i programów społecznych, aby ludzie z entuzjazmem weszli we wspieranie tych przypadków.

Społeczności internetowe: Organizuj dyskusje na żywo, turnieje gier i wirtualne spotkania, aby pobudzić publiczność do zaangażowania i zaangażowania.

Jak utworzyć kalendarz wydarzeń w WordPress za pomocą Elementora

Część teoretyczna dobiegła końca. Teraz w tej sekcji opiszemy, jak utworzyć kalendarz wydarzeń w WordPress za pomocą Elementora, omawiając krok po kroku. W tym celu potrzebujesz następujących wtyczek na swojej stronie internetowej.

  • Elementora
  • Szczęśliwe dodatki

HappyAddons to znaczący dodatek do wtyczki Elementor. Zawiera widżet Kalendarza wydarzeń , który umożliwia łatwe tworzenie i dodawanie kalendarzy wydarzeń do witryny. Korzystanie z tego widgetu jest bezpłatne. Możesz ukończyć ten samouczek, korzystając z darmowej wersji wtyczki.

Po zainstalowaniu i aktywowaniu wtyczek na swojej stronie otwórz post/stronę w Elementorze. Następnie zacznij wykonywać czynności opisane poniżej.

Krok 01: Przeciągnij i upuść widżet kalendarza wydarzeń na kanwę

Znajdź widżet Kalendarza wydarzeń na panelu Elementora. Przeciągnij i upuść go na płótno po prawej stronie.

Drag and Drop the Event Calendar Widget to the Elementor Canvas: How to Create an Event Calendar

Domyślny kalendarz wydarzeń zostanie natychmiast dodany do Kanwy Elementora .

Event calendar is added to the Elementor canvas

Krok 02: Wybierz ustawienie wstępne kalendarza wydarzeń

Ustawienia wstępne to wstępnie zdefiniowane projekty lub style zastosowane do widżetu. Pozwala szybko nadać elementowi określony wygląd. W ten sposób może zaoszczędzić czas, udostępniając gotowe style i układy.

Większość widżetów wtyczki HappyAddons oferuje dobry zbiór gotowych ustawień, w tym Kalendarz wydarzeń. W widgecie Kalendarza wydarzeń możesz zobaczyć cztery gotowe ustawienia .

Wybierz ustawienie wstępne, które Ci się podoba, lub możesz pozostać przy domyślnym.

Select a Preset for the Event Calendar

Krok 03: Wybierz źródło kalendarza wydarzeń

Kalendarz ten możesz utworzyć na trzy sposoby: ręcznie , importując z Kalendarza Google oraz korzystając z wtyczki Kalendarza Wydarzeń .

Ręcznie – wszystko zrobisz bezpośrednio na widżecie (podając dane i harmonogram wydarzenia).

Kalendarz Google – jeśli Twój kalendarz jest już wbudowany w Google, możesz wyświetlić klucz API lub identyfikator kalendarza na widżecie.

Kalendarz wydarzeń – jest to popularna wtyczka WordPress do tworzenia kalendarzy wydarzeń. Jeśli Twoja witryna korzysta już z tej wtyczki i ma gotowe kalendarze, możesz wyświetlić je za pomocą widżetu.

** W tym samouczku użyjemy metody ręcznej, aby wszystko lepiej wyjaśnić.

Select a Source for the Event Calendar

Krok 04: Dodaj nowe wydarzenia do kalendarza

Kliknij przycisk + Dodaj przedmiot w sekcji Wydarzenie .

Add New Events to the Calendar

Po dodaniu nowego elementu dodaj tytuł, gościa/mówcę i lokalizację . Zostanie on wyświetlony w kalendarzu na kanwie Elementora .

Add the event's title and information

# Dodaj zdjęcie do wydarzenia

Możesz nawet dodawać obrazy do wydarzeń w kalendarzu. Aby to zrobić, kliknij opcję obrazu w sekcji wydarzenia. Umożliwi to przesłanie obrazu z dysku lokalnego lub biblioteki multimediów.

Add an image to the Event Calendar

Możesz zobaczyć, że dodaliśmy zdjęcie do wydarzenia. Następnie możesz zmienić rozdzielczość obrazu za pomocą menu rozwijanego. Dostępne rozdzielczości są następujące:

  1. Zwięzły
  2. Średni
  3. Średni Duży
  4. Duży
  5. Pełny
An image is added to the event calendar

Możesz się martwić, dlaczego obraz i inne informacje nie są wyświetlane w wydarzeniu w kalendarzu na kanwie.

Nie wpadaj w panikę. Wystarczy kliknąć na odpowiednie wydarzenie . Otworzy się wyskakujące okienko z informacjami i obrazem dodanymi do wydarzenia. Zobacz proces na załączonym poniżej klipie wideo.

# Ustaw daty wydarzenia

Na końcu karty przedmiotu dostępna jest opcja dodania dat wydarzenia. Wybierz opcję Data rozpoczęcia i Data zakończenia . Jeśli jest to wydarzenie jednodniowe, wybierz tę samą datę rozpoczęcia i zakończenia.

Set Dates for the Event

Nie zapomnij także określić czasu, od kiedy i jak długo będzie trwało to wydarzenie.

Set time for the event

W przypadku wydarzeń wielodniowych wybierz dni, od których wydarzenie będzie się odbywać. Włącz także opcję Cały dzień, jeśli jest to wydarzenie trwające cały dzień. Jeśli dotyczy to określonej pory dnia, dopiero wtedy możesz zdefiniować dla niej godziny.

For multi-day events, select the days from which the event will run

# Stylizuj wydarzenie

Aby wykonać stylizację, włącz styl indywidualny .

Stylize the Event

Po włączeniu tej opcji będziesz mógł dostosować kolory tekstu, tła i kropki wydarzenia. Sam dokonaj niezbędnych zmian.

Colorize the event information

Krok 05: Skonfiguruj ustawienia widżetu Kalendarza wydarzeń

Rozwiń sekcję Ustawienia . Możesz dostosować język, domyślny widok kalendarza, pierwszy dzień tygodnia i więcej opcji. Sprawdź je jeden po drugim.

Configure Settings for the Event Calendar Widget

# Język

Po zmianie języka zobaczysz zmiany w nazwie miesiąca, nazwach kategorii, nazwach tygodni itp.

Change the language type for the event calendar

# Domyślny widok kalendarza

Widżet oferuje cztery typy widoków. Są to widoki dnia, tygodnia, miesiąca i listy . Sprawdźcie ich układ na załączonym poniżej klipie.

# Ustaw pierwszy dzień tygodnia

Jako pierwszy dzień tygodnia możesz ustawić dowolny dzień. Przykładowo, jako pierwszy dzień tygodnia ustawiliśmy poniedziałek.

Set the First Day of the Week

# Tytuł czasu

Możesz napisać tytuł sekcji czasu.

Write a title for the time

W ten sam sposób przejrzyj pozostałe opcje i skonfiguruj je dla widżetu kalendarza wydarzeń.

Krok 06: Włącz lub poznaj kursor myszy Happy (opcjonalnie)

Dzięki tej funkcji możesz oddzielnie dodawać różne typy kursorów dla elementów internetowych. Włączenie tej funkcji nie jest obowiązkowe. Jeśli uważasz, że może to dodać wartość do Twojej witryny, możesz ją włączyć.

Omówiliśmy już szczegółowy post na blogu na temat dodawania kursora Happy Mouse na WordPress. Sprawdź ten przewodnik, aby go poznać.

Enable or Explore the Happy Mouse Cursor

Krok 07: Poznaj odznakę globalną (opcjonalnie)

Włączenie opcji Global Badge spowoduje dodanie wstążki do widżetu. Opcja ta nie jest obowiązkowa w przypadku kalendarza wydarzeń. Jest bardziej odpowiedni dla produktów eCommerce i biznesowych, w tym usług. Możesz zapoznać się z tą dokumentacją na Global Badge.

Explore Global Badge

Krok 08: Stylizuj widżet kalendarza wydarzeń

Przejdź do zakładki Styl . Następnie rozwiń sekcję Kalendarz .

Otrzymasz opcje stylizacji czcionki kalendarza, tła, koloru obramowania, cienia ramki, dzisiejszego tła, rozmiaru czcionki, dopełnienia i nie tylko .

Stylize the Event Calendar Widget

Jak widać, wystylizowaliśmy kalendarz wydarzeń na obrazku załączonym poniżej.

Stylized the calendar

# Stylizuj górny pasek

Przewijając nieco w dół, zobaczysz sekcję Górny pasek . Dzięki temu możesz dostosować dolny margines, kolor tła, typografię, kolor, przycisk, typ obramowania, szerokość obramowania i inne parametry widżetu.

Jak widać, dodaliśmy żółty kolor jako kolor tła górnego paska.

Stylize the Top Bar of the Event Calendar

# Stylizuj wydarzenie

Rozwiń sekcję Wydarzenie . Możesz stylizować rozmiar czcionki, kolor, tło i kolor kropki dla wydarzenia w kalendarzu.

Stylize the Event

# Stylizuj wyskakujące okienko wydarzenia

Jak już wspomnieliśmy wcześniej, po kliknięciu daty wydarzenia w kalendarzu wyświetli się wyskakujące okienko ze szczegółowymi informacjami na temat wydarzenia.

Rozwijając sekcję Wyskakujące okienko wydarzenia na karcie Styl, możesz dostosować wygląd wyskakującego okienka, jak widać na obrazku poniżej.

Stylize the Event Popup

Krok 09: Skonfiguruj zaawansowane ustawienia widżetu Kalendarza wydarzeń

Po zakończeniu pracy na karcie Treść i styl możesz przejść do karty Zaawansowane .

Na tej karcie możesz jeszcze bardziej dostosować układ swojego kalendarza wydarzeń. Poza tym możesz dodać efekty pływające, transformację CSS, Happy Tooltip, Happy Features i więcej, jeśli to konieczne.

Naprawdę trudno jest omówić każdą z tych funkcji w tym artykule. Jednak omówiliśmy już szczegółowe posty na blogu i dokumentację dotyczącą każdej z tych funkcji.

Configure Advanced Settings for the Event Calendar Widget

Dodaliśmy linki do tych funkcji na poniższej liście. Możesz je eksplorować samodzielnie. Następnie, jeśli napotkasz jakiś problem, możesz skomentować lub porozmawiać z nami.

  • Jak dodać pływające elementy do WordPressa
  • Jak dodać Happy Tooltip do WordPress
  • Jak dodać niestandardowy CSS do WordPress

Krok 10: Spraw, aby kalendarz wydarzeń był responsywny dla urządzeń mobilnych

Ponieważ znaczny procent ruchu na większości stron internetowych pochodzi z urządzeń mobilnych, należy zadbać o to, aby widget był idealnie zoptymalizowany pod kątem urządzeń mobilnych i tabletów.

W tym celu kliknij Tryb Responsywny w stopce panelu Elementora. Na górnym pasku pojawi się opcja sprawdzenia, jak projekt wygląda na różnych rozmiarach ekranów.

Make the Event Calendar Mobile Responsive

Przełączając się na różne ikony, sprawdź, jak projekt wygląda na różnych rozmiarach ekranów. W większości przypadków trzeba nieco dostosować projekt do rozmiaru ekranu telefonu komórkowego.

Zmniejszyliśmy rozmiar czcionki dla urządzeń mobilnych, ponieważ ich ekrany są zwykle mniejsze niż w przypadku innych typów urządzeń. Teraz widzimy, że obecny projekt wygląda dobrze na urządzeniach mobilnych.

An optimized event calendar for Mobile Responsiveness

Krok 11: Wyświetl podgląd kalendarza wydarzeń

Przejdź do strony podglądu i sprawdź, czy kalendarz wydarzeń działa poprawnie, czy nie. Kliknij wydarzenie i zobacz, czy pojawi się wyskakujące okienko. Po naszej stronie wszystko działa prawidłowo.

W ten sposób możesz tworzyć i dodawać kalendarze wydarzeń w WordPress za pomocą Elementora. Aby dowiedzieć się więcej na temat tego widżetu, zapoznaj się z dokumentacją w Kalendarzu wydarzeń.

Najlepsze praktyki tworzenia kalendarza wydarzeń w WordPress

Utworzenie wydajnego kalendarza wydarzeń w witrynie WordPress może sprawić, że będziesz bardziej widoczny dla odwiedzających i uprości zarządzanie wydarzeniami. Poniżej znajduje się kilka sprawdzonych metod, które pomogą Ci w pełni wykorzystać kalendarze wydarzeń.

  • Optymalizuj strony wydarzeń

Zaprojektuj stronę, na której dodasz kalendarz wydarzeń i dodasz treść tak, aby wszystko było powiązane z wydarzeniem i kalendarzem.

  • Podaj szczegółowe informacje o wydarzeniu

Upewnij się, że każde wydarzenie zawiera datę, godzinę, miejsce i opis. Jest to niezbędne do zaangażowania użytkowników i pozwala uczestnikom wiedzieć, czego się spodziewać. W razie potrzeby uwzględnij opcje zakupu biletów.

  • Regularnie aktualizuj swój kalendarz

Pamiętaj, aby regularnie aktualizować swój kalendarz wydarzeń o nowe wydarzenia i odwołania. Dzięki temu nie tylko czytelnicy będą na bieżąco informowani, ale także czyści Twoją witrynę i zapewnia jej większą wartość SEO poprzez publikowanie nowych treści.

  • Promuj swoje wydarzenia

Reklamuj wydarzenia za pomocą postów na blogu i samouczków wideo. Jeśli organizujesz wydarzenie i masz coś w kalendarzu, warto udostępnić posty z instrukcjami lub wyróżnić wydarzenia. Dobra treść może również sprawić, że staniesz się ekspertem w swojej niszy.

Zamykanie!

HappyAddons to wielofunkcyjne narzędzie do tworzenia stron, które może samodzielnie wykonywać zadania wielu wtyczek. Jeśli więc masz go na swojej stronie, nie będziesz potrzebować żadnych dodatkowych wtyczek do tworzenia kalendarzy wydarzeń. Zamiast tego możesz dodać do swojej witryny różne funkcje i funkcjonalności.

HappyAddons ma również wersję premium z wieloma ekscytującymi funkcjami i widżetami. Jeśli podoba Ci się ten artykuł, daj nam znać w polu komentarza. I nie zapomnij sprawdzić wersji premium wtyczki, klikając przycisk „ Wypróbuj HappyAddons za darmo ” załączony poniżej.

Wypróbuj HappyAddons za darmo
Wypróbuj HappyAddons Pro