Média - Curseur

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 :

• 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 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 :

• 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 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 :

• 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 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"}

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.

Sélectionnez l’un des types de placement 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 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 que 100vh - 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.

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"}

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"}

• 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 :

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"}

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

Définissez le style 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 de la bordure :

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

(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.

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"}

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 que 100vh - 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.

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

Définissez le style 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 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.

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"}