Descrizione: Questo strumento permette di creare, personalizzare e gestire caroselli dinamici (slider) composti da più elementi visivi, ideali per la presentazione di contenuti in primo piano sul sito web.
A cosa serve? (Esempi pratici)
Utilizza il modulo Caroselli per:
- Creare un'area di benvenuto sulla homepage che ruoti automaticamente tra diverse promozioni o messaggi chiave.
- Presentare una galleria di immagini o video con effetti di sfondo unici e testi sovrapposti.
- Organizzare contenuti complessi in una sequenza visiva controllata, come una presentazione guidata o un portfolio.
Funzionalità principali
Il modulo offre un controllo granulare sia sulle impostazioni generali del carosello che sulla personalizzazione di ogni singola slide.
- Gestione centralizzata: Visualizzazione rapida di tutti i caroselli creati, con indicazione immediata se sono attivi o nascosti sul sito.
- Struttura a slide: Il carosello è composto da schede separate, ognuna delle quali rappresenta una singola slide.
- Editor visuale avanzato: Ogni slide include un'area per l'inserimento di testo, immagini e altri elementi grafici complessi, gestiti tramite un editor visuale dedicato.
- Sfondi multimediali: Supporto per l'utilizzo di immagini di sfondo (con opzioni separate per desktop e mobile) o video (da piattaforme esterne come YouTube/Vimeo o file MP4).
- Effetti di sovrapposizione (Overlay): Possibilità di applicare colori, gradienti e livelli di opacità sopra lo sfondo per migliorare la leggibilità del contenuto.
Come si configura
La configurazione si divide in due aree: le impostazioni generali del carosello e le impostazioni specifiche di ogni slide.
1. Impostazioni generali del carosello
Queste opzioni definiscono il comportamento e l'aspetto complessivo del carosello.
| Opzione | Descrizione |
|---|---|
| Titolo slider | Nome interno per identificare il carosello nell'area di gestione. |
| Visibile sul sito | Stato di attivazione/disattivazione del carosello. |
| Altezza slider | Definisce l'altezza complessiva del carosello, specificando un valore numerico e l'unità di misura (pixel, vh, vw). |
| Autoplay | Tempo in secondi dopo il quale la slide passa automaticamente alla successiva. |
| Loop | Se attivato, il carosello ricomincia dall'inizio una volta raggiunta l'ultima slide. |
| Frecce | Visualizza i pulsanti di navigazione per lo scorrimento manuale delle slide. |
| Ordine casuale | Le slide vengono mostrate in un ordine differente ad ogni caricamento della pagina. |
2. Impostazioni di ogni singola slide
Ogni slide (gestita tramite una scheda) può essere personalizzata individualmente.
Contenuto e Titolo
- Titolo Slide: Nome interno della slide (utile per l'organizzazione).
- Contenuto: Area principale dove inserire il testo e gli elementi visivi della slide utilizzando l'editor.
Sfondo (Immagini)
Questa sezione gestisce l'aspetto visivo dello sfondo tramite immagini.
| Opzione | Descrizione |
|---|---|
| Immagine Desktop/Mobile | Permette di caricare immagini specifiche per la visualizzazione su schermi grandi e piccoli. |
| Dimensione | Definisce come l'immagine si adatta all'area (es. cover per coprire interamente lo spazio). |
| Ripeti | Determina se l'immagine deve essere ripetuta orizzontalmente, verticalmente o non ripetuta affatto. |
| Posizione | Allineamento dell'immagine di sfondo (es. centro, in alto a sinistra, ecc.). |
| Attaccamento | Definisce se l'immagine scorre con la pagina o rimane fissa (fixed). |
Sfondo (Video)
Permette di utilizzare un video come sfondo.
| Opzione | Descrizione |
|---|---|
| Video Sfondo | Inserisci l'URL del video (supporta link diretti a file MP4 o link da piattaforme come Vimeo/Youtube). |
| Al completamento del video | Definisce cosa succede quando il video finisce (continua a ripetere, nascondi, ferma sull'ultimo frame). |
| Visualizza su | Permette di nascondere il video su specifici dispositivi (Desktop, Tablet, Mobile). |
Overlay
Queste opzioni applicano un filtro colorato o sfumato sopra lo sfondo.
| Opzione | Descrizione |
|---|---|
| Gradiente | Applica una sfumatura di colore sullo sfondo. |
| Colore | Applica un colore uniforme sullo sfondo. |
| Opacità | Definisce la trasparenza del gradiente/colore applicato (da 0 a 100%). |
Integrazioni automatiche
Una volta salvati, i caroselli sono immediatamente disponibili per essere inseriti in qualsiasi pagina del tuo sito. Il sistema gestisce automaticamente:
- Visualizzazione multilingua: Se il tuo sistema supporta più lingue, il contenuto testuale delle slide viene gestito e salvato per ogni lingua configurata.
- Adattabilità: Le impostazioni di sfondo (immagini desktop/mobile) e la visibilità dei video assicurano che il carosello si adatti correttamente a tutti i tipi di dispositivi.
