01 Images

À la base de la création d'un site web, il y a un récit intense fait d'images et de photos.

Les images jouent un rôle important dans la structure graphique du site web, contribuant à l'expérience de navigation de l'utilisateur.

 

Pour cela, vous disposerez de divers composants d'images avec des fonctionnalités différentes, pour chacun de vos besoins :

 

- Image individuelle;
- Galerie;
- Carrousel;
- Diaporama;

    Diaporama d'images
    Vitrine d'images
    Curseur avec texte
    Image flottante
- Vitrine;
- Curseur avec texte;
- Image flottante.

​

 

Ajouter une image 

À travers l'éditeur, vous pouvez ajouter des images à l'intérieur de votre site web.

1. Cliquez à gauche sur la barre des Éléments;
2. Cliquez sur Média 
3. Cliquez sur Image 
4. Faites glisser le composant sur la zone de travail

Vous pouvez facilement ajouter ou modifier votre image.

1. Cliquez sur l'image 
2. Cliquez sur Modifier l'image
3. Cliquez sur Rechercher une image si vous souhaitez ajouter ou remplacer votre image. Vous avez trois options :

- Vous pouvez charger une image personnelle directement de votre ordinateur
- Vous pouvez charger une image depuis Pixabay. Entrez un mot-clé dans la barre de recherche et sélectionnez l'image de votre choix
- Vous pouvez charger une image depuis votre compte Facebook

À savoir: En maintenant la touche Shift du clavier en redimensionnant l'image, vous permettez au système de conserver les proportions de l'image, sans risque de coupure accidentelle.

À savoir: si vous souhaitez afficher l'image en plein écran, en cliquant avec le bouton droit de la souris et en vous positionnant sur Dimensions, vous trouverez la fonction Largeur à 100 %, qui vous permet d'afficher la photo en plein écran. La modification ne concernera que la largeur et non la hauteur, donc l'image pourrait sembler coupée sur des écrans très grands.

N.B.: Pour optimiser les images avec les balises alt, il est nécessaire de se rendre sur Gestion du site->Indexation du site. L'Alt Tag est un outil très utile pour optimiser les images de votre site web car il décrit l'image et la fonction qu'elle remplit dans la page. Google accorde une grande importance à l'Alt Tag car il extrait des informations sur l'image et les autres contenus de la page.
Pour attribuer un Alt Tag, dans le panneau Indexation du site, vous trouverez Optimisation des images sur chaque page. Saisissez ici le mot-clé dans le champ approprié de chaque image et cliquez enfin sur Enregistrer. N'oubliez pas que vous pourrez attribuer un Alt Tag différent pour chaque langue de votre site web.

Ajouter un lien

 

1. Cliquez sur le composant Image
2. Cliquez sur Modifier l'image
3. Cliquez sur l'icône de la chaîne
4. Vous pouvez ajouter quatre types de liaisons :

- Vous pouvez lier l'image à une page existante de votre site
- Vous pouvez lier l'image à un lien externe
- Vous pouvez lier l'image à un composant présent sur la même page
- Vous pouvez lier l'image à une pop-up 

 
Si vous décidez de lier l'image à un composant présent sur la même page, vous devrez sélectionner, dans la liste, le composant à utiliser comme ancre de votre lien. Je vous conseille d'utiliser la fonctionnalité Niveaux pour trouver rapidement le bon composant.

 

 

Parallax

 

Ici, vous pouvez activer l'option Parallaxe, qui permet d'améliorer la perception visuelle en offrant une certaine profondeur de champ pendant le défilement de l'image.

1. Cliquez sur le composant Image
2. Cliquez sur l'icône de roue crantée
3. Cliquez sur Parallaxe
4. Cochez Activer

 

 

Effets au survol de la souris

Vous pouvez choisir un effet à appliquer aux images au survol de la souris.

 

1. Cliquez sur le composant Image
2. Cliquez sur l'icône de roue crantée
3. Cliquez sur Effet au survol de la souris
4. Choisissez l'effet au survol de la souris

 

 

 

Superposition

 

Il est possible d'insérer une couleur en superposition ou d'appliquer un dégradé grâce à la fonctionnalité Superposition.

 

1. Cliquez sur le composant Image
2. Cliquez sur l'icône de roue crantée
3. Cliquez sur Superposition

 

 

 

Cadres

 

Vous pouvez ajouter un cadre à appliquer à l'image en choisissant parmi les options proposées et en modifiant la couleur à votre guise.

 

1. Cliquez sur le composant Image
2. Cliquez sur l'icône de roue crantée
3. Cliquez sur Cadres

 

 

 

Ombre

 

Vous pouvez ajouter une ombre, en choisissant la couleur et le positionnement de l'ombre elle-même.

1. Cliquez sur le composant Image
2. Cliquez sur l'icône de roue crantée
3. Cliquez sur Ombre