Dernière modification : 28 août 2025
Les zones de glisser-déposer permettent aux développeurs de créer des sections de pages et des partials globaux qui prennent en charge les modifications de mise en page, de style et de contenu directement dans les éditeurs de contenu. Voir le tutoriel sur la création d’une zone de glisser-déposer pour une introduction à la création de zones de glisser-déposer. Les zones de glisser-déposer sont basées sur une grille réactive à 12 colonnes. Les balises par glisser-déposer rendent le balisage avec des noms de classe désignant les colonnes et les lignes. Vous devrez ajouter une feuille de style pour cibler ces noms de classe. Un exemple de styles de mise en page que vous pouvez mettre en œuvre se trouve dans le Boilerplate de CMS Hub. Votre feuille de style peut être ajoutée au modèle en utilisant {{ require_css() }}.

​
Remarque:

Les zones de glisser-déposer ne peuvent pas être utilisées dans des articles de blog et modèles d’e-mails pour le moment.

​
dnd_area

Une zone de glisser-déposer est un conteneur qui rend une partie de la page web modifiable en termes de structure, de conception et de contenu. Le corps d’une balise {% dnd_area %} fournit le contenu par défaut de la zone de glisser-déposer. Les modules eux-mêmes ne peuvent pas contenir de zones de glisser-déposer. Pour fournir aux créateurs de contenu une interface permettant d’ajouter du contenu uniforme dans un module, utilisez plutôt des champs et des groupes reproductibles. Une balise dnd_area peut contenir les paramètres suivants :
ParamètreTypeDescription
classChaîneUne classe ajoutée avec la balise div d’une dnd_area
labelChaîneUtilisé dans l’éditeur pour libeller la zone dans la barre latérale.
{% dnd_area "unique_name", class="main" %}

{% end_dnd_area %}
Les balises dnd_area peuvent également contenir des balises dnd_section.

​
Remarque:

Un créateur de contenu peut échanger le modèle d’une page contre un autre modèle du même type, selon qu’il possède ou non des balises dnd_area.
  • Les modèles construits avec l’éditeur visuel de mise en page par glisser-déposer peuvent être remplacés par d’autres modèles par glisser-déposer ou par des modèles codés avec ou sans les balises dnd_area.
  • Les modèles codés avec des balises dnd_area ne peuvent être échangés que contre d’autres modèles codés avec des balises dnd_area.
  • Les modèles codés sans balises dnd_area ne peuvent être échangés que contre d’autres modèles codés sans balises dnd_area.

​
dnd_section

{% dnd_section %} est une ligne de niveau supérieur qui doit être imbriquée dans une balise {% dnd_area %}. Les sections peuvent également être définies comme un modèle, puis incluses dans une dnd_area, ce qui les rend idéales pour élaborer rapidement un modèle. Une balise dnd_section peut contenir les paramètres suivants :
ParamètreTypeDescription
background_colorDictUn dictionnaire qui permet de spécifier une couleur d’arrière-plan. Peut également être fourni en tant que chaîne.
background_imageDictUn dictionnaire qui permet de spécifier une image d’arrière-plan.
background_linear_gradientDictUn dictionnaire qui permet de spécifier un arrière-plan à dégradé linéaire.
full_widthBooléenUn booléen qui détermine si la section est destinée à être pleine page ou limitée par un conteneur interne.
marginDictUn dictionnaire qui permet de spécifier les valeurs de marge dans cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax et %. Si aucune unité de mesure n’est fournie, la valeur par défaut est px.
max_widthEntierUne valeur en pixels qui définit la largeur maximale d’un contenu sur une balise dict.
paddingDictUn dictionnaire qui permet de spécifier les valeurs de rembourrage dans cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax et %. Si aucune unité de mesure n’est fournie, la valeur par défaut est px.
vertical_alignmentChaîneAlignement vertical du contenu enfant. Les options disponibles incluent :
  • TOP
  • MIDDLE
  • BOTTOM

​
Remarque:

Vous ne pouvez utiliser qu’un seul paramètre d’arrière-plan par balise dnd_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 %}
Les balisesdnd_section peuvent également contenir les balises suivantes :
  • dnd_column
  • dnd_module

​
dnd_column

{% dnd_column %} est un bloc de construction structurel vertical qui occupe une ou plusieurs colonnes de mise en page définies par sa ligne parent. Cette balise HubL doit être imbriquée dans une balise {% dnd_area %}. Une balise dnd_column peut contenir les paramètres suivants :
ParamètreTypeDescription
background_colorDictUn dictionnaire qui permet de spécifier une couleur d’arrière-plan.
background_imageDictUn dictionnaire qui permet de spécifier une image d’arrière-plan.
background_linear_gradientDictUn dictionnaire qui permet de spécifier un arrière-plan à dégradé linéaire.
marginDictUn dictionnaire qui permet de spécifier les valeurs de marge dans cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax et %. Si aucune unité de mesure n’est fournie, la valeur par défaut est px.
max_widthEntierUne valeur en pixels qui définit la largeur maximale d’un contenu sur une balise dict.
paddingDictUn dictionnaire qui permet de spécifier les valeurs de remplissage dans cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax et %. Si aucune unité de mesure n’est fournie, la valeur par défaut est px.
vertical_alignmentChaîneAlignement vertical du contenu enfant. Les options disponibles incluent :
  • TOP
  • MIDDLE
  • BOTTOM

​
Remarque:

Vous ne pouvez utiliser qu’un seul paramètre d’arrière-plan par balise dnd_column.
{% dnd_column
offset=0,
width=12,
background_color={
r: 255,
g: 0,
b: 0,
a: 1
},
margin={
"top": "1em",
"bottom": "1em"
},
%}

{% end_dnd_column %}
Une balise dnd_column peut également contenir dnd_row.

​
dnd_row

{% dnd_row %} est un bloc de construction structurel horizontal qui crée une grille de mise en page imbriquée à 12 colonnes dans laquelle des colonnes et des modules peuvent être placés. Cette balise HubL doit être imbriquée dans une balise {% dnd_area %}. Une balise dnd_row peut inclure les paramètres suivants :
ParamètreTypeDescription
background_colorDictUn dictionnaire qui permet de spécifier une couleur d’arrière-plan.
background_imageDictUn dictionnaire qui permet de spécifier une image d’arrière-plan.
background_linear_gradientDictUn dictionnaire qui permet de spécifier un arrière-plan à dégradé linéaire.
marginDictUn dictionnaire qui permet de spécifier les valeurs de marge dans cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax et %. Si aucune unité de mesure n’est fournie, la valeur par défaut est px.
max_widthEntierUne valeur en pixels qui définit la largeur maximale d’un contenu sur une balise dict.
paddingDictUn dictionnaire qui permet de spécifier les valeurs de remplissage dans cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax et %. Si aucune unité de mesure n’est fournie, la valeur par défaut est px.
vertical_alignmentChaîneAlignement vertical du contenu enfant. Les options disponibles incluent :
  • TOP
  • MIDDLE
  • BOTTOM

​
Remarque:

Vous ne pouvez utiliser qu’un seul paramètre d’arrière-plan par balise dnd_row.
{% dnd_row
background_color={
r: 123,
g: 123,
b: 123,
a: 1.0
},
margin={
"top": 20,
"bottom": 200
},
padding={
"top": 20,
"bottom": 200,
"left": 20,
"right": 20
}
%}

{% end_dnd_row %}
Une balise dnd_row peut également contenir les balises suivantes :
  • dnd_column
  • dnd_module

​
dnd_module

{% dnd_module %} est un module enveloppé dans un div où la mise en page, les styles et le contenu peuvent être ajoutés. Le module est spécifié en faisant référence à son chemin d’accès, qui peut être soit un module par défaut de HubSpot (en utilisant l’espace de noms @hubspot/), soit des modules que vous avez construits, en spécifiant leur chemin d’accès dans l’arborescence des fichiers du gestionnaire de conception. Cette balise HubL doit être imbriquée dans une balise {% dnd_area %}. Une balise dnd_module peut contenir les paramètres suivants :
ParamètreTypeDescription
pathChaîneChemin d’accès à un module.
horizontal_alignmentChaînePositionnement horizontal, prend en charge : LEFT, CENTER et RIGHT
offsetEntierDécalage par rapport à 0 dans la grille à 12 colonnes.
widthEntierNombre de colonnes occupant la grille de 12 colonnes.
flexbox_positioningChaîneObsolète, ne pas utiliser. Utilisez plutôt horizontal_alignment en tandem avec l’élément vertical_alignment de la ligne ou de la section.
Valeur de la position Flexbox pour le module. Chaîne compatible indiquant la position verticale suivie de la position horizontale :
  • TOP_LEFT
  • TOP_CENTER
  • TOP_RIGHT
  • MIDDLE_LEFT
  • MIDDLE_CENTER
  • MIDDLE_RIGHT
  • BOTTOM_LEFT
  • BOTTOM_CENTER
  • BOTTOM_RIGHT
Vous avez un ancien module dont le nom de champ correspond à l’un des paramètres dnd_module ci-dessus ? Vous pouvez transmettre des valeurs par défaut par le biais d’un paramètre de champ, tout comme vous le feriez pour un groupe de champs.
{% dnd_module
path="@hubspot/rich_text",
offset=0,
width=8,
%}
{% module_attribute "html" %}
<h1>Hello, world!</h1>
{% end_module_attribute %}
{% end_dnd_module %}

​
Milieu social

Il existe plusieurs façons de définir des arrière-plans pour les éléments de colonne, de section et de ligne du tableau de bord, background_image, background_linear_gradient et background_color.

​
background_color

Les balises dnd de colonne, de section et de ligne prennent en charge les couleurs d’arrière-plan. Vous pouvez définir la couleur d’arrière-plan par défaut pour un élément de glisser-déposer en utilisant background_color. Ce paramètre est un paramètre basé sur une chaîne de caractères et peut inclure les formats suivants décrits dans l’exemple ci-dessous. 
{% dnd_section %}
  // Hex Value (both 3 and 6 char length)
  {% dnd_column background_color="#F7F7F7" %}
  {% end_dnd_column %}
  {% dnd_column background_color="#FFF" %}
  {% end_dnd_column %}
// Both RGB and RGBA
  {% dnd_column background_color="rgb(255,255,255)" %}
  {% end_dnd_column %}
  {% dnd_column background_color="rgba(0,0,0,.25)" %}
  {% end_dnd_column %}
{% end_dnd_section %}

​
background_linear_gradient

Les éléments dnd de colonne, de section et de ligne prennent en charge les dégradés linéaires d’arrière-plan. Vous pouvez définir un dégradé par défaut à l’aide du paramètre background_linear_gradient. Le paramètre attend un dictionnaire. Actuellement, il ne prend en charge que les arrêts de deux couleurs.
ParamètreTypeDescription
directionChaîneLa direction du dégradé.
  • to bottom
  • to top
  • to left
  • to right
colorsTableauTableau de chaînes de couleurs. Actuellement, il prend en charge 2 valeurs, le début et la fin. Les valeurs sont fournies sous forme de chaînes de caractères, et les formats suivants sont pris en charge :
  • RGB
  • RGBA
  • 3 char hex
  • 6 char hex
  • 8 char hex
{% dnd_section
  background_linear_gradient={
    "direction": "to bottom",
    "colors": [
      "#1EB6C3",
      "#2A2859"
    ]
  }
  %}
  {% dnd_module path="@hubspot/rich_text" width="6" %}
  {% end_dnd_module %}
{% end_dnd_section %}

​
background_image

Les éléments dnd de colonne, de section et de ligne prennent en charge les images d’arrière-plan. Vous pouvez fournir une image d’arrière-plan par défaut en utilisant le paramètre background_image qui attend un dictionnaire.
CléTypeDescription
backgroundPositionChaîneLa position de l’image en arrière-plan. Prend en charge une chaîne indiquant la position verticale suivie de la position horizontale.
  • TOP_LEFT
  • TOP_CENTER
  • TOP_RIGHT
  • MIDDLE_LEFT
  • MIDDLE_CENTER
  • MIDDLE_RIGHT
  • BOTTOM_LEFT
  • BOTTOM_CENTER
  • BOTTOM_RIGHT
backgroundSizeChaînePropriété de taille d’arrière-plan de la CSS utilisée pour l’image.
Valeurs prises en charge :
  • cover
  • contain
  • auto
imageUrlChaîneURL absolue de l’image.
{% dnd_section
  background_image = {
      "backgroundPosition": "MIDDLE_CENTER",
      "backgroundSize": "cover",
      "imageUrl": "https://www.example.com/bg-image.jpg"
    },
%}
  {% dnd_module path="@hubspot/rich_text" width="6" %}
  {% end_dnd_module %}

{% end_dnd_section %}

​
Comment les paramètres de style dnd se traduisent sur la page

Lorsque vous utilisez des paramètres basés sur le style, tels que les arrière-plans, les marges ou le remplissage, les noms de classe sont automatiquement calculés pour vos sections, colonnes, lignes et modules. Les valeurs de propriété que vous avez assignées sont alors ajoutées à ces noms de classe créés automatiquement et le code CSS qui en résulte est ensuite placé devant la balise de fermeture </body> de la page dans une balise <style>. Les styles de glisser-déposer peuvent également être différents à différents points de rupture pour offrir un aspect réactif.