L’integrazione di elementi grafici all'interno delle pagine web di SuperSite avviene tramite l’interfaccia di progettazione principale. Per inserire un'icona o un indicatore, si accede alla Barra degli elementi posizionata sul lato sinistro, si seleziona la voce Forme, si procede su Icone e si trascina l'elemento scelto direttamente nell'area di lavoro.
Questa procedura permette di posizionare rapidamente gli elementi grafici all’interno del layout, pronti per essere personalizzati.
1.Personalizzazione dell'Aspetto dell'Icona
Dopo l’inserimento, l’elemento grafico può essere modificato per adattarsi allo stile del sito. Per procedere è necessario selezionare l’icona con il tasto sinistro del mouse e accedere, in sequenza, alle voci Modifica icona, Icone e Stile.
All’interno di questa sezione è possibile intervenire su diversi parametri grafici:
- Colore: per la definizione cromatica del simbolo
- Grandezza: per regolare le dimensioni dell’icona
- Tipologia di icona: per sostituire il simbolo grafico con un altro disponibile nella libreria
Per la modifica specifica del colore e della forma dello sfondo dell’elemento, si utilizza l'icona Tavolozza, che permette di intervenire sugli aspetti cromatici del contenitore
2. Configurazione dei Collegamenti (Link)
Ogni icona o indicatore può fungere da elemento interattivo. Selezionando l'opzione Indirizzo URL, si accede alla configurazione dei link, dove è possibile collegare l'elemento a:
- una pagina del sito web
- un sito web esterno
- un’ancora interna alla pagina
- una finestra popup
- un file scaricabile
Nota bene: dopo aver selezionato il tipo di collegamento desiderato è necessario cliccare sul pulsante Salva collegamento per confermare l’operazione e rendere attivo il link.
3. Gestione Avanzata degli Indicatori e dei Popup
L’elemento Indicatore si differenzia dalle icone standard perché consente di mostrare informazioni aggiuntive tramite una finestra popup. Dopo aver trascinato l’elemento dalla sezione Icone, è necessario selezionarlo e cliccare sul pulsante icona presente nel menu contestuale per personalizzarne colore e tipologia, seguendo una procedura analoga a quella prevista per le icone semplici.
Impostazioni Popup
La configurazione del comportamento del popup avviene tramite l'icona matita (Impostazioni popup). In questa sezione è possibile definire:
- Attivazione, scegliendo se visualizzare il popup al passaggio del mouse (hover) oppure al clic.
- Posizionamento, stabilendo in quale area rispetto all’indicatore debba comparire la finestra informativa.
Formattazione del Testo e dei Caratteri
Attraverso il comando carattere testo si accede alle impostazioni tipografiche del contenuto del popup. Da qui è possibile modificare il font, la dimensione dei caratteri ed il colore sia del titolo sia del testo descrittivo.
Stile grafico del popup
- Tavolozza, che consente di definire lo stile del popup intervenendo sul colore dello sfondo generale e sullo sfondo del titolo.
- Rettangolo, che permette di modificare i parametri strutturali del bordo, come spessore, colore e arrotondamento degli angoli.
4. Visibilità e Impostazioni Avanzate
Il controllo della visibilità dei contenuti testuali associati all’indicatore avviene tramite l’icona a forma di Occhio. Attraverso questo comando è possibile decidere se mostrare o nascondere il titolo e la descrizione presenti nel popup.
Per migliorare ulteriormente l’impatto visivo dell’elemento, la sezione Avanzate mette a disposizione ulteriori strumenti grafici, tra cui la possibilità di applicare animazioni o aggiungere un’ombra, aumentando così la profondità visiva e la visibilità dell’elemento all’interno della pagina.