Kalendarz wydarzeń to standardowy kalendarz wydarzeń dla WordPressa. Działa dobrze z Divi, ale aby dodać go do swoich układów Divi, musisz użyć krótkiego kodu. Stylizację wykonuje się na karcie ustawień w panelu WordPress. Utrudnia to integrację stylu z układem Divi. Wtyczka innej firmy o nazwie Moduł kalendarza wydarzeń Divi rozwiązuje ten problem, wyświetlając Kalendarz wydarzeń jako moduł Divi. W tym artykule zobaczymy moduł kalendarza wydarzeń Divi i zobaczymy, co potrafi.

Instalacja modułu kalendarza wydarzeń Divi

Wtyczka Wordpress Divi kalendarza wydarzeń

Najpierw zainstaluj wtyczkę z kalendarz wydarzeń . Jeśli ta wtyczka nie jest zainstalowana, pojawi się komunikat o błędzie informujący, że należy ją zainstalować, i podając link do strony WordPress wtyczki. 

Następnie pobierz i aktywuj wtyczkę Divi Events Calendar Module i aktywuj ją.

Konfiguracja wtyczki kalendarza wydarzeń wordpress

Na potrzeby moich przykładów utworzyłem zestaw wydarzeń dla Divi i WordPress z różnymi kategoriami, organizatorami, lokalizacjami i datami.

Moduł kalendarza wydarzeń Divi

Moduł kalendarza wydarzeń divi

Do Divi Builder dodano dwa nowe moduły. Pierwsza z nich, zwana Kalendarzem wydarzeń Divi, wyświetla wydarzenia jako karty na liście, podobnie jak posty na blogu. Drugi, o nazwie Widok kalendarza wydarzeń Divi, wyświetla wydarzenia w kalendarzu. Moduł widoku kalendarza jest nadal w wersji beta. Obecnie ma ograniczoną funkcjonalność. Przyjrzymy się obu modułom.

W pierwszym używam pakietu układu strony Harmonogram spotkań. Zastąpiłem wydarzenia na tej stronie modułem kalendarza wydarzeń Divi.

Karta Zawartość

Skonfiguruj zakładkę treści Divi

Moduł automatycznie wyświetla zdarzenia. Zawiera standardowe zakładki Divi. Zakładka Treść dodaje treść i elementy. Domyślnie dodaje niebieskie tło.

Treść

Wybierz typ modułu divi zawartości

sekcja Treść umożliwia wprowadzenie liczby wyświetlanych zdarzeń, kategorii do uwzględnienia, formatu daty, długości fragmentu i numeru przesunięcia. W tym przykładzie ograniczyłem wydarzenia do 2 w kategorii Wydarzenia Divi. Ustawiłem offset na 1.

Elementy

Skonfiguruj wyświetlanie elementów divi

Elements pozwala wybrać elementy do wyświetlenia. Obejmuje to wyróżniony obraz, organizator programu, adres URL Witryna internetowa, data, godzina, miejsce, lokalizacja, fragment, kategoria, przycisk Więcej informacji i przeszłe zdarzenia (co ogranicza moduł do wyświetlania tylko przeszłych zdarzeń). Skonfigurowałem go tak, aby ukryć polecany obraz i organizatora pokazu.

Karta Projekt

Skonfiguruj kartę projektu Divi

Karta Projekt dodaje opcje układu, miniatury, tekstu tytułu, tekstu szczegółowego, wyodrębnionego tekstu i przycisku Pokaż więcej. Tekst działa tak samo, jak zwykły moduł tekstowy. Przyjrzymy się bliżej układowi, miniaturze i przyciskowi Pokaż więcej. Cieniowanie obramowań i pudełek działa w przypadku pojedynczych kart. To jest coś, co chciałem zobaczyć w wielu modułach Divi.

Usposobienie

Wybierz układ divi

Układ pozwala wybrać liczbę kolumn (1–4), wyrównanie obrazu (do lewej lub do góry), kolor tła, marginesy i dopełnienie. Położyłem obraz na górze i zmieniłem tło na białe. Niebieski zawsze pojawia się między kartami wydarzeń.

Konfigurowanie liczby kolumn divi

W tym przykładzie ustawiłem kolumny na 2 i dodałem margines i dopełnienie, aby dopasować karty do niebieskiego tła, tworząc obramowanie.

Stworzenie kalendarza wydarzeń divi

Oto przykład z 3 kolumnami. Mogę dostosować tekst adresu URL, aby pasował. W 3 kolumnach umieszczenie obrazu nie wchodzi w grę.

Skonfiguruj kolumny Divi

Ten ma 2 kolumny z obrazami po lewej stronie.

Naklejka

Dostosuj naklejkę Divi

Ustawienia miniatury obejmują margines, wypełnienie, szerokość, rogi, style obramowania, szerokość obramowania, kolor i styl obramowania. W tym przykładzie ustawiłem wypełnienie na 75, aby przenieść obraz na środek mapy, a szerokość na 100.

Skonfiguruj rozmiar obrazu Divi

W tym przykładzie ustawiłem rogi na 36 pikseli i nadałem mu szerokość obramowania 9 pikseli. Stylizowałem kolorystykę lamówki i nadałem jej styl wstawki.

teksty

Dostosuj tekst modułu Divi

Dostosowałem tekst tytułowy, aby pasował do układu, z lekkim Roboto i wszystkimi wersjami. Domyślnie zostawiłem fragment i szczegółowy tekst.

Pokaż więcej przycisk

Pokaż więcej przycisku divi

W tym przykładzie użyłem stylu układu przycisków. Ustawiłem rozmiar na 14px, dostosowałem kolor tła, zmieniłem szerokość i promień obramowania i wybrałem Roboto pogrubioną czcionką. Zostawiłem domyślny efekt najechania, który zwiększa rozmiar przycisku, jak widać na górnym przycisku. Zostawiłem też domyślny tekst, który mówi VIEW.

W tym przykładzie użyłem większości ustawień z poprzednich przykładów, ale z kilkoma modyfikacjami. Usunąłem niebieskie tło, zmieniłem promień obramowania i usunąłem obramowanie. Ograniczyłem również kategorie, aby pokazać tylko wydarzenia Divi (jedna z dwóch kategorii przykładów, które stworzyłem). Limit jest ustalony na 2 wydarzenia.

W tym przykładzie ustawiłem układ tak, aby pokazywał 3 kolumny. Usunąłem obramowanie przycisku i wyśrodkowałem jego wyrównanie. Usunąłem również adres URL, zmieniłem kolor tekstu szczegółowego, zmieniłem tekst przycisku i nadałem kartom cień, aby wyróżniały się na tle.

Moduł widoku kalendarza wydarzeń Divi

Demo moduł kalendarza wydarzeń divi

Oto przegląd drugiego modułu. Zapewnia widok kalendarza wydarzeń. Kalendarz zawiera miesiąc, rok, nawigację i wyróżnia dzisiejszą datę. To jest strona Wydarzenia pakietu układów galerii sztuki. Najechanie kursorem na zdarzenie powoduje wyświetlenie wyskakującego okienka zawierającego informacje. To jest widok domyślny.

Zmodyfikuj układ modułu

Karta Projekt dodaje parametry do tekstu modułu. Opcjonalnie będzie zawierał ustawienia tytułu, miesiąca itp. W tym przykładzie dostosowałem wagę, kolor i rozmiar tekstu. Spowoduje to dostosowanie dat w kalendarzu.

Zmień kolor modułu kalendarza divi

W tym przykładzie zmieniłem rodzinę czcionek na Roboto i dostosowałem kolor, rozmiar, odstępy między literami i wysokość linii. Dałem też tekstowi cień, aby się wyróżniał. Cały tekst z wyjątkiem przycisku „Dzisiaj” ma wpływ na rozmiar, odstępy i wysokość.

Jak dodać moduł kalendarza Divi

Możesz także dostosować obramowanie, tło, cienie pól itp. W tym przykładzie ustawiłem tekst modułu na wielkie litery. Obejmuje to tekst miesiąca i dnia. Dostosowałem również tło, nadałem modułowi obramowanie (używając stylu podwójnej ramki) i nadałem mu cień w kształcie ramki. Obramowanie ma ten sam kolor co tekst.

Przegląd kalendarza modułu divi

W tym przypadku dołączyłem kolory i ustawienia cienia dla pola układu. Podoba mi się sposób, w jaki współpracuje z projektem układu. Nawet przy ograniczonej liczbie korekt, moduł wyświetlania kalendarza jest wart używania z układami Divi.

Ceny i dokumentacja

Możesz pobrać moduł Kalendarza wydarzeń na stronie witryna programisty za 35 dolarów. Obejmuje nieograniczone korzystanie z Witryna internetowa, dożywotnia pomoc techniczna i aktualizacje oraz 30-dniowa gwarancja zwrotu pieniędzy.

Dokumentacja zawiera film i krótki artykuł, który poprowadzi Cię przez proces instalacji, a także kilka krótkich artykułów pokazujących, jak z niego korzystać i jak dokonywać aktualizacji. Miałem szczęście, że nie musiałem zaglądać do dokumentacji (moduły są bardzo intuicyjne), ale cieszę się, że jest dostępna, gdy jest potrzebna.

Inne zasoby

Zakończ myśli

Oto nasze podejście do wtyczki modułu kalendarza wydarzeń Divi dla Divi. Moduły działają jak każdy moduł Divi, więc łatwo jest dostosować wydarzenia do pracy z układami Divi. Główny moduł kalendarza zawiera nawet regulację dopełnienia, marginesów i obramowań dla poszczególnych elementów modułu. Daje to kontrolę nad stylizowaniem ich jako pojedynczych kart.

Umożliwia wprowadzanie kategorii do wyświetlenia, jeśli chcesz mieć większą kontrolę. To jedyna rzecz, która działa inaczej niż inne moduły, które pozwalają wybrać opcje z listy rozwijanej. Wolę opcję rozwijaną. To jest coś, co chciałbym zmienić w przyszłości. Chciałbym również móc wybierać wydarzenia na podstawie lokalizacji, organizatorów wydarzeń itp.

Sam kalendarz wydarzeń jest doskonałym narzędziem dla każdego Witryna internetowa. Przydaje się podczas sesji zdjęciowych, koncertów, wystaw produktów, wydarzeń branżowych, spotkań i wielu innych. Jeśli chcesz używać wtyczki Kalendarza wydarzeń na swojej stronie internetowej Divi, warto rzucić okiem na wtyczkę Kalendarza wydarzeń Divi.