Hendelseskalender er standard hendelseskalender for WordPress. Det fungerer godt med Divi, men for å legge den til oppsettene dine Divi, må du bruke en kortkode. Styling gjøres fra innstillingsfanen i WordPress-dashbordet. Dette gjør det vanskelig å integrere stilen med layouten din Divi. En tredjeparts plugin kalt Divi Events Calendar -modul løser dette problemet ved å vise hendelseskalenderen som en Divi-modul. I denne artikkelen vil vi se Divi Events Calendar-modulen og se hva den kan gjøre.

Installasjon av Divi events kalendermodul

Event kalender wordpress divi plugin

Først installerer du plugin-modulen fra hendelseskalender . Hvis dette programtillegget ikke er installert, vil du få en feilmelding som forteller deg at det må installeres og gi en lenke til WordPress-siden for programtillegget. 

Last ned og aktiver deretter plugin-modulen til Divi Events Calendar Module og aktiver den.

Konfigurasjon hendelseskalender plugin wordpress

For eksemplene mine opprettet jeg et sett med arrangementer for Divi og WordPress med forskjellige kategorier, arrangører, steder og datoer.

Divi Events Calendar -modul

Arrangementskalender modul divi

To nye moduler er lagt til Divi Builder. Den første, kalt Divi Events Calendar, viser hendelser som kort i en liste omtrent som blogginnlegg. Den andre, kalt Divi Event Calendar View, viser hendelsene i en kalender. Kalendervisningsmodulen er fortsatt i beta. Den har for øyeblikket begrenset funksjonalitet. Vi vil se på begge modulene.

For det første bruker jeg oppsettpakken for Meetup Schedule. Jeg byttet ut hendelsene på denne siden med Divi Events Calendar-modulen.

Innholds-fanen

Konfigurer kategorien divi-innhold

Modulen viser automatisk hendelser. Den inkluderer standard Divi-faner. Fanen Innhold legger til innhold og elementer. Den legger til en blå bakgrunn som standard.

Innhold

Velg type innholdsdelemodul

seksjon Innhold lar deg angi antall hendelser som skal vises, kategorier som skal inkluderes, datoformat, utdragslengde og offsetnummer. I dette eksemplet har jeg begrenset hendelsene til 2 i kategorien Divi Events. Jeg satte offset til 1.

Elements

Konfigurer visning av divi-elementer

Elements lar deg velge hvilke elementer som skal vises. Dette inkluderer det fremhevede bildet, arrangøren av showet, nettadressen til nettstedet Web, dato, klokkeslett, sted, sted, utdrag, kategori, mer info-knapp og tidligere hendelser (som begrenser modulen til kun å vise tidligere hendelser). Jeg konfigurerte den til å skjule det fremhevede bildet og showarrangøren.

Design-fanen

Konfigurer kategorien divi design

Fanen Design legger til alternativer for layout, miniatyrbilde, titteltekst, detaljtekst, ekstrahert tekst og Vis mer-knappen. Tekst fungerer på samme måte som den vanlige tekstmodulen. Vi ser nærmere på oppsettet, miniatyrbildet og knappen Vis mer. Skyggelegging av rammer og bokser fungerer for individuelle kort. Dette er noe jeg ønsket å se i mange Divi-moduler.

Disposisjon

Velg divi-layout

Oppsettet lar deg velge antall kolonner (1-4), bildejustering (venstre eller øverst), bakgrunnsfarge, margin og polstring. Jeg la bildet på toppen og endret bakgrunnen til hvit. Blå vises alltid mellom kortene.

Konfigurerer antall divikolonner

For dette eksemplet satte jeg kolonnene til 2 og la til en margin og polstring for å få kortene til å passe mot den blå bakgrunnen, og skape en kant.

Opprettelse av en divi-arrangementskalender

Her er eksemplet med 3 kolonner. Jeg kan justere url-teksten slik at den passer. På tre kolonner er ikke plassering av bildet et alternativ.

Konfigurer divikolonner

Denne har 2 kolonner med bildene til venstre.

Klistremerket

Tilpass divi-klistremerket

Miniatyrinnstillinger inkluderer margin, polstring, bredde, hjørner, kantstiler, kantbredde, kantfarge og kantstil. I dette eksemplet setter jeg fyllet til 75 for å bringe bildet til midten av kartet og bredden til 100.

Konfigurer divi-bildestørrelse

For dette eksemplet satte jeg hjørnene til 36 piksler og ga den en kantbredde på 9 piksler. Jeg stylet fargene på grensen og ga den en innfelt stil.

Texte

Tilpass divi-modulteksten

Jeg justerte tittelteksten for å matche oppsettet, med Roboto lett vekt og alle hetter. Jeg forlot utdraget og den detaljerte teksten som standard.

Vis mer-knappen

Vis en mer divi-knapp

I dette eksemplet brukte jeg stilen til knappelayouten. Jeg satte størrelsen til 14 piksler, justerte bakgrunnsfargen, endret bredden og radiusen på rammen, og valgte Roboto med fet skrift i alle bokstaver. Jeg forlot standard sveveeffekten, noe som øker størrelsen på knappen som du kan se på den øverste knappen. Jeg la også standardteksten, som sier VIS.

For dette eksemplet brukte jeg de fleste innstillingene fra de forrige eksemplene, men med noen få modifikasjoner. Jeg fjernet den blå bakgrunnen, endret radiusen på grensen og fjernet grensen. Jeg begrenset også kategoriene til bare å vise Divi-hendelser (en av de to kategoriene med eksempler jeg opprettet). Grensen er satt til 2 hendelser.

For dette eksemplet har jeg satt oppsettet til å vise 3 kolonner. Jeg fjernet knappekanten og sentrerte knappjusteringen. Jeg fjernet også URL-en, endret fargen på detaljteksten, endret knappeteksten og ga kortene en skygge slik at de skilte seg ut mot bakgrunnen.

Divi arrangementskalendermodul

Demo-modul hendelseskalender divi

Her er en oversikt over den andre modulen. Det gir en kalendervisning av hendelsene dine. Kalenderen inkluderer måned, år, navigering og fremhever dagens dato. Dette er hendelsessiden til Art Gallery Layout Pack. Når du holder musepekeren over en hendelse, vises et popup-vindu som inneholder informasjonen. Dette er standardvisningen.

Endre moduloppsettet

Fanen Design legger til parametere for modulteksten. Det vil valgfritt inkludere innstillinger for tittel, måned osv. I dette eksemplet har jeg justert vekt, farge og størrelse på teksten. Dette justerer datoene i kalenderen.

Endre fargen på divi-kalendermodulen

For dette eksemplet endret jeg skriftfamilien til Roboto og justerte farge, størrelse, bokstavavstand og linjehøyde. Jeg ga også teksten en skygge for å hjelpe den til å skille seg ut. All tekst unntatt “I dag” -knappen påvirkes av størrelse, avstand og høyde.

Hvordan legge til divi-kalendermodulen

Du kan også justere rammen, bakgrunner, bokseskygger osv. I dette eksemplet har jeg satt modulteksten til store bokstaver. Dette inkluderer teksten til måneden og dagen. Jeg justerte også bakgrunnen, ga modulen en kantlinje (ved bruk av dobbel kantstil) og ga den en bokseskygge. Rammen har samme farge som teksten.

Divi-modulkalenderoversikt

For denne har jeg tatt med farger og skyggeinnstillinger for layoutboksen. Jeg elsker måten det fungerer med layoutdesignet. Selv med det begrensede antall justeringer er kalendervisningsmodulen verdt å bruke med Divi-oppsettene dine.

Priser og dokumentasjon

Du kan få Calendar of Events-modulen på utvikler nettsted for $35. Det inkluderer ubegrenset bruk av nettstedet Web, livstidsstøtte og oppdateringer, og en 30-dagers pengene-tilbake-garanti.

Dokumentasjonen er dekket med en video og en kort artikkel for å guide deg gjennom installasjonen, og noen korte artikler for å vise hvordan du bruker den og hvordan du gjør oppdateringer. Jeg har vært heldig at jeg ikke trengte å konsultere dokumentasjonen (modulene er veldig intuitive), men jeg er glad for å se at den er tilgjengelig når den er nødvendig.

Andre ressurser

Slutt tanker

Dette er vårt syn på plugin-modulen Divi Events Calendar Module for Divi. Modulene fungerer som alle Divi-moduler, så det er enkelt å utforme hendelsene dine til å fungere med Divi-layoutene dine. Hovedkalendermodulen inkluderer til og med polstring, margin- og kantjusteringer for de enkelte elementene i modulen. Dette gir deg kontrollen over å utforme dem som individuelle kort.

Det lar deg legge inn kategoriene som skal vises hvis du vil ha mer kontroll. Dette er det eneste som fungerer annerledes enn andre moduler som lar deg velge alternativene fra en rullegardinliste. Jeg foretrekker rullegardinmenyen. Dette er noe jeg ønsker å se forandring i fremtiden. Jeg vil også kunne velge arrangementer basert på lokasjoner, arrangører av arrangementer osv.

Selve arrangementskalenderen er et flott verktøy for alle nettstedet Web. Det er nyttig for fotoshoots, konserter, produktutstillinger, handelsarrangementer, møter og mye mer. Hvis du vil bruke Event Calendar-pluginet med Divi-nettstedet ditt, er Divi Events Calendar-plugin verdt en titt.