DocumentationCommercePage Builder

[PaaS uniquement]{class="badge informative" title="S’applique uniquement aux projets Adobe Commerce on Cloud (infrastructure PaaS gérée par Adobe) et aux projets On-premise."}

Ajouter du contenu - Bloc dynamique

Last update: Thu Sep 04 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Rubriques :

Créé pour :

  • Débutant
  • Intermédiaire
  • Utilisateur ou utilisatrice

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

Bloc dynamique sur le storefront {width="700" modal="regular"}

NOTE
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
Icon
Description
Déplacer
Icône Déplacer {width="25"}
Déplace le conteneur de blocs et son contenu vers un autre emplacement sur la scène.
Paramètres
Icône Paramètres {width="25"}
Ouvre la page Modifier le bloc, dans laquelle vous pouvez choisir le bloc et modifier les propriétés du conteneur.
Masquer
Icône Masquer {width="25"}
Masque le conteneur du bloc actif et son contenu.
Afficher
Afficher l’icône {width="25"}
Affiche le conteneur du bloc masqué et son contenu.
Dupliquer
Icône Dupliquer {width="25"}
Effectue une copie du conteneur de blocs et de son contenu.
Supprimer
Icône Supprimer {width="25"}
Supprime le conteneur de blocs et son contenu de l’étape.
NOTE
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

  1. Accédez à l’espace de travail Page Builder sur la page, le bloc, le produit ou la catégorie cible.

  2. Dans le panneau Page Builder, développez Add Content et faites glisser un espace réservé Dynamic Block vers la scène.

    Glisser un espace réservé de bloc dynamique vers la scène {width="600" modal="regular"}

  3. Pointez sur le conteneur de blocs dynamiques vide pour afficher la boîte à outils et choisissez l’icône Paramètres ( icône Paramètres {width="20"} ).

    Boîte à outils Bloc dynamique {width="600" modal="regular"}

  4. Sur la page Modifier le bloc dynamique, cliquez sur Select Dynamic Block et utilisez la liste pour sélectionner le bloc.

    Sélection d'un bloc dynamique {width="600" modal="regular"}

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

    Sélection d'un bloc dynamique dans la liste {width="600" modal="regular"}

    Un résumé des informations sur les blocs dynamiques s’affiche ci-dessous.

    Résumé des blocs dynamiques {width="600" modal="regular"}

  5. Définissez Template sur l’une des options suivantes :

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Option Description
    Dynamic Block Block Template Ajoute un bloc autonome.
    Dynamic Block Inline Template Insère le contenu du bloc dans le texte.

    Modèle de bloc dynamique {width="200"}

  6. Renseignez les paramètres avancés selon vos besoins.

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

  1. Pour contrôler le positionnement du bloc dynamique dans le conteneur parent, choisissez une 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 la liste le long de la bordure gauche du conteneur parent, en tenant compte de la marge intérieure spécifiée.
    Center Aligne la liste au centre du conteneur parent, en tenant compte de la marge intérieure spécifiée.
    Right Aligne le bloc le long de la bordure droite du conteneur parent, en tenant compte de la marge intérieure spécifiée.

  2. Définissez le style de Border appliqué aux quatre côtés du conteneur de bloc dynamique :

    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 tirets.
    Solid La bordure du conteneur s’affiche sous la forme d’une ligne continue.
    Double La bordure du conteneur s’affiche sous la forme d’une ligne double.
    Groove La bordure du conteneur s’affiche sous la forme d’une ligne rainurée.
    Ridge La bordure du conteneur s’affiche sous la forme d’une ligne crantée.
    Inset La bordure du conteneur s’affiche sous la forme d’une ligne insérée.
    Outset La bordure du conteneur s’affiche sous la forme d’une ligne de départ.

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

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Option Description
    Border Color Spécifiez la couleur en choisissant une nuance, 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.

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

    Séparez plusieurs noms de classe par un espace.

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

    Saisissez les valeurs correspondantes dans le diagramme.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Zone conteneur Description
    Margins Quantité d’espace vide appliqué au bord extérieur de tous les côtés du conteneur. Options : Top / Right / Bottom / Left
    Padding Quantité d’espace vide appliqué au bord intérieur de tous les côtés du conteneur. Options : Top / Right / Bottom / Left

Modifier les paramètres du conteneur de blocs dynamiques

  1. Pointez sur le conteneur de blocs dynamiques pour afficher la boîte à outils et choisissez l’icône Paramètres ( icône Paramètres {width="20"} ).

    Boîte à outils Bloc dynamique {width="500" modal="regular"}

  2. Si nécessaire, modifiez le bloc dynamique :

    • Cliquez sur Select Dynamic Block.

      Sélection d’un autre bloc dynamique {width="20"}

    • Dans la liste des blocs dynamiques actifs, cliquez sur Select pour le bloc que vous souhaitez ajouter.

  3. Mettez à jour les paramètres restants si nécessaire.

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

  1. Pointez sur le conteneur de blocs dynamiques pour afficher la palette et choisissez l’icône Dupliquer ( icône Dupliquer {width="20"} ).

    Le duplicata apparaît juste en dessous de l’original.

    Duplication d'un bloc dynamique {width="500" modal="regular"}

  2. Pour déplacer le nouveau bloc dynamique à un autre emplacement, passez la souris sur son conteneur, puis choisissez Déplacer ( Icône Déplacer {width="20"} ) dans la palette.

  3. Sélectionnez le bloc dynamique et faites-le glisser jusqu’à ce que la ligne directrice rouge s’affiche à la nouvelle position.

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

Supprimer un bloc dynamique de la scène

  1. Pointez sur le conteneur de blocs dynamiques pour afficher la boîte à outils et choisissez l’icône Supprimer ( Icône Supprimer {width="20"} ).

  2. Lorsque vous êtes invité à confirmer, cliquez sur OK.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d