Dernière modification : 28 août 2025
Le conteneur le plus à l’extérieur d’une zone glisser-déposer est appelé section. Les sections ne peuvent être imbriquées dans aucun autre élément dnd, mais peuvent contenir des modules, des lignes et des colonnes. Dans l’éditeur de page, les créateurs de contenu peuvent ajouter des sections à la page, puis les modifier et les styliser selon leurs besoins. Les créateurs de contenu peuvent également créer et enregistrer des sections à utiliser sur d’autres pages du même thème, ce qui rend la création de contenu plus efficace. Dans cet article, vous en apprendrez davantage sur les sections et sur la manière de les utiliser dans l’éditeur de pages. Lors du développement d’un thème, vous pouvez consulter le guide afin de masquer les modules et les sections de l’éditeur de page pour créer une expérience de création de contenu plus rationalisée.
page editor add reusable section UI

​
Présentation

Les sections peuvent être créées dans l’éditeur de contenu par un créateur de contenu ou intégrées par un développeur dans dnd_area avec la balise dnd_section. Les options de style disponibles dans l’éditeur sont également disponibles lors du codage d’un modèle. Par exemple : 
<main class="body-container-wrapper">
  {% dnd_area 'dnd_area'
    label='Main section',
  %}
    {% dnd_section
      background_image={
        'backgroundPosition': 'MIDDLE_CENTER',
        'backgroundSize': 'cover',
        'imageUrl': 'https://example.com/path/to/image.jpg'
      },
      margin={
        'top': 32,
        'bottom': 32
      },
      padding={
        'top': '1em',
        'bottom': '1em',
        'left': '1em',
        'right': '1em'
      },
      max_width=1200,
      vertical_alignment='MIDDLE'
    %}

    {% end_dnd_section %}

  {% end_dnd_area %}
</main>
Pour obtenir une documentation complète sur tous les paramètres des éléments de glisser-déposer disponibles et des exemples d’utilisation, consultez les balises dnd_area. Vous pouvez utiliser les sections pour élaborer rapidement des modèles faciles à lire. Étant donné que vous ne spécifiez que le contexte dans lequel les instances spécifiques du modèle sont différentes, vous pouvez toujours revenir en arrière et modifier ce modèle de section.
Remarque : la modification d’une section entraînera sa mise à jour dans toutes les instances de cette section, à l’exception des pages existantes qui utilisent un modèle faisant référence à la section. Les pages créées précédemment avec un modèle contenant une section incluse devront être mises à jour manuellement pour utiliser la nouvelle version de la section. Cela permet d’éviter d’apporter accidentellement des modifications radicales. Pour mettre à jour une section, un créateur de contenu peut se rendre dans l’éditeur de page, ajouter la nouvelle section à la page, puis supprimer l’ancienne version.

​
Créer des sections réutilisables

Dans un thème, vous pouvez inclure des sections préconfigurées que les créateurs de contenu peuvent ajouter aux pages utilisant ce thème dans l’éditeur de pages. Ces sections réutilisables sont construites comme des fichiers modèles de section et sont codées avec la même syntaxe que celle que vous utiliseriez à l’intérieur de dnd_area.
Remarque : pour rendre une section disponible pour plusieurs thèmes, vous devrez ajouter le fichier modèle de la section à chaque thème. De même, les sections créées par les créateurs de contenu dans l’éditeur de contenu ne seront disponibles que dans ce thème.
Ci-dessous, vous apprendrez à créer des fichiers modèles de section et à les référencer dans d’autres fichiers modèles.

​
Fichiers de modèles de section

Les modèles de section sont désignés par templateType: section dans leur annotation de modèle. 
<!--
 templateType: section
 label: Banner
 description: "A banner typically used at the top of a page highlighting a product or main topic."
 isAvailableForNewContent: true
 screenshotPath: ../images/section-previews/banner.png
-->
ParamètreTypeDescriptionValeur
templateTypeChaîneDéfinit le type de modèle utilisé pour déterminer où le modèle peut être utilisé et quelles données sont disponibles.section
labelChaîneUtilisée dans l’éditeur de pages pour fournir un nom compréhensible pour la section.
descriptionChaîneDescription supplémentaire de la section au-delà de ce que vous pouvez faire avec un libellé. S’affiche dans l’éditeur de page. 255 caractères maximum.
screenshotPathChaîne/cheminChemin d’accès à une capture d’écran de la section. Utilisé pour donner aux créateurs de contenu une référence visuelle simple de l’aspect de la section.
Un modèle de section doit commencer et se terminer par une balise dnd_section. Il ne peut y avoir qu’un seul dnd_section dans un modèle de section. À l’intérieur de cette section, vous pouvez placer des modules, des lignes et des colonnes, en suivant les mêmes règles dnd_area que celles qui s’appliquent à l’ajout d’un dnd_area à un modèle de page. L’exception est que vous définissez le contenu d’une seule section et de ses éléments de glisser-déposer. 
<!--
 templateType: section
 label: Banner
 description: "A banner typically used at the top of a page highlighting a product or main topic."
 isAvailableForNewContent: true
 screenshotPath: ../images/section-previews/banner.png
-->
{% dnd_section
 padding={
   'top': 200,
   'right': 20,
   'bottom': 200,
   'left': 20
 },
 background_image={
   'backgroundPosition': 'MIDDLE_CENTER',
   'backgroundSize': 'cover',
   'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png')
 },
 max_width=778,
 vertical_alignment='MIDDLE'
%}
 {% dnd_column %}
   {% dnd_row %}
     {% dnd_module path='@hubspot/rich_text' %}
     {% module_attribute 'html' %}
       <div style="text-align: center">
         {{ context.content || '<h1 style="color: #fff;">Communicate <span style="font-weight: 400;">Your Way</span></h1><p style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.</p>' }}
       </div>
     {% end_module_attribute %}
     {% end_dnd_module %}
   {% end_dnd_row %}
   {% dnd_row %}
     {% dnd_module
       path='../modules/button',
       button_text={{ context.buttonText || 'Subscribe' }}
       horizontal_alignment='CENTER'
     %}
     {% end_dnd_module %}
   {% end_dnd_row %}
 {% end_dnd_column %}
{% end_dnd_section %}

​
Ajouter une section partielle à un modèle

Après avoir créé une section, vous pouvez y faire référence dans un dnd_area en utilisant une balise include_dnd_partial. Cette balise fournit le chemin d’accès au fichier de la section, comme indiqué ci-dessous : 
{% dnd_area 'dnd_area' class='body-container body-container--home-page', label='Main section' %}
   {# Banner Section #}
   {% include_dnd_partial path='../sections/banner.html' context={} %}
   {# End Banner Section #}
{% end_dnd_area %}
Dans l’exemple ci-dessus, notez l’argument contextuel dans la balise include_dnd_partial . Cela vous permet de transférer des variables spécifiques du modèle de page à la section, en remplaçant les valeurs par défaut dans le fichier de la section. Voir la section contexte pour plus d’informations.

​
Contenu de la section

Vous pouvez utiliser des variables de contexte de section pour remplacer les valeurs par défaut au niveau de la section et du module. Les variables de contexte de section sont définies par vous et ne sont pas associées directement aux modules et à leurs champs. Dans votre balise de page, vous pouvez définir ces variables de contexte grâce au paramètre context de la balise include_dnd_partial. 
{% dnd_area 'dnd_area' class='body-container body-container--home-page', label='Main section' %}

   {# Banner Section #}
   {% include_dnd_partial path='../sections/banner.html'
     context={
       'content': '<h1 style="color: #fff;">Home Page</h1><p style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.</p>',
       'buttonText': 'Buy Now'
     }
   %}
   {# End Banner Section #}

{% end_dnd_area %}
Toutes les variables que vous ajoutez à votre paramètre context seront disponibles pour être référencées dans votre modèle de section. L’exemple suivant montre comment définir l’URL de l’image et le contenu de la zone de texte riche et du bouton défini en contexte, le cas échéant. 
<!--
 templateType: section
 label: Banner
 description: "A banner typically used at the top of a page highlighting a product or main topic."
 isAvailableForNewContent: true
 screenshotPath: ../images/section-previews/banner.png
-->
{% dnd_section
  background_image={
   'backgroundPosition': 'MIDDLE_CENTER',
   'backgroundSize': 'cover',
   'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png')
 },
 max_width=778
%}
 {% dnd_column %}
   {% dnd_row %}
     {% dnd_module path='@hubspot/rich_text' %}
     {% module_attribute 'html' %}
       <div style="text-align: center">
         {{ context.content || '<h1 style="color: #fff;">Communicate <span style="font-weight: 400;">Your Way</span></h1><p style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.</p>' }}
       </div>
     {% end_module_attribute %}
     {% end_dnd_module %}
   {% end_dnd_row %}
   {% dnd_row %}
     {% dnd_module
       path='../modules/button',
       button_text={{ context.buttonText || 'Subscribe' }}
       horizontal_alignment='CENTER'
     %}
     {% end_dnd_module %}
   {% end_dnd_row %}
 {% end_dnd_column %}
{% end_dnd_section %}
Notez que lorsque des variables de contexte sont utilisées, il existe un filtre || OR pour fournir un contenu par défaut si aucun contenu n’est fourni. Par exemple, dans le module bouton, si context.buttonText a une valeur, la page l’utilisera. Dans le cas contraire, le texte est défini sur Subscribe.

​
Classes de section

Dans les modèles de section, vous pouvez ajouter des classes au wrapper de la section à l’aide du paramètre class. Cela ajoutera la classe que vous avez spécifiée au champ de classe de l’élément html de la section dnd. Il est recommandé, dans la mesure du possible, d’utiliser des contrôles de style intégrés aux sections pour permettre aux créateurs de contenu de les modifier.
Remarque : les classes de section ne sont prises en charge que dans les modèles de section.
{% dnd_section
 class='my-hero-section'
 padding={
   'top': 200,
   'right': 20,
   'bottom': 200,
   'left': 20
 },
 background_image={
   'backgroundPosition': 'MIDDLE_CENTER',
   'backgroundSize': 'cover',
   'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png')
 },
 max_width=778,
 vertical_alignment='MIDDLE'
%}
...
Les créateurs de contenu ne peuvent pas modifier, ajouter ou supprimer des classes. Elles ne peuvent être supprimées qu’en recréant une section manuellement dans l’éditeur.En outre, vous devez éviter de modifier la disposition des enfants de la section à l’aide de CSS ou de JavaScript. Cela peut créer une expérience d’édition de page désagréable pour le créateur de contenu.

​
Prévisualiser votre section

La manière la plus simple de prévisualiser votre section pendant le développement est d’utiliser le gestionnaire de conception. Ouvrez un modèle contenant un dnd_area qui appelle votre modèle de section à l’aide d’une balise include_dnd_partial. Dans l’angle supérieur droit, cliquez sur aperçu. Vous pouvez ainsi continuer à mettre à jour votre section et voir vos changements reflétés immédiatement. Vous n’avez pas à créer une nouvelle page pour chaque modification apportée.

​
Copie de section HubL

Dans l’éditeur de page, vous pouvez copier le balisage HubL d’une section par glisser-déposer afin de réutiliser le code si nécessaire. Cela peut s’avérer utile lorsque l’on souhaite recréer des sections de glisser-déposer dans un fichier codé. Pour copier le balisage HubL d’une section :
  • Accédez à votre contenu :
    • Pages de site web : dans votre compte HubSpot, naviguez vers Contenu > Pages de site web.
    • Pages de destination : dans votre compte HubSpot, accédez à Contenu > Pages de destination.
  • Cliquez sur une page pour la modifier.
  • Dans l’éditeur de page, ajoutez le paramètre suivant à l’URL, puis appuyez sur Entrée : ?developerMode=true
  • Une fois la page rechargée, vous serez maintenant en mode développeur. Vous pouvez quitter le mode développeur à tout moment en cliquant sur Quitter le mode développeur dans l’angle supérieur droit.
exit-developer-mode0
  • Placez le curseur sur la section que vous souhaitez copier, puis cliquez sur l’icône de la flèche vers le bas. Sélectionner Copier en tant que HubL. Le balisage HubL sera alors copié dans votre presse-papiers.
copy-section-hubl-menu

​
Ressources associées