Creare un calendario eventi con Elementor utilizzando FooEvents (2024)

In questo tutorial, vi mostreremo come aggiungere un calendario eventi Elementor utilizzando FooEvents nel 2024. I calendari mostreranno più eventi che vengono visualizzati in varie schede utilizzando diverse modalità di visualizzazione.

Passo 1: installare i plugin Elementor e FooEvents Calendar

Per prima cosa è necessario assicurarsi di disporre della Elementor installato. Si trova su wordpress.org e installati direttamente dalla sezione plugin del vostro sito web.

Accedere al cruscotto di amministrazione dell'WordPress e navigare in Plugin > Aggiungi nuovo. Poi cercare Elementor e installare il Costruttore di siti web Elementor plugin.

Successivamente, cercare FooEvents e installare il Calendario eventi per FooEvents La FooEvents offre due modi per creare eventi sul proprio sito WordPress. La prima opzione consiste nell'aggiungere i dettagli dell'evento a un post o a una pagina standard di WordPress, utilizzando l'opzione Calendario FooEvents plugin. Questo viene fatto quando si modifica il post o la pagina. Il plugin FooEvents Calendar aggiunge un modulo di base per le impostazioni degli eventi in fondo ai post, alle pagine e ai tipi di post personalizzati. Utilizzando questo modulo, è possibile impostare la data e l'ora dell'evento. Una volta impostate, verranno visualizzate nei calendari generati dal plugin Calendario FooEvents.

La seconda opzione, più sofisticata, consiste nell'utilizzare il metodo FooEvents per WooCommerce plugin ed estensioni per aggiungere funzionalità di eventi e biglietteria ai vostri prodotti WooCommerce. FooEvents per WooCommerce consente di vendere un numero illimitato di biglietti direttamente dal proprio sito web e di gestire i check-in utilizzando il programma gratuito FooEvents per WooCommerce. Applicazioni FooEvents Check-in. Il FooEvents Prenotazioni Il plugin può essere utilizzato anche per vendere l'accesso a fasce orarie prenotabili, come verrà illustrato più avanti in questo tutorial.

Una volta impostati alcuni eventi di prova, passare alla fase successiva.

Passo 2: creare una nuova pagina

Creare una nuova pagina e impostare il titolo della pagina. Passare quindi al costruttore di pagine di Elementor premendo il tasto Modifica con Elementor pulsante.

Passo 3: Aggiungere l'elemento Tabs di Elementor

Una volta caricata la pagina, aggiungere un elemento Tabs alla sezione principale della pagina. Per impostazione predefinita, Elementor creerà due schede di esempio. Rimuovere la seconda scheda ed espandere le opzioni di modifica della prima scheda.

Passo 4: Aggiungere un calendario eventi Elementor utilizzando FooEvents

Modificare la prima scheda e cambiare il titolo in 'Tutti', prima di aggiungere la scheda FooEvents Calendario shortcode alla sezione del contenuto della scheda.

[fooevents_calendar id="1"]

Quando si aggiungono più calendari a una pagina, è importante specificare un ID univoco per ogni calendario (ad esempio id="1″). È quindi possibile visualizzare l'anteprima del calendario, che mostrerà tutti gli eventi che si svolgono nel mese corrente.

Fase 5: Aggiungere un calendario per categorie specifiche di eventi

Quindi, duplicare la scheda appena creata e cambiare il titolo in attività. Questo calendario deve quindi visualizzare tutti gli eventi che sono attività. Quando si creano eventi utilizzando il plugin FooEvents per WooCommerce, è possibile organizzare gli eventi utilizzando la funzione categorie di WooCommerce. Per questa demo, abbiamo aggiunto il tour in autobus alla categoria attività. Utilizzando il parametro include_cat shortcode, possiamo filtrare il calendario per mostrare solo gli eventi classificati come attività. Possiamo anche duplicare questo processo per gli eventi classificati come "Conferenze".

[fooevents_calendar id="2″ include_cat="attività"]

Fase 6: Aggiungere calendari per periodi di tempo specifici

Creare un calendario che visualizzi solo gli eventi che hanno luogo nel giorno corrente del calendario, utilizzando il parametro defaultview con il valore impostato come listday. È possibile utilizzare questo parametro anche in combinazione con altri parametri, come il parametro include_cat, se necessario. Seguire lo stesso procedimento e creare una scheda di visualizzazione Settimana, specificando come defaultview il parametro listWeek. Questa vista visualizzerà tutti gli eventi che hanno luogo nella settimana corrente.

Creare una scheda di visualizzazione mese che visualizzi tutti gli eventi che si verificano nel mese di calendario corrente, utilizzando il valore listMonth e il parametro defaultdate per specificare il mese da visualizzare. Creare una scheda per visualizzare tutti gli eventi che si verificano nell'anno corrente, utilizzando il valore listYear.

[fooevents_calendar id="3″ defaultview="listDay"]

Passo 7: Aggiungere un calendario per eventi specifici da ripetere

Creare un calendario per eventi specifici ripetuti. Ad esempio, il tour in autobus utilizza il plugin per le prenotazioni FooEvents e si ripete in varie date e fasce orarie. È possibile creare un calendario che visualizzi solo queste fasce orarie specificando l'ID del prodotto. È sufficiente ottenere l'ID, creare una scheda chiamata Bus Tour e impostare l'ID del prodotto come parametro del post. Il calendario mostrerà quindi solo le prenotazioni per questo evento.

Ecco fatto! Ora sapete come utilizzare FooEvents ed Elementor per aggiungere al vostro sito web calendari di eventi che visualizzano più eventi in varie schede, utilizzando diverse modalità di visualizzazione. Ciascuno di questi calendari può essere ulteriormente filtrato utilizzando una serie di parametri shortcode. Per saperne di più, visitate il centro assistenza di FooEvents e navigate fino alla sezione Guida ai codici brevi del calendario.

Potreste essere interessati anche a questo contenuto del nostro partner FooSales WooCommerce POS:

• 10 ragioni per cui evitare un POS gratuito
• WooCommerce vs Shopify: Qual è la migliore piattaforma di e-commerce
• Come creare un sistema di ordinazione per ristoranti per ordini online e in azienda
• Posso utilizzare l'WooCommerce come POS?
• I 5 migliori plugin WooCommerce per lo stato dell'ordine personalizzato