> ## Documentation Index > Fetch the complete documentation index at: https://developers.hubspot.fr/docs/llms.txt > Use this file to discover all available pages before exploring further. # Balises HubL de la zone de glisser-déposer > Les balises HubL sont utilisées pour construire des zones de glisser-déposer qui permettent aux développeurs de créer des sections de pages qui prennent en charge les modifications de mise en page, de style et de contenu directement dans les éditeurs de contenu. [Les zones de glisser-déposer](https://developers.hubspot.fr/docs/guides/cms/content/templates/drag-and-drop/overview) 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](/cms/start-building/building-blocks/drag-and-drop/tutorial) 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](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/objects/_layout.css). Votre feuille de style peut être ajoutée au modèle en utilisant [`{{ require_css() }}`](/cms/reference/hubl/tags/standard-tags#require-css). ### Remarque: Les zones de glisser-déposer ne peuvent pas être utilisées dans des [articles de blog](/cms/start-building/building-blocks/templates/blog) et [modèles d'e-mails](https://developers.hubspot.fr/docs/guides/cms/content/templates/overview#email) pour le moment. ## dnd\_area Une [zone de glisser-déposer](https://developers.hubspot.fr/docs/guides/cms/content/templates/drag-and-drop/overview) 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](/cms/reference/fields/module-theme-fields#repeaters). Une balise `dnd_area` peut contenir les paramètres suivants : | Paramètre | Type | Description | | --------- | ------ | -------------------------------------------------------------------- | | `class` | Chaîne | Une classe ajoutée avec la balise div d'une dnd\_area | | `label` | Chaîne | Utilisé dans l'éditeur pour libeller la zone dans la barre latérale. | ```text entrée.txt theme={null} {% dnd_area "unique_name", class="main" %} {% end_dnd_area %} ``` ```text résultat.txt theme={null}
``` 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](/cms/reference/hubl/tags/dnd-areas). * 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 %}`](/cms/start-building/building-blocks/sections/sections) 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](/cms/start-building/building-blocks/sections/sections#section-templates), puis [incluses](/cms/start-building/building-blocks/sections/sections#section-context) 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ètre | Type | Description | | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `background_color` | Dict | Un dictionnaire qui permet de spécifier une [couleur d'arrière-plan](#background-color). Peut également être fourni en tant que chaîne. | | `background_image` | Dict | Un dictionnaire qui permet de spécifier une [image d'arrière-plan](#background-image). | | `background_linear_gradient` | Dict | Un dictionnaire qui permet de spécifier un [arrière-plan à dégradé linéaire](#background-linear-gradient). | | `full_width` | Booléen | Un booléen qui détermine si la section est destinée à être pleine page ou limitée par un conteneur interne. | | `margin` | Dict | Un 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_width` | Entier | Une valeur en pixels qui définit la largeur maximale d'un contenu sur une balise dict. | | `padding` | Dict | Un 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_alignment` | Chaîne | Alignement vertical du contenu enfant. Les options disponibles incluent :
| ### Remarque: Vous ne pouvez utiliser qu'un seul paramètre d'arrière-plan par balise `dnd_section`. ```text entrée.txt theme={null} {% 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 %} ``` ```text résultat.txt theme={null}
``` Les balises`dnd_section` peuvent également contenir les balises suivantes : * `dnd_column` * `dnd_module` ## dnd\_column [`{% dnd_column %}`](https://developers.hubspot.fr/docs/guides/cms/content/templates/drag-and-drop/overview#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ètre | Type | Description | | ---------------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `background_color` | Dict | Un dictionnaire qui permet de spécifier une [couleur d'arrière-plan](#background-color). | | `background_image` | Dict | Un dictionnaire qui permet de spécifier une [image d'arrière-plan](#background-image). | | `background_linear_gradient` | Dict | Un dictionnaire qui permet de spécifier un [arrière-plan à dégradé linéaire](#background-linear-gradient). | | `margin` | Dict | Un 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_width` | Entier | Une valeur en pixels qui définit la largeur maximale d'un contenu sur une balise dict. | | `padding` | Dict | Un 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_alignment` | Chaîne | Alignement vertical du contenu enfant. Les options disponibles incluent :
| ### Remarque: Vous ne pouvez utiliser qu'un seul paramètre d'arrière-plan par balise `dnd_column`. ```text entrée.txt theme={null} {% dnd_column offset=0, width=12, background_color={ r: 255, g: 0, b: 0, a: 1 }, margin={ "top": "1em", "bottom": "1em" }, %} {% end_dnd_column %} ``` ```text résultat.txt theme={null}
``` Une balise `dnd_column` peut également contenir `dnd_row`. ## dnd\_row [`{% dnd_row %}`](https://developers.hubspot.fr/docs/guides/cms/content/templates/drag-and-drop/overview#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ètre | Type | Description | | ---------------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `background_color` | Dict | Un dictionnaire qui permet de spécifier une [couleur d'arrière-plan](#background-color). | | `background_image` | Dict | Un dictionnaire qui permet de spécifier une [image d'arrière-plan](#background-image). | | `background_linear_gradient` | Dict | Un dictionnaire qui permet de spécifier un [arrière-plan à dégradé linéaire](#background-linear-gradient). | | `margin` | Dict | Un 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_width` | Entier | Une valeur en pixels qui définit la largeur maximale d'un contenu sur une balise dict. | | `padding` | Dict | Un 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_alignment` | Chaîne | Alignement vertical du contenu enfant. Les options disponibles incluent :
| ### Remarque: Vous ne pouvez utiliser qu'un seul paramètre d'arrière-plan par balise `dnd_row`. ```text entrée.txt theme={null} {% 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 %} ``` ```text résultat.txt theme={null}
``` Une balise dnd\_row peut également contenir les balises suivantes : * `dnd_column` * `dnd_module` ## dnd\_module [`{% dnd_module %}`](https://developers.hubspot.fr/docs/guides/cms/content/templates/drag-and-drop/overview#module) est un [module](https://developers.hubspot.fr/docs/guides/cms/content/modules/overview) 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ètre | Type | Description | | ---------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `path` | Chaîne | Chemin d'accès à un module. | | `horizontal_alignment` | Chaîne | Positionnement horizontal, prend en charge : `LEFT`, `CENTER` et `RIGHT` | | `offset` | Entier | Décalage par rapport à 0 dans la grille à 12 colonnes. | | `width` | Entier | Nombre de colonnes occupant la grille de 12 colonnes. | | `flexbox_positioning` | Chaîne | **Obsolè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 : | 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](/cms/reference/modules/using-modules-in-templates#passing-fields-that-have-dnd-associated-parameters), tout comme vous le feriez pour un groupe de champs. ```text entrée.txt theme={null} {% dnd_module path="@hubspot/rich_text", offset=0, width=8, %} {% module_attribute "html" %}

Hello, world!

{% end_module_attribute %} {% end_dnd_module %} ``` ```text résultat.txt theme={null}

Hello, world!
``` ## 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-image), [`background_linear_gradient`](#background-linear-gradient) et [`background_color`](#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. ```hubl theme={null} {% 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ètre | Type | Description | | ----------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `direction` | Chaîne | La direction du dégradé. | | `colors` | Tableau | Tableau 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 : | ```hubl theme={null} {% 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é | Type | Description | | -------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `backgroundPosition` | Chaîne | La position de l'image en arrière-plan. Prend en charge une chaîne indiquant la position verticale suivie de la position horizontale. | | `backgroundSize` | Chaîne | Propriété de taille d'arrière-plan de la CSS utilisée pour l'image.
Valeurs prises en charge : | | `imageUrl` | Chaîne | URL absolue de l'image. | ```hubl theme={null} {% 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](#background), 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 `` de la page dans une balise `