A la base de la realització d’un lloc web, hi ha un relat intens fet d’imatges i fotos.

Les imatges tenen un paper important en l’estructura gràfica del lloc web, contribuint a l’experiència de navegació de l’usuari.

Per això tindràs a disposició diversos components d’imatge amb funcionalitats diferents, per a cada necessitat:

- Imatge única;
- Galeria;
- Carrusel;
- Presentació;

    Presentació d’imatges
    Aparador d’imatges
    Slider amb text
    Imatge hover
- Aparador;
- Slider amb text;
- Imatge Hover.

Afegir una imatge 

Mitjançant l’editor pots afegir imatges dins del teu lloc web.

1. Fes clic a l’esquerra a la barra d’Elements;
2. Fes clic a Media 
3. Fes clic a Imatge 
4. Arrossega el component a l’àrea de treball

Pots afegir o modificar fàcilment la teva imatge.

1. Fes clic a la imatge 
2. Fes clic a Modifica imatge
3. Fes clic a Cerca imatge si vols afegir o substituir la teva imatge. Tens tres opcions:

- Pots pujar una imatge personal directament des del teu PC
- Pots pujar una imatge de Pixabay. Introdueix una paraula clau a la barra de cerca i selecciona la imatge que prefereixis
- Pots pujar una imatge des del teu compte de Facebook

A tenir en compte: Mantenint premuda la tecla Shift del teclat mentre redimensiones la imatge, permets al sistema mantenir-ne les proporcions, sense que es retalli accidentalment.

N.B: Per optimitzar les imatges amb els alt-tag, cal anar a Gestió del lloc->Indexació del lloc. L’Alt Tag és una eina molt útil per optimitzar les imatges del teu lloc web, ja que descriu la imatge i la funció que la mateixa imatge té dins la pàgina. Google dona molta importància a l’Alt Tag perquè n’extreu informació sobre la imatge i sobre els altres continguts de la pàgina.
Per assignar un Alt Tag, dins del panell Indexació del lloc, trobaràs Optimització d’imatges a cada pàgina. Introdueix aquí la paraula clau al camp corresponent de cada imatge i finalment fes clic a Desa. Recorda que podràs assignar un Alt Tag diferent per a cada idioma del teu lloc web.

Afegir un enllaç

1. Fes clic al component Imatge
2. Fes clic a Modifica imatge
3. Fes clic a la icona de cadena
4. Pots afegir quatre tipus d’enllaç :

- Pots enllaçar la imatge a una pàgina existent del teu lloc
- Pots enllaçar la imatge a un enllaç extern
- Pots enllaçar la imatge a un component present a la mateixa pàgina
- Pots enllaçar la imatge a una pop up 

 
Si decideixes enllaçar la imatge a un component present a la mateixa pàgina, hauràs de seleccionar, de la llista, el component que s’utilitzarà com a àncora del teu enllaç. Et recomano utilitzar la funcionalitat Nivells per trobar de seguida el component correcte.

Parallax

Aquí pots activar l’opció Parallax, que permet millorar la percepció visual aportant una certa profunditat de camp durant el desplaçament de la imatge.

1. Fes clic al component Imatge
2. Fes clic a la icona de rodeta
3. Fes clic a Parallax
4. Marca Activa

Efectes al pas del ratolí

Pots triar un efecte per aplicar a les imatges al pas del ratolí.

1. Fes clic al component Imatge
2. Fes clic a la icona de rodeta
3. Fes clic a Efecte al pas del ratolí
4. Tria l’efecte al pas del ratolí

Overlay

És possible inserir un color en superposició o aplicar un degradat mitjançant la funció Overlay.

1. Fes clic al component Imatge
2. Fes clic a la icona de rodeta
3. Fes clic a Overlay

Marcs

Pots afegir un marc per  aplicar a la imatge triant entre els proposats i canviant-ne el color al teu gust.

1. Fes clic al component Imatge
2. Fes clic a la icona de rodeta
3. Fes clic a Marcs

Ombra

És possible inserir una ombra, triant el color i la posició de la mateixa ombra.

1. Fes clic al component Imatge
2. Fes clic a la icona de rodeta
3. Fes clic a Ombra
 

A tenir en compte: si vols mostrar la imatge a pantalla completa, fent clic amb el botó dret del ratolí i anant a Dimensions, trobaràs la funció Amplada 100%, que et permet mostrar la foto a pantalla completa. La mida modificada serà només l’amplada i no l’alçada; per tant, la imatge podria aparèixer retallada en pantalles molt grans.