Gli elementi grafici di SuperSite danno struttura e personalità alle pagine del sito, senza bisogno di toccare codice. Con forme, separatori, icone e blocchi di contenuto rendi le pagine più ordinate, professionali e facili da leggere. Questa guida presenta i principali elementi, a cosa servono e come usarli al meglio.
Elementi di sfondo e decorazione
Rettangolo
Il Rettangolo è il blocco grafico di base: lo usi come sfondo di una sezione, come riquadro evidenziato dietro testi e immagini o come card che si stacca dalla pagina. Puoi impostare colore e opacità, sfumatura, bordo, arrotondamento degli angoli e ombra. Con l'opacità ridotta e l'effetto vetro (che sfoca ciò che sta dietro) ottieni l'aspetto smerigliato delle interfacce moderne.
Cerchio
Il Cerchio è un elemento circolare che mette in evidenza numeri, icone, percentuali o brevi scritte, oppure decora la pagina. Puoi personalizzare colore e opacità, sfumatura, bordo e ombra; la forma resta sempre perfettamente circolare, a qualsiasi dimensione. È adatto a bollini sconto, icone di servizio, numeri e statistiche o decorazioni di sfondo.
Linea
La Linea è un separatore grafico, orizzontale o verticale, che divide le sezioni della pagina e la rende più ordinata e leggibile. Puoi scegliere orientamento, spessore, colore e stile del tratto: continuo, tratteggiato, punteggiato o doppio. Scegli uno stile e mantienilo su tutto il sito, per non creare disordine visivo.
Elementi interattivi
Icona cliccabile
L'Icona cliccabile è un simbolo che rimanda a una pagina del sito, a un indirizzo esterno o a una sezione specifica. Scegli tra oltre 400 simboli e personalizza colore, dimensione, forma e sfondo. È adatta alle azioni rapide e frequenti — chiamare, scrivere, prenotare, seguire sui social — perché occupa poco spazio e si tocca facilmente da mobile. Se lasci vuoto l'indirizzo, l'icona resta visibile ma non cliccabile.
Puntatore informativo
Il Puntatore informativo è un'icona che, al clic o al passaggio del mouse, mostra una piccola finestra con un titolo e una breve descrizione. Serve ad aggiungere spiegazioni e note secondarie senza allungare i testi principali, per esempio “IVA inclusa” accanto a un prezzo. Puoi anche collegarlo a un link e scegliere icona e animazione. Tieni i testi brevi: per gli approfondimenti, rimanda a una pagina dedicata.
Elementi per organizzare i contenuti
Accordion
L'Accordion organizza i contenuti in blocchi espandibili: il visitatore vede una lista di titoli e, toccandone uno, si apre il testo corrispondente. È ideale per le FAQ e per accorciare le pagine lunghe, soprattutto da mobile. Aggiungi, modifica ed elimina le voci direttamente dall'editor e personalizza bordi, colori, tipografia e icona di apertura.
Steps
Il componente Steps mostra una sequenza di fasi numerate - con titolo, sottotitolo e descrizione - per spiegare un processo in modo chiaro, per esempio “Come acquistare in 3 passaggi”. Puoi disporre le fasi in orizzontale o in verticale, aggiungerle e riordinarle dall'editor e scegliere se mostrare sempre la descrizione o aprirla al clic. Riduce dubbi e richieste di chiarimento e guida il visitatore verso l'azione.
Consigli per un aspetto coerente
Pochi accorgimenti rendono il sito più professionale e riconoscibile:
- usa i colori del brand in modo coerente su sfondi, bordi e icone;
- non mescolare troppi caratteri: uno per i titoli e uno per il testo;
- scegli una sola forma per gli elementi simili (per esempio angoli arrotondati o cerchi) e mantienila;
- usa ombre, sfumature e animazioni con moderazione: bastano uno o due elementi in evidenza per pagina;
- controlla sempre il contrasto tra testo e sfondo, per garantire la leggibilità.
Problemi comuni e soluzioni
Un bordo o una sfumatura non si vede.
Spesso l'opacità è impostata a 0 oppure i due colori sono troppo simili. Aumenta l'opacità e scegli colori con più contrasto; per le sfumature, distanzia le posizioni dei due colori.
Un elemento non si distingue dallo sfondo.
Il colore è troppo simile a quello dello sfondo. Cambia colore oppure aggiungi uno sfondo con un buon contrasto; per le icone, aggiungi uno sfondo colorato.
Il testo è troppo grande o piccolo su mobile.
Molti elementi hanno un controllo dimensione dedicato per mobile. Regola la dimensione del carattere dall'editor mobile, senza modificare il desktop.
Un'icona o un puntatore non apre il link.
Il campo indirizzo è vuoto o contiene un errore. Riaprilo e inserisci di nuovo il link; per lo scorrimento interno, controlla che il nome della sezione sia corretto.
Gli elementi non sono uniformi tra le pagine.
Ogni elemento ha impostazioni indipendenti: non esiste uno stile applicato in automatico a tutto il sito. Scegli la combinazione definitiva e replicala sugli elementi dello stesso tipo.