Média - Curseur
Utilisez le type de contenu Curseur pour ajouter un diaporama d’images à l’ Page Builder étape. Vous pouvez télécharger de nouvelles images ou sélectionner des images existantes dans la galerie ou le catalogue de produits. Un curseur peut être défini pour une lecture automatique ou être contrôlé manuellement à l’aide des boutons de navigation. Pour associer le curseur à une promotion spécifique, voir Bloc dynamique.
{width="700" modal="regular"}
Toolbox
Lorsque vous utilisez le type de contenu Curseur , vous ajoutez et modifiez des diapositives individuelles et le conteneur de curseur qui contient une ou plusieurs diapositives. Chaque diapositive possède sa propre boîte à outils que vous utilisez pour concevoir des diapositives sur la scène Page Builder.
Barre d’outils de diapositives individuelle
{width="500" modal="regular"}
Boîte à outils du curseur
Ajouter une diapositive individuelle
-
Ouvrez la page, le bloc ou le bloc dynamique où vous souhaitez placer le curseur et développez la section Content.
-
Dans le panneau Page Builder, développez Media et faites glisser un espace réservé Slider sur une ligne, une colonne ou un onglet de la scène.
Dans l’exemple suivant, la couleur d’arrière-plan de la ligne est jaune (
#fffd16
).{width="600" modal="regular"}
Le conteneur de curseur s’affiche sur l’scène avec une seule diapositive vide.
-
Cliquez dans le conteneur de curseur pour afficher l’ éditeur de texte et saisissez le contenu de la première diapositive.
Vous pouvez également inclure un contenu de bannière plus complexe à l’aide des paramètres Content .
-
Cliquez sur le point de navigation au bas du curseur pour afficher la boîte à outils de la diapositive individuelle, puis sélectionnez l’icône Paramètres ( {width="20"} ).
Les curseurs ont deux boîtes à outils. Assurez-vous que vous utilisez la boîte à outils de la diapositive en bas.
-
Définissez les paramètres selon les besoins, en fonction des sections suivantes :
-
Une fois l’opération terminée, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.
Ajouter d’autres diapositives
Les sections suivantes décrivent une série d’étapes pour commencer avec une diapositive individuelle et créer un curseur réactif qui présente des produits spécifiques et fournit des liens vers ces produits. Si vous ne disposez pas déjà d’une diapositive individuelle, suivez les instructions précédentes pour ajouter une diapositive individuelle à la scène.
Pour ajouter des diapositives, utilisez une ou plusieurs des méthodes suivantes :
Méthode 1 : duplication d’une diapositive existante
Vous pouvez gagner du temps en dupliquant une diapositive qui a déjà été configurée avec les paramètres nécessaires.
-
Cliquez sur le point de navigation sous la diapositive pour afficher la boîte à outils et sélectionnez l’icône Dupliquer ( {width="20"} ).
{width="500" modal="regular"}
-
Cliquez sur le point de navigation de la nouvelle diapositive et pour afficher la boîte à outils, choisissez l’icône Paramètres ( {width="20"} ).
-
Modifiez les paramètres selon les besoins, en fonction des sections suivantes :
-
Une fois l’opération terminée, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.
Méthode 2 : ajouter une nouvelle diapositive vierge
-
Pointez sur le conteneur de curseur en haut pour afficher la boîte à outils et sélectionnez l’icône Ajouter ( {width="20"} ).
{width="500" modal="regular"}
Une nouvelle diapositive vierge avec son propre point de navigation et sa propre boîte à outils est ajoutée au curseur et s’affiche sur la scène.
{width="500" modal="regular"}
-
Cliquez sur le point de navigation de la nouvelle diapositive et pour afficher la boîte à outils, choisissez l’icône Paramètres ( {width="20"} ).
-
Modifiez les paramètres selon les besoins, en fonction des sections suivantes :
-
Une fois l’opération terminée, cliquez sur Save dans le coin supérieur droit pour fermer la page Edit Slide.
Ajout d’un widget sur une diapositive
Vous pouvez ajouter n’importe quel type de widgets à votre diapositive dans une étape Page Builder en suivant les étapes suivantes :
-
Créez le widget que vous souhaitez afficher sur une diapositive.
-
Ouvrez la page, le bloc ou le bloc dynamique où vous souhaitez placer le curseur et développez la section Content.
-
Dans le panneau Page Builder, développez Media et faites glisser un espace réservé Slider sur une ligne, une colonne ou un onglet de la scène.
-
Cliquez dans le conteneur de curseur pour afficher la barre d’outils de l’éditeur de texte et cliquez sur l’icône Insérer un widget ( {width="20"} ).
-
Sélectionnez le Widget Type dont vous avez besoin.
-
Spécifiez les paramètres, qui sont différents selon le type de widget.
{width="600" modal="regular"}
-
Une fois l’opération terminée, cliquez sur Insert Widget dans le coin supérieur droit.
-
Modifiez les autres paramètres selon les besoins.
-
Une fois l’opération terminée, cliquez sur Save dans le coin supérieur droit.
{width="600" modal="regular"}
Afficher chaque diapositive
Pour afficher chaque diapositive sur la scène, cliquez sur le point suivant sous la diapositive actuellement affichée.
{width="500" modal="regular"}
La diapositive de l’exemple précédent comporte une image d’arrière-plan, une image mobile transparente et une image intégrée qui a été ajoutée à partir de l’éditeur de texte. Cette technique fonctionne bien sur les appareils mobiles en désactivant l’image d’arrière-plan et en n’affichant que la plus petite image intégrée. La diapositive de produit de cet exemple comporte les paramètres supplémentaires suivants :
Collage Right
#ffffff
(Blanc)Auto
Minerva LumaTech™ V-Tee
(Aligner au centre) avec l’image insérée mise à l’échelle à 40 % (Aligner au centre)Product
Always
Buy Now
Never Show
Center
(pour aligner le bouton)Solid
#000000
(Noir)1 px
Modification des paramètres de diapositives
-
Modifiez l’affichage du curseur sur la scène et affichez la diapositive que vous souhaitez modifier.
-
Dans la boîte à outils individuelle des diapositives, sélectionnez l’icône Paramètres ( {width="20"} ) et renseignez les paramètres, selon les besoins, selon les sections suivantes.
-
Dans le coin supérieur droit, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.
Appearance
-
Sélectionnez l’un des types de placement de diapositives suivants :
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto Type Description Poster
Centre le contenu de la diapositive dans le conteneur de curseur. Le recouvrement, s’il est utilisé, étend la largeur totale du curseur. Collage Left
Place le contenu des diapositives dans une zone définie sur le côté gauche du conteneur de curseur. Le recouvrement, s’il est utilisé, ne couvre que la zone définie. Collage Center
Place le contenu des diapositives dans une zone définie centrée sur le conteneur de curseur. Le recouvrement, s’il est utilisé, ne couvre que la zone définie. Collage Right
Place le contenu des diapositives dans une zone définie sur le côté droit du conteneur de curseur. Le recouvrement, s’il est utilisé, ne couvre que la zone définie. {width="600" modal="regular"}
-
Saisissez le Slide Name.
Lorsque vous travaillez en mode d’édition, le nom de la diapositive s’affiche sous forme d’info-bulle au-dessus du point de navigation. Le nom de la diapositive n’est pas visible à partir du storefront.
{width="500" modal="regular"}
-
Saisissez le Minimum Height de la diapositive.
La hauteur minimale peut être un nombre avec n’importe quelle unité CSS valide (telle que
100px
,50%
,50em
,100vh
) ou un calcul (telle que100vh - 237px
).Par exemple, vous pouvez définir la hauteur minimale de la diapositive pour couvrir la hauteur totale de la page, puis utiliser des images et des vidéos d’arrière-plan pour des options de conception attrayantes.
note note NOTE Lorsque la diapositive est définie sur la pleine hauteur de la page (100 vh), le curseur qui contient la diapositive étend également la pleine hauteur de la page pour s’adapter à la hauteur de la diapositive.
Background
Il existe de nombreuses options pour définir l’affichage en arrière-plan d’une diapositive. Vous pouvez appliquer une simple couleur ou une image d’arrière-plan et gérer des effets plus sophistiqués.
Background Color
Spécifiez la couleur d’arrière-plan en choisissant un échantillon, en cliquant sur le sélecteur de couleurs ou en saisissant un nom de couleur valide ou une valeur hexadécimale équivalente. Ce paramètre détermine la couleur d’arrière-plan de la ligne. Vous pouvez également régler l’opacité de la couleur.
{width="200"}
Vous pouvez définir la valeur de l’une des trois façons suivantes :
- Un nom de couleur prédéfini, tel que
White
- La valeur de couleur hexadécimale de la couleur, par exemple
#ffffff
- La valeur rgba de la couleur, avec le pourcentage d’opacité, comme
rgba(255, 255, 255, 0.75)
Si vous souhaitez choisir une couleur, cliquez sur l’échantillon à gauche de la zone Aucune couleur.
{width="600" modal="regular"}
Si vous cliquez sur la zone de couleur pour ouvrir à nouveau le sélecteur de couleurs, la zone située sous le curseur affiche les valeurs actuelles rouge, vert, bleu et alpha (rgba). Le dernier chiffre indique le pourcentage d’opacité actuel sous forme décimale. Vous pouvez utiliser le curseur pour ajuster l’opacité ou saisir la valeur décimale souhaitée.
{width="600" modal="regular"}
Background Type
Un type d’arrière-plan peut être une image ou une vidéo. Page Builder est défini par défaut sur Image
et affiche divers paramètres d’image. Si vous sélectionnez Video
, Page Builder permute les paramètres de l’image avec les paramètres vidéo. Les deux paramètres de type d’arrière-plan sont décrits dans les sections suivantes.
{width="400"}
Paramètres de type d’image
Si vous définissez Background Type sur Image
, utilisez les paramètres suivants pour définir l’affichage de l’image d’arrière-plan.
{width="600" modal="regular"}
-
Background Image - Si nécessaire, utilisez les outils fournis pour choisir une image d’arrière-plan à appliquer à la bannière :
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Outil Description Upload Télécharge un fichier image de l’ordinateur local vers la galerie, puis l’applique comme image d’arrière-plan de la bannière. Select from Gallery Vous invite à choisir une image existante de la galerie comme image d’arrière-plan de la bannière. {width="25"} Permet de faire glisser l’image sur la mosaïque de l’appareil photo ou de naviguer jusqu’à l’image dans votre système de fichiers local. -
Background Mobile Image - Si nécessaire, utilisez les mêmes outils pour choisir une image d’arrière-plan différente à utiliser pour l’affichage sur les appareils mobiles.
-
Background Size - Choisissez la mise à l’échelle de l’image d’arrière-plan par rapport à la largeur de la bannière :
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Option Description Cover
L’image d’arrière-plan couvre toute la largeur de la bannière. Contain
L’image d’arrière-plan est limitée à la largeur de la zone de contenu. Auto
Applique la taille de la feuille de style actuelle. {width="400"}
-
Background Position - Choisissez la manière dont l’image d’arrière-plan est ancrée par rapport à la bannière :
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Point d’ancrage Position Top
Gauche/Centre/Droite Center
Gauche/Centre/Droite Bottom
Gauche/Centre/Droite Le point d’ancrage est semblable à une épingle push qui attache l’image à la bannière à la position d’arrière-plan spécifiée.
-
Background Repeat - Si vous souhaitez répéter l’image d’arrière-plan pour remplir l’espace, modifiez ce paramètre
Yes
.
Paramètres de type vidéo
Si vous définissez le Type d’arrière-plan sur Video
, utilisez les paramètres suivants pour définir l’affichage de l’image d’arrière-plan.
-
Video URL - Entrez une URL de vidéo valide. Les URL de vidéo valides peuvent être des liens vers :
- Vidéos YouTube :
https://youtu.be/CoDhMRUUjeI
- Vidéos Vimeo :
https://vimeo.com/190156113
- Fichiers vidéo valides (
.mp4
recommandé) :https://myvideos.com/spiral.mp4
{width="500"}
- Vidéos YouTube :
-
Overlay Color - Sélectionnez une couleur pour appliquer une teinte transparente à la vidéo.
-
Infinite Loop - Définissez cette variable sur
No
pour que la vidéo soit lue une fois et s’arrête. Lorsque cette option est définie surYes
(valeur par défaut), la vidéo se répète en boucle infinie. -
Lazy Load - Défini sur
No
pour que la vidéo se charge avec la page, même lorsqu’elle n’est pas visible. Lorsque cette option est définie surYes
(par défaut), la vidéo se charge à partir de la source uniquement lorsqu’elle est visible à l’écran. -
Play Only When Visible - Définissez cette variable sur
No
pour que la lecture de la vidéo démarre immédiatement après son chargement, qu’elle soit visible ou non. Lorsque cette option est définie surYes
(valeur par défaut), la lecture de la vidéo démarre uniquement lorsqu’elle est visible. -
Fallback Image - Si nécessaire, spécifiez une image à afficher à l’écran avant le chargement de la vidéo et si la vidéo ne se charge pas pour une raison quelconque.
Content
Vous pouvez modifier le contenu de la diapositive directement sur la scène ou lorsque vous modifiez les paramètres. Les paramètres fournissent des fonctions de contenu plus complexes, telles que des liens de diapositives, des boutons et des superpositions. La position du contenu reflète le paramètre d’emplacement Apparence.
Contenu simple sur scène
-
Cliquez sur l’espace réservé ou le texte existant et saisissez le nouveau texte que vous souhaitez afficher sur la diapositive.
La barre d’outils de l’éditeur s’affiche au-dessus de la zone de texte.
-
Utilisez la barre d’outils de l’éditeur pour saisir et mettre en forme du texte, ainsi que des éléments à insérer, tels que des liens, des images et des widgets.
{width="500" modal="regular"}
Contenu complexe dans les paramètres
-
Cliquez sur le point de navigation au bas du curseur pour afficher la boîte à outils de la diapositive individuelle, puis sélectionnez l’icône Paramètres ( {width="20"} ).
-
Dans la section Content, saisissez le Message Text que vous souhaitez afficher avec la diapositive.
-
Faites défiler l’écran jusqu’à la section Content et utilisez l’éditeur Message Text pour saisir et mettre en forme le texte de bannière.
Vous pouvez également insérer des éléments, tels que des liens de texte, des images et des widgets.
-
Mettez le texte en forme selon les besoins à l’aide de la barre d’outils de l’éditeur.
La première diapositive de cet exemple comporte une image d’arrière-plan, mais aucun texte de message. Le texte
Buy 3 Get 1 Free
situé au-dessus du curseur se trouve dans un conteneur de texte (ajouté ultérieurement). -
Si nécessaire, spécifiez un Link pour la diapositive.
Le lien est la page de destination qui s’affiche lorsque le client clique sur la zone de la diapositive. Vous pouvez utiliser l’un des trois types de liens suivants :
-
URL - Liens vers une URL relative ou complète.
-
Product - Identifie la page de destination en fonction du nom du produit ou du SKU. Recherchez le produit par nom en fonction d’un nom partiel ou complet. Sélectionnez le produit dans la liste des résultats de recherche.
{width="600" modal="regular"}
-
Category - Identifie la page de destination en tant que catégorie ou sous-catégorie spécifique dans l’arborescence des catégories. Recherchez la catégorie selon un nom partiel ou complet. Sélectionnez la catégorie dans la section développée de l'arborescence affichée.
{width="600" modal="regular"}
-
Page - Identifie la page de destination en tant que page de contenu spécifique. Recherchez la page en fonction d’un nom partiel ou complet. Sélectionnez la page dans la liste des résultats de recherche.
{width="600" modal="regular"}
À compter de la version 2.4.1, Page Builder ne prend plus en charge la liaison de la diapositive et des liens dans le texte imbriqué en raison de problèmes d’affichage sur le storefront. Si vous utilisez un lien dans le _Message Text_, vous ne pouvez pas configurer l’option _Link_ . Si vous préférez utiliser un lien unique pour toute la diapositive, vous pouvez supprimer tous les liens du texte.
{width="300"}
Si vous souhaitez empêcher le visiteur de quitter votre boutique, cochez la case Open in new tab . Lorsque la case à cocher est décochée, la destination liée s’ouvre dans le même onglet du navigateur, ce qui peut permettre de faire quitter votre boutique au visiteur.
-
-
Au besoin, ajoutez un bouton pour inviter les clients à suivre le lien.
La position de la diapositive Apparence place un lien ou un bouton unique sous le texte. Renseignez les propriétés du lien ou du bouton à ajouter.
{width="600" modal="regular"}
note note NOTE Vous pouvez également utiliser plusieurs boutons ou liens en ajoutant un bloc à la bannière. Pour éviter tout conflit, conservez tous les liens ou boutons dans le bloc séparé, sans ajouter directement de lien ou de bouton à la bannière. -
Définissez Show Button sur l’une des options suivantes :
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Option Description Always
Un bouton apparaît toujours sur la diapositive. On Hover
Un bouton s’affiche sur la diapositive uniquement lorsque vous survolez. Never Show
Un bouton n’apparaît jamais sur la diapositive. -
Saisissez le Button Text à afficher sur le bouton.
-
Définissez Button Type sur l’une des options suivantes :
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Option Description Primary
Applique le style de bouton principal à partir de la feuille de style active. Secondary
Applique le style de bouton secondaire à partir de la feuille de style active, le cas échéant. Link
Crée un lien hypertexte plutôt qu’un bouton. Le style du bouton du thème actif détermine le format du bouton. En règle générale, un bouton principal a une couleur d’arrière-plan plus visible qu’un bouton secondaire.
-
-
Définissez Show Overlay sur l’une des options suivantes :
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Option Description Always
La superposition est toujours visible. On Hover
La superposition s’affiche uniquement lorsque vous pointez dessus. Never Show
La superposition n’est pas visible. Vous pouvez utiliser une superposition pour appliquer une couleur d’arrière-plan à la zone de contenu active définie par le paramètre Apparence . L’image d’arrière-plan de la diapositive reste visible pendant toute la largeur de la diapositive.
{width="600" modal="regular"}
Si vous choisissez d’afficher une superposition, définissez le Overlay Color :
- Cliquez sur l’échantillon Aucune couleur et choisissez un échantillon.
- Dans le champ Color, saisissez un nom de couleur valide ou une valeur hexadécimale.
{width="600" modal="regular"}
Search Engine Optimization seo
Le texte de ces paramètres est visible par les moteurs de recherche et améliore la manière dont la page est indexée.
-
Pour Alternative Text, saisissez une description textuelle alt pour les outils d’accessibilité numérique à afficher.
L’utilisation de texte de remplacement est une bonne pratique en matière d’accessibilité. Elle est requise par la loi dans certains paramètres régionaux. En HTML, l’attribut
alt
est un sous-ensemble de la baliseimage
:<image title="tooltip" alt="description" src="image.jpg">
. -
Pour Title Attribute, saisissez le texte à afficher sous forme d’info-bulle lorsque vous pointez dessus.
Il est recommandé de choisir un titre descriptif et riche en mots-clés afin d’améliorer l’indexation de l’image par les moteurs de recherche. En HTML, l’attribut
title
est un sous-ensemble de la baliseimage
:<image title="tooltip" alt="description" src="image.jpg">
.
Advanced
-
Pour contrôler le positionnement horizontal du contenu ajouté à la diapositive, choisissez le Alignment :
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto Option Description Default
Applique le paramètre d’alignement par défaut spécifié dans la feuille de style du thème actif. Left
Aligne le contenu le long de la bordure gauche de la diapositive, en tenant compte de la marge intérieure qui est spécifiée. Center
Aligne le contenu au centre de la diapositive, en tenant compte de la marge intérieure qui est spécifiée. Right
Aligne le contenu le long de la bordure droite de la diapositive, en tenant compte de la marge intérieure qui est spécifiée. -
Définissez le style Border appliqué aux quatre côtés de la diapositive :
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto Option Description Default
Applique le style de bordure par défaut spécifié par la feuille de style associée. None
Ne fournit aucune indication visible des bordures de la diapositive. Dotted
La bordure du conteneur s’affiche sous la forme d’une ligne pointillée. Dashed
La bordure du conteneur s’affiche sous la forme d’une ligne en pointillés. Solid
La bordure du conteneur s’affiche sous la forme d’une ligne pleine. Double
La bordure du conteneur s’affiche sous la forme d’une ligne double. Groove
La bordure du conteneur s’affiche sous forme de ligne droite. Ridge
La bordure du conteneur s’affiche sous la forme d’une ligne à droite. Inset
La bordure du conteneur s’affiche sous la forme d’une ligne d’insertion. Outset
La bordure du conteneur apparaît comme une ligne de départ. -
Si vous définissez un style de bordure autre que
None
, renseignez les options d’affichage de la bordure :{width="600" modal="regular"}
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Option Description Border Color Définissez la couleur en choisissant un échantillon, en cliquant sur le sélecteur de couleurs ou en saisissant un nom de couleur valide ou une valeur hexadécimale équivalente. Border Width Saisissez le nombre de pixels pour la largeur de la ligne de bordure. Border Radius Saisissez le nombre de pixels pour définir la taille du rayon utilisé pour arrondir chaque coin de la bordure. -
(Facultatif) Indiquez les noms de CSS classes dans la feuille de style actuelle à appliquer à la diapositive.
Séparez plusieurs noms de classe par un espace.
-
Saisissez des valeurs, en pixels, pour que Margins and Padding précise les marges extérieures et la marge intérieure de la diapositive.
Saisissez chaque valeur correspondante dans le diagramme de diapositives.
table 0-row-2 1-row-2 2-row-2 layout-auto Zone de conteneur Description Margins Espace blanc appliqué au bord extérieur de tous les côtés de la diapositive. Padding Espace blanc appliqué au bord intérieur de tous les côtés de la diapositive.
Ajout d’un titre de curseur
Si vous souhaitez un titre au-dessus du curseur, ajoutez simplement un [Type de contenu texte] au-dessus du curseur. Mettez ensuite le texte en forme selon vos besoins.
-
Dans le panneau Page Builder, développez Elements et faites glisser un espace réservé Texte sur une ligne, une colonne ou un ensemble d’onglets sur la scène.
Lorsque vous faites glisser le curseur, une ligne directrice rouge marque le point d’insertion au-dessus du curseur.
{width="600" modal="regular"}
-
Utilisez l’éditeur pour mettre en forme le texte selon vos besoins.
{width="500" modal="regular"}
Modification des paramètres du curseur
-
Pointez sur le conteneur de curseur pour afficher la boîte à outils principale et sélectionnez l’icône Paramètres ( {width="20"} ).
{width="500" modal="regular"}
-
Saisissez le Minimum Height de la diapositive.
La hauteur minimale peut être un nombre avec n’importe quelle unité CSS valide (telle que
100px
,50%
,50em
,100vh
) ou un calcul (telle que100vh - 237px
).Vous pouvez, par exemple, définir la hauteur minimale d’un curseur pour étirer la hauteur totale de la page, ce qui vous donne des options attrayantes pour les images et vidéos d’arrière-plan de la page entière.
{width="400"}
-
Si vous souhaitez que le curseur commence au chargement de la page, définissez Autoplay sur
Yes
et Autoplay Speed sur le nombre de millisecondes entre les diapositives.Par défaut, la vitesse est définie sur 4 000 ms, soit quatre secondes. Si vous définissez la lecture automatique sur
No
, la première diapositive s’affiche par défaut et le client doit cliquer sur la navigation dans la diapositive (points ou flèches) pour afficher la diapositive suivante en séquence.{width="600" modal="regular"}
-
Pour lisser la transition d'une diapositive à la suivante, définissez Fade sur
Yes
.Avec le fondu, les diapositives semblent rester en place, mais le contenu change en douceur d’une diapositive à l’autre. Sans fondu, vous voyez le mouvement horizontal d'une diapositive à l'autre.
{width="600" modal="regular"}
-
Pour que le diaporama se répète indéfiniment pendant l’ouverture de la page, définissez Infinite Loop sur
Yes
. -
Pour choisir le type de commandes de navigation du curseur, procédez comme suit :
-
Pour inclure les flèches Suivant et Précédent sur les côtés gauche et droit de chaque diapositive, définissez Show Arrows sur
Yes
. -
Pour inclure un ensemble de points de navigation sous le curseur, définissez Show Dots sur
Yes
.
{width="600" modal="regular"}
-
-
Définissez les paramètres du curseur Advanced selon vos besoins.
-
Une fois l’opération terminée, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.
Avancé - curseur slider-advanced
-
Pour contrôler le positionnement des diapositives dans le conteneur de curseur parent, choisissez le Alignment :
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto Option Description Default
Applique le paramètre d’alignement par défaut spécifié dans la feuille de style du thème actif. Left
Aligne les diapositives le long de la bordure gauche du conteneur du curseur, en tenant compte de toute marge intérieure spécifiée. Center
Aligne les diapositives au centre du conteneur du curseur, en tenant compte de toute marge intérieure spécifiée. Right
Aligne les diapositives le long de la bordure droite du conteneur du curseur, en tenant compte de toute marge intérieure spécifiée. -
Définissez le style Border appliqué aux quatre côtés du conteneur de curseur :
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto Option Description Default
Applique le style de bordure par défaut spécifié par la feuille de style associée. None
Ne fournit aucune indication visible des bordures du conteneur. Dotted
La bordure du conteneur s’affiche sous la forme d’une ligne pointillée. Dashed
La bordure du conteneur s’affiche sous la forme d’une ligne en pointillés. Solid
La bordure du conteneur s’affiche sous la forme d’une ligne pleine. Double
La bordure du conteneur s’affiche sous la forme d’une ligne double. Groove
La bordure du conteneur s’affiche sous forme de ligne droite. Ridge
La bordure du conteneur s’affiche sous la forme d’une ligne à droite. Inset
La bordure du conteneur s’affiche sous la forme d’une ligne d’insertion. Outset
La bordure du conteneur apparaît comme une ligne de départ. -
Si vous définissez un style de bordure autre que
None
, renseignez les options d’affichage de la bordure :table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Option Description Border Color Définissez la couleur en choisissant un échantillon, en cliquant sur le sélecteur de couleurs ou en saisissant un nom de couleur valide ou une valeur hexadécimale équivalente. Border Width Saisissez le nombre de pixels pour la largeur de la ligne de bordure. Border Radius Saisissez le nombre de pixels pour définir la taille du rayon utilisé pour arrondir chaque coin de la bordure. -
(Facultatif) Indiquez les noms de CSS classes dans la feuille de style actuelle à appliquer au conteneur de curseur.
Séparez plusieurs noms de classe par un espace.
-
Saisissez des valeurs, en pixels, pour le Margins and Padding afin de déterminer les marges extérieures et la marge intérieure du conteneur du curseur.
Saisissez les valeurs correspondantes dans le diagramme.
table 0-row-2 1-row-2 2-row-2 layout-auto Zone de conteneur Description Margins Espace vide appliqué au bord extérieur de tous les côtés du conteneur. Padding Espace blanc appliqué au bord intérieur de tous les côtés du conteneur.
Test du curseur
-
Ouvrez la page dans laquelle vous avez inclus le curseur, définissez Enable Page sur
Yes
. -
Dans le coin supérieur droit, cliquez sur la flèche Save et sélectionnez Save & Close.
-
Recherchez la page dans la grille Pages et sélectionnez View dans la colonne Action.
{width="600" modal="regular"}
Lorsque vous prévisualisez le curseur, redimensionnez la fenêtre afin que vous puissiez voir comment elle s’affiche sur un périphérique mobile.
{width="400" modal="regular"}