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.
Cliquez sur l’icône à l’endroit où vous souhaitez ajouter le composant
Dans le sélecteur de composant cliquez sur Diaporama
Editez le composant en cliquant dessus
Cliquez sur Ajouter un élément puis sur l’icône pour l’éditer
Ajoutez une image. Pour en savoir plus l’ajout d’image, veuillez consulter Gérer les média
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 :
Cliquez, maintenez et déplacez l’élément que vous souhaitez déplacer
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.
Vous pouvez modifier les styles de ces différentes options depuis Design > Styles. Pour en savoir plus sur la personnalisation des styles, consultez Styles
à l’endroit où vous souhaitez ajouter le composant
pour l’éditer
à droite.