Comment utiliser les composants galerie et curseur d’image dans Website Builder

Vous souhaitez afficher plusieurs images sur votre site web ? Avec les composants galerie et curseur d’image de Website Builder, vous pouvez insérer plusieurs images dans une grille ou les organiser dans un diaporama. Ce guide vous montrera comment ajouter les composants à votre page et les ajuster selon vos préférences.

• Insérer un composant sur votre site
• Modifier les images et en ajouter de nouvelles
• Paramètres des composants galerie et curseur d’image

Insérer un composant sur votre site

1. Ouvrez Website Builder depuis le panneau de configuration one.com.
2. Accédez à galerie dans le menu de gauche et sélectionnez une variante de galerie.
3. Faites glisser le composant souhaité sur votre espace de travail et déposez-le à l’endroit où vous souhaitez placer votre galerie ou votre curseur.
4. Sélectionnez les images que vous souhaitez insérer ou téléchargez-les à partir de votre ordinateur ou d’une URL externe. Cliquez sur Ajouter à la page en bas de la fenêtre contextuelle.
5. Ajustez la taille et l’emplacement du composant à votre guise.
6. Cliquez sur Paramètres de la galerie/Paramètres du curseur d’image en haut du composant pour ajuster les paramètres de votre galerie.
7. Cliquez sur Enregistrer et Publier pour rendre les images visibles sur votre site.

Modifier les images et en ajouter de nouvelles.

Lorsque vous cliquez sur le composant inséré, deux onglets apparaissent : Paramètres Galerie/curseur d’images et Modifier les images.

Cliquez sur l’onglet Modifier les images pour modifier les images de votre galerie. Vous pouvez supprimer une image en cliquant sur l’icône de la corbeille dans le coin de celle-ci, ou la modifier en cliquant sur l’icône du crayon. Vous pouvez également ajouter de nouvelles images à la galerie en cliquant sur Ajouter des images dans le coin supérieur droit..

Note: Le titre de l’image fait également office de texte alternatif dans ces composants. Si vous souhaitez ajouter un texte alternatif, vous pouvez le faire sous Titre (alt) sur le côté droit dans le Trier et modifier les images aperçu.

Paramètres des composants galerie et curseur d’image

Deux menus s’affichent lorsque vous cliquez sur l’onglet Paramètres du composant. Ici, vous pouvez modifier les options suivantes :

Composant de la galerie :

1 - Menu haut/bas

• Colonnes- Ajustez le nombre de colonnes.
• Espacement- Ajustez l’espace blanc entre les images.
• Recadrer - Cochez cette case si les images doivent être recadrées, afin qu’elles aient toutes la même taille dans la galerie.
• Vue compacte - Cochez cette case si vous souhaitez que les images soient aussi proches que possible dans les marges bleues.
• Pleine largeur - Cochez cette case si vous souhaitez que la galerie s’étende sur toute la largeur de votre page.

2 - Menu flottant

• Au clic - Sélectionnez ce qui doit se passer lorsqu’un utilisateur clique sur l’image. Ne choisissez rien, affichez une image plus grande ou ouvrez un lien.
• Légendes - Sélectionnez si vous souhaitez ajouter des légendes aux images de la galerie. Cliquez sur « Gérer les légendes » pour saisir du texte et du texte alternatif. Choisissez si une légende doit être alignée à gauche, à droite ou centrée. Vous pouvez également choisir le style de légende - les options ici sont classique, modèle et personnalisé.
• Style d’image - Ici, vous pouvez modifier le rapport de votre image, par exemple, en paysage ou en portrait. Vous pouvez également ajouter des bordures et des coins arrondis.
• Pleine largeur - Ici, vous pouvez ajuster toute la largeur de la galerie pour qu’elle soit à l’extérieur des marges bleues (pleine largeur) ou à l’intérieur de celles-ci (par défaut).

Composant du curseur d’image :

1 - Menu haut/bas

• Colonnes - Ajustez le nombre de colonnes (1-5) dans le curseur. Dans la capture d’écran, nous avons sélectionné d’en avoir trois.
• Transition - Choisissez entre un effet de glissement ou de fondu pour la transition entre les images.
• Recadrer - Vous pouvez choisir de recadrer chacune de vos images afin qu’elles aient la même taille dans le slider. Le recadrage sera toujours actif si vous avez plusieurs images (colonnes) par diapositive.
• Vitesse - Choisissez la vitesse de transition de l’image. Le minimum est de 1 seconde et le maximum est de 15.
• Pleine largeur - Choisissez si vous souhaitez afficher vos images en pleine largeur. Cette fonction n’est disponible que si vous n’avez qu’une seule colonne d’images par diapositive.

2. Menu flottant

• Navigation - Choisissez si les images doivent se décaler automatiquement, et ajustez ou masquez les flèches de navigation et l’indicateur.
• Au clic - Sélectionnez ce qui doit se passer lorsqu’un client clique sur une image. Choisissez « rien », affichez une image plus grande ou ouvrez un lien.
• Légendes - Indiquez si les légendes doivent être affichées avec les images. En cochant cette zone, vous disposez de plus d’options de personnalisation : ajoutez des légendes et choisissez l’alignement et le placement.
• Pleine largeur - Si vous n’avez qu’une seule colonne, vous pouvez ajuster la largeur du curseur pour qu’il soit à l’extérieur des marges bleues (pleine largeur) ou à l’intérieur de celles-ci (par défaut).

Articles connexes:

• Comment modifier une image dans Website Builder ?
• Comment insérer une image ?