Alla base della realizzazione di un sito web, c’è un intenso racconto fatto di immagini e foto.
Le immagini giocano un ruolo importante nella struttura grafica del sito web, contribuendo all'esperienza di navigazione dell'utente.
Per questo avrai a disposizione diversi componenti immagini con funzionalità differenti, per ogni tua esigenza:
- Immagine singola;
- Galleria;
- Carosello;
- Slideshow;
Slideshow di immagini
Vetrina di immagini
Slider con testo
Immagine hover
- Vetrina;
- Slider con Testo;
- Immagine Hover.
Aggiungere un'immagine
Tramite l’editor puoi aggiungere delle immagine all’interno del tuo sito web.
1. Clicca a sinistra sulla barra degli Elementi;
2. Clicca su Media
3. Clicca su Immagine
4. Trascina il componente sull’area di lavoro
Puoi facilmente aggiungere o modificare la tua immagine.
1. Clicca sull’immagine
2. Clicca su Modifica Immagine
3. Clicca su Cerca Immagine se vuoi aggiungere o sostituire la tua immagine. Hai a disposizione tre opzioni:
- Puoi caricare un'immagine personale direttamente dal tuo pc
- Puoi caricare un’immagine da Pixabay. Inserisci una parola chiave nella barra di ricerca e seleziona l’immagine che preferisci
- Puoi caricare un’immagine dal tuo account Facebook
Da sapere: Tenendo premuto il tasto Shift della tastiera mentre esegui un ridimensionamento dell’immagine, permetti al sistema di mantenere le proporzioni dell’immagine, senza che venga tagliata accidentalmente.
Da sapere: se intendi mostrare l’immagine a tutto schermo, cliccando col tasto destro del mouse e posizionandoti su Dimensioni, troverai la funzione Larghezza 100%, che ti permette di mostrare la foto a pieno schermo. La dimensione modificata sarà solo la larghezza e non l’altezza, pertanto l’immagine potrebbe apparire tagliata su schermi molto grandi.
N.B.: Per ottimizzare le immagini con gli alt-tag, è necessario andare su Gestione Sito->Indicizzazione Sito. L’Alt Tag è uno strumento utilissimo per ottimizzare le immagini del tuo sito web in quanto descrive l’immagine e la funzione che l’immagine stessa ricopre all’interno della pagina. Google dà grande importanza all’Alt Tag perchè estrapola informazioni sull’immagine e sugli altri contenuti della pagina.
Per assegnare un Alt Tag, all’interno del pannello Indicizzazione Sito, troverai Ottimizzazione Immagini su ciascuna pagina. Inserisci qui la parola chiave nel campo apposito di ogni immagine e clicca infine su Salva. Ricorda che potrai assegnare un Alt Tag differente per ogni lingua del tuo sito web.
Aggiungere un link
1. Clicca sul componente Immagine
2. Clicca su Modifica Immagine
3. Clicca sull’icona catena
4. Puoi aggiungere quattro tipi di collegamento :
- Puoi collegare l’immagine a una pagina esistente del tuo sito
- Puoi collegare l’immagine a un link esterno
- Puoi collegare l’immagine a un componente presente nella stessa pagina
- Puoi collegare l’immagine a una pop up
Se decidi di collegare l'immagine ad un componente presente nella stessa pagina dovrai selezionare, dall'elenco, il componente da utilizzare come àncora del tuo link. Ti consiglio di utilizzare la funzionalità Livelli per trovare subito il componente giusto.
Parallax
Qui puoi attivare l'opzione Parallax, che consente di migliorare la percezione visiva fornendo una certa profondità di campo durante lo scorrere dell’immagine.
1. Clicca sul componente Immagine
2. Clicca sull’icona rotellina
3. Clicca su Parallax
4. Spunta su Attiva
Effetti al passaggio del mouse
Puoi scegliere un effetto da applicare alle immagini al passaggio del mouse.
1. Clicca sul componente Immagine
2. Clicca sull’icona rotellina
3. Clicca su Effetto al passaggio del mouse
4. Scegli l’effetto al passaggio del mouse
Overlay
È possibile inserire un colore in sovrimpressione o applicare una sfumatura attraverso la funzione Overlay.
1. Clicca sul componente Immagine
2. Clicca sull’icona rotellina
3. Clicca su Overlay
Cornici
Puoi aggiungere una cornice da applicare all’immagine scegliendo tra quelle proposte e modificandone il colore a piacere.
1. Clicca sul componente Immagine
2. Clicca sull’icona rotellina
3. Clicca su Cornici
Ombra
È possibile inserire un'Ombra, scegliendo il colore e il posizionamento dell'ombra stessa.
1. Clicca sul componente Immagine
2. Clicca sull’icona rotellina
3. Clicca su Ombra