Come aggiungere un componente Icona

Le icone aiutano i visitatori a individuare rapidamente le informazioni importanti del tuo sito web, come i recapiti, le opzioni di spedizione o i file da scaricare. Con il componente Icona del Website Builder, puoi scegliere un’icona dalla libreria Material Icons oppure caricarne una personalizzata. Puoi anche modificarne il colore e aggiungere un link a una pagina web, un indirizzo email, un numero di telefono o un file.

In questa guida, aggiungeremo un’icona del telefono alla pagina Contatti per consentire ai visitatori di chiamare il negozio con un semplice clic.

Aggiungere un’icona

1. Vai su Site Admin e fai clic su Modifica sito web per aprire il Website Builder.

2. Vai alla pagina che vuoi modificare e passa il mouse sulla sezione in cui deve comparire l’icona. Fai clic sul pulsante + Aggiungi nell’angolo in alto a sinistra della sezione.

3. Nella finestra Aggiungi componente, seleziona Icona dal gruppo Essenziali.

4. Il componente viene aggiunto al centro della sezione con un’icona a forma di stella predefinita. Trascinalo nella posizione desiderata, ad esempio sotto i recapiti del negozio.

Scegliere un’icona

1. Fai clic sull’icona Modifica (matita) nella barra degli strumenti sopra l’icona. Se non vedi la barra degli strumenti, fai clic sull’icona nell’area di lavoro per selezionarla.

2. La finestra Modifica icona si apre sulla scheda Generale. Per sostituire l’icona predefinita, fai clic su Sfoglia tutte le icone.

3. La galleria Icone ha due schede:

• Le mie icone: carica la tua icona trascinandola nell’area di caricamento o facendo clic su Sfoglia file. Le icone devono essere in formato SVG e non superare i 2 MB. Le icone che carichi vengono elencate qui, così puoi riutilizzarle in seguito.
• Icone Material: scegli tra le icone della libreria Google Material Icons, raggruppate per categoria. Per trovare un’icona, digita una parola chiave nel campo di ricerca e fai clic sulla lente di ingrandimento. Puoi anche ordinare le icone per nome, dalla A alla Z o dalla Z alla A.

4. Seleziona l’icona che desideri e fai clic su Aggiorna. In questo esempio, abbiamo cercato “call” e selezionato l’icona Call.

Aggiungere un testo alternativo e un link

1. Nel campo Testo alternativo, aggiungi una breve descrizione dell’icona per i visitatori che usano uno screen reader, ad esempio “Chiamaci”.

2. Apri il menu a discesa Tipo di collegamento e scegli cosa succede quando un visitatore fa clic sull’icona:

• URL personalizzato: collega l’icona a una pagina web. Inserisci l’indirizzo nel campo Aggiungi un link. Puoi anche attivare Apri in una nuova scheda e Imposta link su No-Follow, che indica ai motori di ricerca di ignorare il link.
• Indirizzo email: collega l’icona a un indirizzo email. Inseriscilo nel campo Aggiungi indirizzo email.
• Numero di telefono: collega l’icona a un numero di telefono. Inseriscilo nel campo Aggiungi numero di telefono.
• Accesso ai file: collega l’icona a un file. Fai clic su Scegli file e seleziona il file.

Per l’icona del telefono, abbiamo scelto Numero di telefono e inserito il numero del negozio.

Cambiare il colore dell’icona

Passa alla scheda Design e fai clic sul campione Colore dell’icona. Scegli un colore nel selettore colori, inserisci un codice HEX o scegli uno dei colori dalla Tavolozza. Qui abbiamo scelto il bianco della tavolozza, così l’icona si abbina al testo accanto.

Chiudi la finestra per visualizzare il risultato sulla pagina.

Le modifiche vengono salvate automaticamente come bozza. Quando sei soddisfatto del risultato, fai clic su Aggiorna nell’angolo in alto a destra del Website Builder per pubblicarle sul sito.