Diaporama

Pour commencer

Utiliser le composant Diaporama pour créer des diaporamas d'image dynamiques. Le composant Diaporama est un composant multiple composé de sous éléments.

Le composant diaporama peut-être utilisé pour créer de simples diaporamas d'images mais vous pouvez aussi ajouter du contenu sur les images qui composent votre diaporama.

Ajouter un Diaporama

1. Editez votre page
2. Cliquez sur l'icône  à l'endroit où vous souhaitez ajouter le composant
3. Dans le sélecteur de composant cliquez sur Diaporama 
4. Editez le composant en cliquant dessus
5. Cliquez sur Ajouter un élément puis sur l'icône  pour l'éditer
6. Ajoutez une image. Pour en savoir plus l'ajout d'image, veuillez consulter Gérer les média
7. Prévisualisez le résultat

Réorganiser les éléments du Diaporama

Vous pouvez réorganiser l'ordre des éléments au sein du composant par glisser/déposer :

1. Cliquez, maintenez et déplacez l'élément que vous souhaitez déplacer
2. Relâchez-le lorsque celui ci se trouve à la position désirée

Supprimer un élément du Diaporama

Pour supprimer un élément survolez le et cliquez sur l'icône  à droite.

Options de l'élément de Diaporama

Chaque sous-élément dispose de ses propres options.

Option	Description
Image	L'image affichée pour l'élément du diaporama
Balise Alt	La balise Alt de l'image. Pour en savoir plus sur la balise Alt, veuillez consulter Image
Titre	Le titre à afficher en surimpression de l'image (facultatif)
Meta	Le texte meta à afficher en surimpression de l'image (facultatif)
Contenu	Le contenu à afficher en surimpression de l'image (facultatif)
Lien	Un lien à appliquer à l'élément (facultatif)
Texte du lien	Le label du lien de l'élément (facultatif). Si vide, utilise le label renseigné dans les Paramètres du composant
Couleur	Régler une couleur différente pour cet élément (facultatif). Valable uniquement si le style Superposition est sur None dans les paramètres du composant

Paramètres du composant Diaporama

Ces options s'appliquent au composant et à l'ensemble des sous-éléments. Par défaut seules les options de base sont affichées. Vous pouvez activer les options avancées en cliquant sur le bouton du même nom en haut à droite de l'onglet Paramètres.

Taille

Option	Description
Hauteur	Définissez la hauteur du diaporama. Auto (la hauteur s'adapte au contenu), Viewport (la hauteur occupe 100% de la fenêtre du navigateur), Viewport minus the following section (la hauteur occupe 100% de la fenêtre du navigateur - la hauteur de la section suivante), Viewport minus 20% (la hauteur occupe 100% de la fenêtre du navigateur - 20%)
Ratio	Les proportions du diaporama sous la forme 16:9 ou 4:3 ou 1:1. Vous pouvez aussi renseigner les dimensions de vos image 1920:1200
Hauteur mini	La hauteur minimum du diaporama quelque soit son ratio
Hauteur maxi	La hauteur maximum du diaporama quelque soit son ratio

Animation

Option	Description
Transition	Sélectionnez l'effet de transition a appliquer aux éléments lors du défilement
Lecture auto	Activer la lecture automatique du diaporama
Pause au survol	Stop l'animation lorsque le curseur se trouve au dessus du diaporama
Durée	La durée d'affichage d'une image en seconde avant de passer à la suivante

Navigation

Option	Description
Navigation	Sélectionnez si vous souhaitez afficher ou non la navigation
Afficher sous le diaporama	Par défaut la navigation est affichée au centre sous le diaporama. Vous pouvez contrôler cette position
Navigation verticale	Par défaut la navigation est horizontal. Vous pouvez la passer en mode verticale
Couleur	La couleur de la navigation
Marges externes	Les marges autour de la navigation
Position	La position de la navigation par rapport au diaporama
Visibilité	L'option permet de masquer la navigation sur les écrans plus grands qu'une largeur spécifiée. Par exemple vous voudrez peut-être masquer cette navigation sur la version smartphone de votre site. Prévisualisez en temps réel en simulant une taille de fenêtre en bas du panneau de contrôle.

Slidenav

Option	Description
Position	Sélectionnez si vous souhaitez afficher les icônes précédent et suivant. Déterminez la position par rapport au diaporama
Style large	Appliquer le style plus large
Afficher au survol	Afficher uniquement les icônes précédent et suivant au survol du diaporama
Marges externes	Les marges autour des icônes précédent et suivant
Visibilité	L'option permet de masquer la navigation sur les écrans plus grands qu'une largeur spécifiée. Par exemple vous voudrez peut-être masquer cette navigation sur la version smartphone de votre site. Prévisualisez en temps réel en simulant une taille de fenêtre en bas du panneau de contrôle.

Superposition

Option	Description
Style	Sélectionnez le style à appliquer au bloc de superposition accueillant les titre, meta, contenu, lien
Marges externes	Les marges externes du bloc de superposition
Marges internes	Les marges internes du bloc de superposition
Position	La position du bloc par rapport à l'image
Alignement vertical	L'alignement vertical du contenu du bloc de superposition
Largeur	La largeur maximale du bloc
Alignement	L'alignement horizontal du content
Animation	L'animation à appliquer au bloc

 Titre

Option	Description
Élément	Définissez l'élément HTML à utiliser pour le titre
Style	Appliquer un Style au titre
Décoration	Appliquez une décoration au titre
Couleur	Appliquez une couleur prédéfinie au titre
Marge au dessus	Fixer la marge au dessus du titre

Meta

Option	Description
Style	Sélectionnez le style du texte meta
Couleur	Appliquez une couleur prédéfinie
Marge au dessus	Fixer la marge au dessus du texte meta
Position	La position du texte meta par rapport au titre

 Contenu

Option	Description
Taille	La taille utilisée pour le texte du contenu
Marge au dessus	Fixer la marge au dessus du contenu

Lien

Option	Description
Texte du lien	Le texte du bouton. Peut-être personnalisé par élément au niveau des paramètres de l'élément lui-même.
Style	Le style du bouton
Taille	Sélectionnez la taille du bouton
Marge au dessus	Fixer la marge au dessus du lien

Général

Veuillez consulter Options générales des composants

Vous pouvez modifier les styles de ces différentes options depuis Design > Styles. Pour en savoir plus sur la personnalisation des styles, consultez Styles

Avancé

Veuillez consulter Options avancées des composants