Evenementenkalender is de standaard evenementenkalender voor WordPress. Het werkt goed met Divi, maar om het toe te voegen aan uw lay-outs Divi, moet u een shortcode gebruiken. Het stylen gebeurt via het tabblad Instellingen in het WordPress-dashboard. Dit maakt het moeilijk om de stijl te integreren met uw lay-out Divi. Een plug-in van derden genaamd Divi Evenementenkalender Module lost dit probleem op door de evenementenkalender weer te geven als een Divi-module. In dit artikel zullen we de Divi Events Calendar-module zien en zien wat deze kan doen.

Installatie van de Divi evenementenkalender module

Installeer eerst de plug-in van evenementenkalender . Als deze plug-in niet is geïnstalleerd, krijg je een foutmelding dat deze moet worden geïnstalleerd en een link naar de WordPress-pagina voor de plug-in. 

Download en activeer vervolgens de plug-in Divi Events Calendar Module en activeer deze.

Voor mijn voorbeelden heb ik een reeks evenementen gemaakt voor Divi en WordPress met verschillende categorieën, organisatoren, locaties en datums.

Divi Evenementenkalender Module

Er zijn twee nieuwe modules toegevoegd aan de Divi Builder. De eerste, Divi Events Calendar genaamd, geeft evenementen weer als kaarten in een lijst, net als blogposts. De tweede, Divi Event Calendar View genaamd, geeft de gebeurtenissen weer in een kalender. De module Kalenderweergave is nog in bèta. Het heeft momenteel beperkte functionaliteit. We zullen beide modules bekijken.

Voor de eerste gebruik ik het Meetup Schedule-paginalay-outpakket. Ik heb de evenementen op deze pagina vervangen door de Divi Events Calendar-module.

Inhoud tabblad

De module geeft automatisch gebeurtenissen weer. Het bevat de standaard Divi-tabbladen. Het tabblad Inhoud Voeg wat toe inhoud en elementen. Het voegt standaard een blauwe achtergrond toe.

Inhoud

sectie Inhoud Hiermee kunt u het aantal weer te geven gebeurtenissen, de op te nemen categorieën, de datumnotatie, de lengte van het fragment en het offsetnummer invoeren. In dit voorbeeld heb ik de evenementen beperkt tot 2 in de categorie Divi-evenementen. Ik heb de offset op 1 gezet.

Communie

Met Elementen kunt u kiezen welke elementen u wilt weergeven. Dit omvat de uitgelichte afbeelding, de organisator van de show, de URL van de Site web, datum, tijd, plaats, locatie, uittreksel, categorie, meer info-knop en eerdere evenementen (wat de module beperkt om alleen eerdere evenementen weer te geven). Ik heb het geconfigureerd om de uitgelichte afbeelding en de showorganisator te verbergen.

Ontwerp tabblad

Het tabblad Ontwerpen voegt opties toe voor lay-out, miniatuurweergave, titeltekst, detailtekst, geëxtraheerde tekst en de knop Meer weergeven. Tekst werkt hetzelfde als de gewone tekstmodule. We zullen de lay-out, miniatuurweergave en de knop Meer weergeven nader bekijken. Het in de schaduw stellen van randen en vakken werkt voor individuele kaarten. Dit is iets dat ik in veel Divi-modules wilde zien.

Aanleg

Met de lay-out kunt u het aantal kolommen (1-4), uitlijning van de afbeelding (links of boven), achtergrondkleur, marge en opvulling kiezen. Ik plaatste de afbeelding er bovenop en veranderde de achtergrond in wit. Blauw verschijnt altijd tussen gebeurteniskaarten.

Voor dit voorbeeld heb ik de kolommen op 2 gezet en een marge en opvulling toegevoegd om de kaarten tegen de blauwe achtergrond te laten passen, waardoor een rand ontstaat.

Hier is het voorbeeld met 3 kolommen. Ik kan de url-tekst aanpassen om deze passend te maken. Op 3 kolommen is het plaatsen van de afbeelding geen optie.

Deze heeft 2 kolommen met de afbeeldingen aan de linkerkant.

De sticker

Miniatuurinstellingen omvatten marge, opvulling, breedte, hoeken, randstijlen, randbreedte, randkleur en randstijl. In dit voorbeeld heb ik de vulling op 75 gezet om de afbeelding naar het midden van de kaart te brengen en de breedte op 100.

Voor dit voorbeeld heb ik de hoeken op 36 pixels ingesteld en een randbreedte van 9 pixels gegeven. Ik heb de randkleuren gestileerd en er een inzetstijl aan gegeven.

Teksten

Ik heb de titeltekst aangepast aan de lay-out, met Roboto lichtgewicht en allemaal hoofdletters. Ik heb het uittreksel en de gedetailleerde tekst standaard achtergelaten.

Toon meer knop

In dit voorbeeld heb ik de stijl van de knoplay-out gebruikt. Ik heb de grootte ingesteld op 14 pixels, de achtergrondkleur aangepast, de breedte en straal van de rand gewijzigd en Roboto vetgedrukt en in hoofdletters geselecteerd. Ik heb het standaard zweefeffect verlaten, waardoor de knop groter wordt, zoals je kunt zien in de bovenste knop. Ik heb ook de standaardtekst achtergelaten, die VIEW zegt.

Voor dit voorbeeld heb ik de meeste instellingen uit de vorige voorbeelden gebruikt, maar met een paar aanpassingen. Ik heb de blauwe achtergrond verwijderd, de straal van de rand gewijzigd en de rand verwijderd. Ik heb ook de categorieën beperkt om alleen Divi-evenementen weer te geven (een van de twee categorieën voorbeelden die ik heb gemaakt). De limiet is vastgesteld op 2 evenementen.

Voor dit voorbeeld heb ik de lay-out ingesteld om 3 kolommen weer te geven. Ik heb de knoprand verwijderd en de knopuitlijning gecentreerd. Ik heb ook de URL verwijderd, de kleur van de detailtekst gewijzigd, de knoptekst gewijzigd en de kaarten een schaduw gegeven zodat ze opvielen tegen de achtergrond.

Divi Event Kalender View Module

Hier is een overzicht van de tweede module. Het biedt een kalenderoverzicht van uw evenementen. De kalender bevat maand, jaar, navigatie en markeert de datum van vandaag. Dit is de evenementenpagina van het Art Gallery Layout Pack. Als u de muisaanwijzer op een gebeurtenis houdt, wordt een pop-upvenster weergegeven met de informatie. Dit is de standaardweergave.

Het tabblad Ontwerpen voegt parameters toe voor de moduletekst. Het bevat optioneel instellingen voor titel, maand, etc. In dit voorbeeld heb ik het gewicht, de kleur en de grootte van de tekst aangepast. Dit past de datums op de kalender aan.

Voor dit voorbeeld heb ik de lettertypefamilie gewijzigd in Roboto en de kleur, grootte, letterafstand en regelhoogte aangepast. Ik heb de tekst ook een schaduw gegeven om hem te helpen opvallen. Alle tekst behalve de knop "Vandaag" wordt beïnvloed door grootte, spatiëring en hoogte.

U kunt ook de rand, achtergronden, doosschaduwen, enz. Aanpassen. In dit voorbeeld heb ik de moduletekst ingesteld op hoofdletters. Dit omvat de tekst van de maand en de dag. Ik heb ook de achtergrond aangepast, de module een rand gegeven (met behulp van de dubbele randstijl) en een doosschaduw gegeven. De rand heeft dezelfde kleur als de tekst.

Voor deze heb ik de kleuren en schaduwinstellingen voor de layout box opgenomen. Ik hou van de manier waarop het werkt met het lay-outontwerp. Zelfs met het beperkte aantal aanpassingen is de kalenderweergavemodule het waard om te gebruiken met uw Divi-lay-outs.

Prijzen en documentatie

U kunt de module Evenementenkalender op de website voor ontwikkelaars voor $ 35. Het omvat onbeperkt gebruik van de Site web, levenslange ondersteuning en updates, en een geld-terug-garantie van 30 dagen.

De documentatie is bedekt met een video en een kort artikel om u door de installatie te leiden, en enkele korte artikelen om te laten zien hoe u het kunt gebruiken en hoe u updates kunt maken. Ik had het geluk dat ik de documentatie niet hoefde te raadplegen (de modules zijn erg intuïtief), maar ik ben blij te zien dat het beschikbaar is wanneer het nodig is.

Andere bronnen

• Kalenders maken met evenementenkalender
• Hoe de WP Events Manager-plug-in te configureren
• 10 plug-ins om een ​​kalender op WordPress te integreren
• 10 plug-ins om evenementen op WordPress te beheren

Beëindig gedachten

Dit is onze kijk op de Divi Events Calendar Module-plug-in voor Divi. De modules werken zoals elke Divi-module, dus het is gemakkelijk om uw evenementen zo te stylen dat ze met uw Divi-lay-outs werken. De hoofdkalendermodule bevat zelfs opvulling, marge en randaanpassingen voor de individuele elementen van de module. Dit geeft u de controle om ze als individuele kaarten te stylen.

Hiermee kunt u de categorieën invoeren die u wilt weergeven als u meer controle wilt hebben. Dit is het enige dat anders werkt dan andere modules waarmee u uw opties uit een vervolgkeuzelijst kunt selecteren. Ik geef de voorkeur aan de vervolgkeuzelijst. Dit is iets dat ik in de toekomst graag zou zien veranderen. Ik zou ook graag evenementen kunnen kiezen op basis van locaties, organisatoren van evenementen, etc.

De evenementenkalender zelf is voor iedereen een geweldig hulpmiddel Site web. Het is handig voor fotoshoots, concerten, producttentoonstellingen, vakevenementen, vergaderingen en nog veel meer. Als je de Events Calendar plugin wilt gebruiken met je Divi website, dan is de Divi Events Calendar plugin de moeite van het bekijken waard.