Come aggiungere un widget di prenotazione in Elementor?

Per aggiungere un modulo di prenotazione in Elementor, apra la pagina nell'editor, cerchi la categoria Kraft Booking nel pannello dei widget e trascini il widget desiderato sulla pagina, poi ne regoli le opzioni nella scheda Contenuto. GDA Kraft Booking, il plugin prenotazioni WordPress di Global Digital Agency, fornisce widget nativi compatibili con Elementor gratuito ed Elementor Pro. Questa guida va oltre l'inserimento: impaginazione di una scheda alloggio e di una pagina di servizio, impostazioni responsive, accessibilità e prestazioni.

Quali widget sono disponibili?

Non esiste un widget Kraft Console né un widget « Disponibilità e prezzo »: Kraft Console è uno spazio di gestione a parte (si veda Kraft Console).

La presentazione generale degli elementi e i loro equivalenti negli altri page builder si trovano in Utilizzare Kraft Booking con Divi, Gutenberg, Elementor e Bricks.

Come inserire il widget passo dopo passo?

1. Apra la pagina con Modifica con Elementor.
2. Nel pannello di sinistra, digiti « Kraft » nella ricerca dei widget, oppure apra la categoria Kraft Booking.
3. Trascini il widget in un contenitore.
4. Scheda Contenuto: regoli le opzioni del widget, ad esempio « Unità (ID, 0 = automatico) », « Numero di mesi » e « Mostrare i prezzi » per il calendario; « Pagamento », « Mostrare gli ospiti », « Mostrare il telefono » e « Mostrare il riepilogo » per il modulo di prenotazione; « Servizio (ID, 0 = tutti) » e « Operatore (ID, 0 = a scelta) » per gli appuntamenti. Non ci sono opzioni di acconto, extra né lingua.
5. I widget non hanno una scheda Stile dedicata: regoli margini, sfondo e bordo nella scheda Avanzato di Elementor.
6. Pubblichi, poi verifichi la pagina in navigazione privata.

Quale impaginazione per una scheda alloggio?

Una scheda alloggio deve rispondere nell'ordine alle domande dell'ospite: com'è, è libero, quanto costa, come si prenota. Struttura tipo su due colonne su desktop:

1. Intestazione a larghezza piena: galleria o foto principale, nome, capienza (« 6 persone, 3 camere »).
2. Colonna principale (circa due terzi): descrizione, dotazioni, pianta degli spazi, regolamento, posizione.
3. Colonna laterale (circa un terzo): widget Calendario delle disponibilità in alto, poi widget Modulo di prenotazione, che conferma le date scelte. In Elementor Pro, l'effetto sticky della colonna mantiene visibile il modulo durante lo scorrimento; lo disattivi su mobile.
4. Fondo pagina: condizioni di cancellazione, domande frequenti, contatti.

Su mobile il contenitore passa in colonna: verifichi che il modulo arrivi dopo la galleria e il riepilogo, e aggiunga in cima alla pagina un pulsante « Prenota » che punti all'ancora del modulo.

Per arricchire la scheda, si veda Gallerie, visita per ambienti e libro degli ospiti.

Quale impaginazione per una pagina di servizio?

Per un appuntamento, l'informazione conta quanto il modulo:

1. titolo chiaro con durata e prezzo (« Trattamento viso, 60 min, 70 € »);
2. svolgimento in tre o quattro fasi, a chi si rivolge il servizio, che cosa occorre prevedere;
3. widget Prendere appuntamento con « Servizio (ID, 0 = tutti) » compilato, il che toglie un passaggio al cliente;
4. regola di cancellazione in una frase, subito sotto il modulo;
5. link agli altri servizi.

Si possono usare i widget nei modelli e nei pop-up?

Questi utilizzi non sono documentati: se inserisce un widget in un loop template o in un pop-up di Elementor Pro, lo verifichi con cura. Due precauzioni:

• pop-up: lo riservi al widget Ricerca di disponibilità. Un modulo completo in una finestra a comparsa è scomodo su mobile;
• modello unico per tutte le schede (Theme Builder): lasci « Unità (ID, 0 = automatico) » a 0 perché il calendario mostri l'alloggio della scheda, e verifichi su due schede che ciascuna mostri il proprio calendario; in caso contrario, mantenga una pagina per alloggio.

Come curare responsive e accessibilità?

• Dimensione del testo: almeno 16 px nei campi su mobile, altrimenti alcuni browser fanno lo zoom durante la digitazione.
• Aree tattili: pulsanti e giorni del calendario abbastanza grandi per un dito; eviti di ridurre i margini interni del widget in modalità mobile.
• Contrasto: punti almeno al livello AA delle WCAG, cioè un rapporto di 4,5:1 per il testo corrente, anche per le date non disponibili, che non devono distinguersi solo per il colore.
• Etichette: non sostituisca le etichette dei campi con semplici testi di esempio; scompaiono durante la digitazione.
• Focus visibile: non elimini il contorno del focus di campi e pulsanti nei Suoi stili personalizzati.
• Verifichi con la tastiera: il tasto Tab deve percorrere il modulo nell'ordine logico.

Come preservare le prestazioni?

• Inserisca i widget solo nelle pagine che ne hanno bisogno, non in un'intestazione globale.
• Comprima le foto della galleria (formato WebP, dimensioni adeguate): sono loro, più del modulo, ad appesantire una scheda.
• Se utilizza un plugin di cache, verifichi il modulo in navigazione privata dopo una prenotazione; se le disponibilità sembrano ferme, escluda le pagine di prenotazione dalla cache. Non metta mai in cache la pagina del portale ospite, che mostra dati personali.

Quali errori si incontrano spesso?

Domande frequenti

I widget funzionano con Elementor gratuito?

Sì. I widget funzionano con Elementor gratuito ed Elementor Pro; solo le funzioni proprie di Pro, come i pop-up o i loop template, richiedono Elementor Pro.

Serve un account per utilizzare i widget?

Il plugin si scarica dalla Sua area cliente Kraft GDA (account gratuito, senza carta di credito, iscrizione su /it/inscription). Questa edizione include tutto, pagamento online, appuntamenti, Kraft Console, moduli di design, Kraft Fields e multilingue: nessun add-on da installare.

Posso mettere più moduli nella stessa pagina?

È possibile, ma sconsigliato: un solo modulo per pagina evita confusioni ed errori di inserimento. Per più alloggi, utilizzi i widget Ricerca di disponibilità e Risultati della ricerca.

I widget riprendono i miei colori globali?

I widget non hanno una scheda Stile dedicata: la loro resa dipende dagli stili del plugin e del Suo tema. Verifichi il risultato dopo ogni modifica del kit globale.