Média - Curseur

Ouvrez la page, le bloc ou le bloc dynamique dans lequel vous souhaitez placer le curseur et développer la section Content.

Dans le panneau Page Builder, développez Media et faites glisser un espace réservé Slider vers 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 la scène avec une seule diapositive vide.

Cliquez dans le conteneur de curseurs pour afficher l’éditeur de texte et saisissez le contenu de la première diapositive.

Vous pouvez également inclure du contenu de bannière plus complexe à l’aide des paramètres Contenu.

Cliquez sur le point de navigation en bas du curseur pour afficher la palette d’outils de la diapositive et sélectionnez l’icône Paramètres ( {width="20"} ).

Les curseurs comportent deux boîtes à outils. Assurez-vous d'utiliser la boîte à outils de diapositives située dans la partie inférieure.

Renseignez les paramètres, selon vos besoins, en fonction des sections suivantes :

• Appearance
• Background
• Content
• Search Engine Optimization
• Advanced

Une fois l’opération terminée, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.

Cliquez sur le point de navigation situé sous la diapositive pour afficher la palette et choisissez l’icône Dupliquer ( {width="20"} ).

{width="500" modal="regular"}

Cliquez sur le point de navigation de la nouvelle diapositive et pour afficher la palette d’outils, puis choisissez l’icône Paramètres ( {width="20"} ).

Modifiez les paramètres selon vos besoins, conformément aux sections suivantes :

• Appearance
• Background
• Content
• Advanced

Une fois l’opération terminée, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.

Pointez sur le conteneur de curseur en haut pour afficher la boîte à outils et choisissez 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 affichée sur la scène.

{width="500" modal="regular"}

Cliquez sur le point de navigation de la nouvelle diapositive et pour afficher la palette d’outils, puis choisissez l’icône Paramètres ( {width="20"} ).

Modifiez les paramètres selon vos besoins, conformément aux sections suivantes :

• Appearance
• Background
• Content
• Advanced

Une fois l’opération terminée, cliquez sur Save dans le coin supérieur droit pour fermer la page Edit Slide.

Créez le widget que vous souhaitez afficher sur une diapositive.

Ouvrez la page, le bloc ou le bloc dynamique dans lequel vous souhaitez placer le curseur et développer la section Content.

Dans le panneau Page Builder, développez Media et faites glisser un espace réservé Slider vers une ligne, une colonne ou un onglet de la scène.

Cliquez dans le conteneur de curseurs pour afficher la barre d’outils éditeur de texte, puis cliquez sur l’icône Insérer un widget ( {width="20"} ).

Sélectionnez les 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 vos besoins.

Une fois l’opération terminée, cliquez sur Save dans le coin supérieur droit.

{width="600" modal="regular"}

Modifiez l’affichage du curseur sur la scène et affichez la diapositive à modifier.

Dans la boîte à outils de diapositive individuelle, choisissez l’icône Paramètres ( {width="20"} ) et définissez les paramètres, si nécessaire, en fonction des sections suivantes.

Dans le coin supérieur droit, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.

Choisissez l'un des types d'emplacement de diapositives suivants :

{width="600" modal="regular"}

Saisissez le Slide Name.

Lorsque vous travaillez en mode d’édition, le nom de la diapositive s’affiche sous la forme d’une info-bulle au-dessus du point de navigation. Le nom de la diapositive n’est pas visible depuis le storefront.

{width="500" modal="regular"}

Saisissez le Minimum Height de la diapositive.

La hauteur minimale peut être un nombre avec une unité CSS valide (telle que 100px, 50%, 50em, 100vh) ou un calcul (tel que 100vh - 237px).

Par exemple, vous pouvez définir la hauteur minimale de la diapositive pour couvrir toute la hauteur de la page, puis utiliser des images et des vidéos d’arrière-plan pour obtenir des options de conception attrayantes.

Cliquez sur l’espace réservé ou le texte existant, puis saisissez le nouveau texte à afficher sur la diapositive.

La barre d’outils de l’éditeur apparaît au-dessus de la zone de texte.

Utilisez la barre d’outils de l’éditeur pour saisir et mettre en forme le texte, ainsi que pour insérer des éléments, tels que des liens, des images et des widgets.

{width="500" modal="regular"}

Cliquez sur le point de navigation en bas du curseur pour afficher la palette d’outils de la diapositive et 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 jusqu’à la section Content ​et utilisez l’éditeur de Message Text ​pour saisir et mettre en forme le texte de la bannière.

Vous pouvez également insérer des éléments, tels que des liens de texte, des images et des widgets.

Mettez en forme le texte 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 pas de 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. Choisissez le produit dans la liste des résultats de la 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 en fonction d’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 la 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 _Message Text_, vous ne pouvez pas configurer l'option _Link_. Si vous préférez utiliser un seul lien pour l’ensemble de 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ésactivée, la destination liée s’ouvre dans le même onglet du navigateur, ce qui peut efficacement éloigner le visiteur de votre magasin.

Si nécessaire, ajoutez un bouton pour inviter les clients à suivre le lien.

La position de la diapositive apparence place un seul lien ou bouton sous le texte. Renseignez les propriétés du lien ou du bouton que vous souhaitez ajouter.

{width="600" modal="regular"}

• 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 la page.
  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 du bouton principal à partir de la feuille de style actuelle.
  Secondary	Applique le style du bouton secondaire de la feuille de style en cours, le cas échéant.
  Link	Crée un lien hypertexte plutôt qu’un bouton.

  Le style de bouton du thème actuel détermine le format du bouton. En règle générale, un bouton principal a une couleur d’arrière-plan plus proéminente qu’un bouton secondaire.

Définissez Show Overlay sur l’une des options suivantes :

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 sur toute la largeur de celle-ci.

{width="600" modal="regular"}

Si vous choisissez d’afficher une superposition, définissez le Overlay Color :

• Cliquez sur l’échantillon Aucune couleur et choisissez-en un.
• Dans le champ Color , saisissez un nom de couleur valide ou une valeur hexadécimale.

{width="600" modal="regular"}

Pour contrôler le positionnement horizontal du contenu ajouté à la diapositive, choisissez l’Alignment :

Définissez le style de Border appliqué aux quatre côtés de la diapositive :

Si vous définissez un style de bordure autre que None, renseignez les options d’affichage des bordures :

{width="600" modal="regular"}

(Facultatif) Spécifiez les noms des CSS classes de la feuille de style active à appliquer à la diapositive.

Séparez plusieurs noms de classe par un espace.

Saisissez les valeurs, en pixels, du Margins and Padding pour spécifier les marges extérieures et la marge intérieure de la diapositive.

Saisissez chaque valeur correspondante dans le diagramme de diapositives.

Dans le panneau Page Builder, développez Elements et faites glisser un espace réservé Texte vers une ligne, une colonne ou un ensemble d’onglets sur la scène.

Au fur et à mesure que vous faites glisser le curseur, une ligne de repère rouge marque le point d'insertion.

{width="600" modal="regular"}

Utilisez l’éditeur pour mettre le texte en forme selon vos besoins.

{width="500" modal="regular"}

Pointez sur le conteneur de curseurs pour afficher la boîte à outils principale, puis 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 une unité CSS valide (telle que 100px, 50%, 50em, 100vh) ou un calcul (tel que 100vh - 237px).

Par exemple, vous pouvez définir la hauteur minimale d’un curseur pour étirer toute la hauteur de la page, ce qui vous offre des options attrayantes pour les images et vidéos d’arrière-plan de toute la page.

{width="400"}

Si vous souhaitez que le curseur commence au chargement de la page, définissez Autoplay sur Yes et définissez Autoplay Speed sur le nombre de millisecondes écoulées 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 le volet de navigation de la diapositive (points ou flèches) pour afficher la diapositive suivante dans l’ordre.

{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 de l'une à l'autre. Sans fondu, vous pouvez voir le mouvement horizontal d'une diapositive à l'autre.

{width="600" modal="regular"}

Pour que le diaporama se répète indéfiniment lorsque la page est ouverte, Infinite Loop sur Yes.

Pour choisir le type de commandes de navigation pour le 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"}

Renseignez les paramètres du curseur Avancé 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.

Pour contrôler le positionnement des diapositives dans le conteneur de curseur parent, choisissez l’Alignment :

Définissez le style de Border appliqué aux quatre côtés du conteneur de curseur :

Si vous définissez un style de bordure autre que None, renseignez les options d’affichage des bordures :

(Facultatif) Spécifiez les noms des CSS classes de la feuille de style actuelle à appliquer au conteneur de curseur.

Séparez plusieurs noms de classe par un espace.

Saisissez les valeurs, en pixels, du Margins and Padding pour déterminer les marges extérieures et la marge intérieure du conteneur du curseur.

Saisissez les valeurs correspondantes dans le diagramme.

Ouvrez la page sur laquelle vous avez inclus le curseur, puis définissez Enable Page sur Yes.

Dans le coin supérieur droit, cliquez sur la flèche Save et choisissez 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 pour voir son aspect sur un appareil mobile.

{width="400" modal="regular"}