Questa guida descrive le principali funzionalità avanzate disponibili per la gestione delle immagini nella piattaforma SuperSite.
L’obiettivo di questi strumenti è permettere di migliorare l’impatto visivo delle immagini inserite nelle pagine del sito, trasformando semplici elementi grafici in componenti più dinamici e interattivi. Attraverso una corretta configurazione delle impostazioni avanzate è possibile aggiungere effetti visivi, livelli di profondità e personalizzazioni estetiche.
Accesso al menu Impostazioni
Per accedere alle opzioni di configurazione avanzata è necessario aprire il pannello dedicato alle impostazioni del componente immagine, per farlo procedere come segue:
- selezionare il componente Immagine con un clic del tasto sinistro del mouse
- cliccare sul comando Modifica immagine presente nel menu contestuale
- individuare e selezionare l’icona della rotellina, che apre il pannello Impostazioni avanzate
Da questo menu è possibile intervenire su tutti gli effetti e le personalizzazioni disponibili.
Implementazione dell’effetto Parallax
L’effetto Parallax consente di creare un effetto di profondità durante lo scorrimento della pagina. L’immagine viene visualizzata con un movimento differenziato rispetto agli altri elementi della pagina, creando un effetto visivo più dinamico.
Per attivare questa funzione:
- Procedura: una volta aperto il pannello delle impostazioni, selezionare la voce parallax
- Attivazione: inserire la spunta nella casella dedicata per abilitare l'effetto di scorrimento differenziato
- Disattivazione: rimuovere la spunta qualora si desideri eliminare la profondità di campo e ripristinare la visualizzazione statica
Effetti al passaggio del mouse (Hover)
SuperSite consente di applicare effetti visivi che si attivano quando il cursore dell’utente passa sopra l’immagine.
- Procedura: all'interno del menu delle impostazioni avanzate, individuare la sezione dedicata agli effetti al passaggio del mouse
- Configurazione: utilizzare il menu a tendina per visionare e selezionare l'effetto desiderato tra le opzioni disponibili in piattaforma
Questa funzione permette di rendere le immagini più interattive e di migliorare l’esperienza di navigazione degli utenti
Gestione degli overlay: colori, sfumature e trasparenze
L’opzione overlay consente di applicare un livello grafico sopra l’immagine, utilizzando colori o sfumature per creare effetti visivi particolari.
Per configurare l’overlay è necessario:
- Configurazione Cromatica: selezionare la voce overlay e scegliere il colore della sfumatura di sfondo attingendo dalle palette di colori integrate
- Requisito Tecnico di Visibilità: è fondamentale aumentare la percentuale di trasparenza del livello; senza questa regolazione, la sfumatura coprirebbe interamente l'immagine originale, rendendola invisibile
- Personalizzazione del Gradiente: tramite l'apposito menu a tendina, è possibile definire l'orientamento della sfumatura. Si può intervenire con precisione regolando i parametri posizione del colore principale e posizione del colore secondario per calibrare la transizione cromatica
- Conferma: solo dopo aver ultimato tutte le regolazioni di posizione e trasparenza, cliccare su Ok per salvare la modifica
Personalizzazione estetica: cornici e ombre
Per migliorare l’aspetto grafico delle immagini e conferire un aspetto professionale ai contenuti, sono disponibili opzioni di contorno e tridimensionalità.
Selezionando la voce cornici è possibile applicare un bordo all’immagine scegliendo tra i modelli disponibili e personalizzando il colore in base allo stile grafico del sito.
Selezionando invece la voce ombra è possibile aggiungere un effetto di profondità al componente. Il sistema permette di regolare il colore dell’ombra e la sua posizione rispetto all’immagine, definendo direzione e distanza della proiezione.
Salvataggio
È importante ricordare che ogni modifica effettuata nei menu parallax, overlay, cornice o ombra deve essere confermata e salvata affinché le impostazioni vengano applicate correttamente e risultino visibili nella versione pubblicata del sito.