Widget Builder
Nel Widget Builder, assembli visivamente cio che deve apparire sul tuo sito web.
Creare un'integrazione
Quando crei una nuova integrazione, si apre prima un modale con i template:
| Template | Descrizione |
|---|---|
| Programma corsi | Titolo con vista settimanale |
| Completo | Programma corsi, pacchetti e trainer in layout a 2 colonne |
| Solo pacchetti | Pacchetti crediti in primo piano |
| Focus trainer | Presentazione del team con griglia |
| Vista rapida | Lista compatta dei prossimi corsi |
| Vuoto | Parti da zero e costruisci tutto da solo |
Dai alla tua integrazione un nome (es. "Homepage", "Pagina corsi"), scegli un template e clicca "Crea". Il template serve come punto di partenza -- puoi personalizzare tutto liberamente nel builder in seguito.
Layout
Il builder ha tre aree:
| Area | Posizione | Funzione |
|---|---|---|
| Catalogo widget | Sinistra | Tutti i widget disponibili da aggiungere |
| Canvas | Centro | La tua integrazione -- anteprima live |
| Impostazioni | Destra | Configurazione del widget selezionato |
Righe e colonne
I widget sono organizzati in righe. Ogni riga puo avere un layout di colonne specifico:
| Layout | Descrizione |
|---|---|
| 1 colonna | Larghezza piena (100%) |
| 2 colonne (50/50) | Due colonne di uguale larghezza |
| 2 colonne (33/66) | Colonna sinistra stretta, destra larga |
| 2 colonne (66/33) | Colonna sinistra larga, destra stretta |
| 3 colonne (33/33/33) | Tre colonne di uguale larghezza |
Creare un layout
- Clicca "Aggiungi riga" nel canvas
- Seleziona il layout di colonne desiderato
- Trascina i widget nelle singole colonne
Sui dispositivi mobili, tutti i layout a colonne vengono automaticamente visualizzati impilati verticalmente.
Aggiungere widget
Tramite drag and drop
- Seleziona un widget nel catalogo (sinistra)
- Trascinalo in una colonna nel canvas
- Rilascialo nella posizione desiderata
Cambiare l'ordine
Trascina i widget su o giu all'interno di una colonna per cambiare l'ordine.
Rimuovere un widget
Seleziona il widget e clicca l'icona elimina (cestino).
Widget disponibili
Widget principali
Programma corsi
Programma corsi interattivo con tutti gli appuntamenti del tuo studio.
| Impostazione | Opzioni |
|---|---|
| Vista | Settimana, lista, tessere o raggruppato per trainer |
| Mostra filtri | Si / No -- mostra filtri per categoria e trainer |
| Settimane avanti | Da 1 a 8 -- quante settimane vengono visualizzate |
| Tessere per riga | 2, 3 o 4 (solo vista tessere) |
| Pulsante prenotazione | Si / No |
| Filtro categorie | Opzionalmente mostra solo categorie specifiche |
| Filtro trainer | Opzionalmente mostra solo trainer specifici |
Quando un visitatore clicca su un corso, si apre un modale dettagliato con descrizione, info sul trainer, orario, capacita e altro. Da li, il visitatore puo prenotare il corso sulla piattaforma Bookicorn (si apre in una nuova scheda).
Pacchetti crediti
Mostra tutti i pacchetti crediti con prezzi, crediti e caratteristiche. Tramite il pulsante "Acquista ora", il visitatore viene portato alla piattaforma Bookicorn per acquistare il pacchetto.
| Impostazione | Opzioni |
|---|---|
| Layout | Griglia, lista o carosello |
| Max. pacchetti | Da 1 a 12 |
| Ordinamento | Popolarita, prezzo o crediti |
| Badge "Popolare" | Si / No -- evidenzia i pacchetti popolari |
Panoramica trainer
Mostra il tuo team con foto profilo, bio e specializzazioni.
| Impostazione | Opzioni |
|---|---|
| Layout | Griglia, lista o carosello |
| Max. trainer | Da 1 a 20 |
| Mostra bio | Si / No |
| Specializzazioni | Si / No |
Quando un visitatore clicca su un trainer, si apre un modale profilo con bio, specializzazioni, link social media e prossimi corsi.
Widget avanzati
Prossimi corsi
Lista compatta dei prossimi appuntamenti dei corsi.
| Impostazione | Opzioni |
|---|---|
| Numero | Da 1 a 20 |
| Mostra trainer | Si / No |
| Filtro categorie | Opzionalmente solo categorie specifiche |
Prenotazione rapida
Mette in evidenza un singolo corso -- con data, capacita e pulsante "Prenota ora". Ideale per promuovere un'offerta specifica.
| Impostazione | Opzioni |
|---|---|
| Corso | Menu a tendina per selezionare il corso |
| Testo pulsante | Liberamente personalizzabile (predefinito: "Prenota ora") |
Categorie
Categorie di corsi filtrabili da esplorare.
| Impostazione | Opzioni |
|---|---|
| Stile | Pillole (pulsanti) o schede |
| Mostra conteggio | Si / No -- mostra il numero di corsi per categoria |
Trainer in evidenza
Un singolo trainer in primo piano -- perfetto per presentare un coach.
| Impostazione | Opzioni |
|---|---|
| Trainer | Menu a tendina per selezionare |
| Mostra corsi | Si / No |
| Max. corsi | Numero di prossimi corsi |
Marketing
Recensioni
Recensioni dei clienti del tuo studio.
| Impostazione | Opzioni |
|---|---|
| Numero | Da 1 a 20 |
| Valutazione minima | Da 1 a 5 stelle |
| Stile | Schede o carosello |
| Consenti recensioni | Si / No -- mostra il pulsante "Scrivi una recensione" |
Widget per membri
Questi widget sono destinati ai membri connessi.
Pulsante login
Pulsante per accedere a Bookicorn.
| Impostazione | Opzioni |
|---|---|
| Testo pulsante | Liberamente personalizzabile |
| Redirect | URL dopo il login (opzionale) |
Stato crediti
Mostra al membro connesso il suo saldo crediti attuale.
| Impostazione | Opzioni |
|---|---|
| Stile | Compatto o dettagliato |
Le mie prenotazioni
Lista delle prenotazioni imminenti del membro.
| Impostazione | Opzioni |
|---|---|
| Numero | Prenotazioni visualizzate |
| Mostra passate | Si / No |
Sede
Mappa sede
Mappa con la posizione del tuo studio.
| Impostazione | Opzioni |
|---|---|
| Altezza | In pixel |
| Zoom | Livello di zoom della mappa |
| Mostra indicazioni | Si / No |
Widget di layout
I widget di layout ti aiutano a strutturare la tua integrazione.
Titolo
| Impostazione | Opzioni |
|---|---|
| Testo | Liberamente personalizzabile |
| Dimensione | H1, H2, H3 o H4 |
| Allineamento | Sinistra, centro o destra |
Blocco di testo
| Impostazione | Opzioni |
|---|---|
| Contenuto | Testo libero (HTML) |
| Allineamento | Sinistra, centro o destra |
Spaziatore
| Impostazione | Opzioni |
|---|---|
| Altezza | Da 8 a 200 pixel |
Divisore
| Impostazione | Opzioni |
|---|---|
| Stile | Continuo, tratteggiato o punteggiato |
| Colore | Colore personalizzato opzionale |
Salvare e anteprima
Salvare
Clicca "Salva" in alto a destra. Le modifiche sono immediatamente attive -- la versione aggiornata appare sul tuo sito web.
Se ci sono modifiche non salvate, verrai avvisato quando lasci il builder.
Anteprima
Clicca "Anteprima" per vedere l'integrazione in una nuova scheda a dimensione piena. L'anteprima mostra dati reali dal tuo studio.
Suggerimenti
Configurazione consigliata per la homepage
- Titolo ("I nostri corsi")
- Prossimi corsi (3-5)
- Spaziatore
- Titolo ("Pacchetti crediti")
- Pacchetti crediti
- Spaziatore
- Titolo ("Il nostro team")
- Panoramica trainer
Per una pagina programma corsi
- Programma corsi (vista settimanale, filtri attivi)
Per una pagina prezzi
- Titolo ("I nostri pacchetti")
- Pacchetti crediti (layout griglia)
- Spaziatore
- Recensioni (carosello)
Suggerimento per le prestazioni
Meno e meglio. Un widget con programma corsi e pacchetti si carica piu velocemente di dieci widget diversi su una pagina. Usa integrazioni separate per diverse pagine del tuo sito web.
Domande frequenti
Posso usare un widget piu di una volta?
All'interno di un'integrazione, ogni tipo di widget puo apparire solo una volta. Crea integrazioni separate per pagine diverse.
Perche non vedo dati nel builder?
Assicurati di aver creato corsi, pacchetti o trainer nel tuo studio. Il builder visualizza dati in tempo reale.
Cosa succede quando cambio l'ordine?
Dopo il salvataggio, il nuovo ordine e immediatamente visibile sul tuo sito web.
Responsive -- come appare su mobile?
Tutti i widget sono completamente responsive. I layout multi-colonna vengono automaticamente impilati verticalmente su schermi piccoli. Puoi usare la funzione di anteprima per testare diverse dimensioni dello schermo.