Ajouter du contenu - Bloc dynamique

Dernière mise à jour : 14 juillet 2024

Rubriques :

Créé pour :

Débutant
Intermédiaire
Utilisateur ou utilisatrice

Utilisez le type de contenu Bloc dynamique pour ajouter un bloc dynamique existant à l’ Page Builder étape.

Bloc dynamique sur le storefront

REMARQUE

Si vous apportez des modifications importantes au contenu Page Builder, il est recommandé d’augmenter la durée de vie de la session d’administration afin d’empêcher l’expiration de la session pendant que vous travaillez.

Boîte à outils Bloc dynamique

Outil	Icône	Description
Déplacer		Déplace le conteneur de blocs et son contenu vers une autre position sur la scène.
Paramètres		Ouvre la page Modifier le bloc où vous pouvez choisir le bloc et modifier les propriétés du conteneur.
Masquer		Masque le conteneur de blocs actif et son contenu.
Afficher		Affiche le conteneur de blocs masqué et son contenu.
Dupliquer		Effectue une copie du conteneur de blocs et de son contenu.
Supprimer		Supprime le conteneur de blocs et son contenu de la scène.

REMARQUE

Les éléments masqués sont stockés dans la base de données et invisibles pour les clients. Toutefois, ces éléments sont visibles par les moteurs de recherche et d’autres robots qui analysent votre site. Elles sont également renvoyées dans le cadre du contenu si nécessaire par le biais d’un appel API avec un attribut d’invisibilité, sauf si vous les supprimez de l’étape.

Ajouter un bloc dynamique existant à l’étape

Accédez à l’espace de travail Page Builder sur la page cible, le bloc, le produit ou la catégorie.
Dans le panneau Page Builder, développez Add Content et faites glisser un espace réservé Dynamic Block sur la scène.
Passez la souris sur le conteneur de blocs dynamiques vide pour afficher la boîte à outils et sélectionnez l’icône Paramètres ( ).
Sur la page Modifier le bloc dynamique , cliquez sur Select Dynamic Block et utilisez la liste pour sélectionner le bloc.

Dans la liste, recherchez le bloc dynamique à insérer, puis cliquez sur Select. Cliquez ensuite sur Add Selected.

Un résumé des informations du bloc dynamique apparaît ci-dessous.
Définissez Template sur l’une des options suivantes :

Option
Description
Dynamic Block Block Template
Ajoute un bloc autonome.
Dynamic Block Inline Template
Insère le contenu du bloc dans le texte.
Définissez les Paramètres avancés 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.

Paramètres avancés

Pour contrôler le positionnement du bloc dynamique dans le conteneur parent, choisissez un Alignment :

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 la liste le long de la bordure gauche du conteneur parent, en tenant compte de toute marge intérieure spécifiée.
Center
Aligne la liste au centre du conteneur parent, en tenant compte de toute marge intérieure spécifiée.
Right
Aligne le bloc le long de la bordure droite du conteneur parent, 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 blocs dynamiques :

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 :

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.

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 de blocs dynamiques.

Saisissez les valeurs correspondantes dans le diagramme.

Zone de conteneur
Description
Margins
Espace vide appliqué au bord extérieur de tous les côtés du conteneur. Options : Top / Right / Bottom / Left
Padding
Espace blanc appliqué au bord intérieur de tous les côtés du conteneur. Options : Top / Right / Bottom / Left

Modification des paramètres du conteneur de blocs dynamique

Passez la souris sur le conteneur de blocs dynamiques pour afficher la boîte à outils et sélectionnez l’icône Paramètres ( ).
Si nécessaire, modifiez le bloc dynamique :
- Cliquez sur Select Dynamic Block.
- Dans la liste des blocs dynamiques actifs, cliquez sur Select pour le bloc que vous souhaitez ajouter.
Mettez à jour les paramètres restants si nécessaire.
Une fois l’opération terminée, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.

Dupliquer un bloc dynamique

Passez la souris sur le conteneur de blocs dynamiques pour afficher la boîte à outils et sélectionnez l’icône Dupliquer ( ).

Le doublon apparaît juste en dessous de l’original.
Pour déplacer le nouveau bloc dynamique vers une autre position, passez la souris sur son conteneur, puis sélectionnez Déplacer ( ) dans la boîte à outils.
Sélectionnez le bloc dynamique et faites-le glisser jusqu'à ce que la ligne directrice rouge apparaisse à la nouvelle position.

Les bordures supérieure et inférieure de chaque conteneur apparaissent sous la forme de lignes en pointillés lorsque le bloc dynamique est déplacé.

Suppression d’un bloc dynamique de la scène

Passez la souris sur le conteneur de blocs dynamiques pour afficher la boîte à outils et sélectionnez l’icône Supprimer ( ).
Lorsque vous êtes invité à confirmer l’opération, cliquez sur OK.

recommendation-more-help