> ## 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.
# Présentation des zones de glisser-déposer
> Les zones de glisser-déposer permettent aux créateurs de contenu de placer des modules, de modifier la mise en page et certains styles dans les éditeurs de contenu. Les développeurs créent des mises en page prédéfinies.
Les zones de glisser-déposer vous permettent de créer des zones de pages et des partiels globaux dans lesquels les créateurs de contenu peuvent placer des modules, modifier la mise en page et ajouter des styles dans l'éditeur de contenu. En utilisant les zones de glisser-déposer, vous pouvez créer moins de modèles, car les créateurs de contenu peuvent créer leurs propres mises en page.
Découvrez ci-dessous l'expérience et les concepts de `dnd_area`. Consultez la page [Démarrer avec les dnd\_area](/cms/start-building/building-blocks/drag-and-drop/tutorial), et la référence [dnd\_area](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas) pour créer directement votre contenu.
### 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 les [modèles d'e-mails](/cms/start-building/building-blocks/templates/overview#email).
## L'expérience du créateur de contenu
Lorsqu'un créateur de contenu crée une page à l'aide d'un modèle comportant des zones de glisser-déposer, il voit d'abord la page avec des modules prédéfinis dans la mise en page que vous avez définie en tant que développeur. Cette première mise en page constitue un précédent pour l'apparence des pages utilisant ce modèle. À l'aide des zones de glisser-déposer, le créateur de contenu peut ensuite construire la page, notamment :
* Ajout de modules, de sections, de lignes et de colonnes.
* Redimensionnement des modules et mise à jour de leur contenu et de leur style, par exemple ajustement de l'alignement et ajout d'arrière-plans.
Ils peuvent ainsi apporter de simples modifications aux pages sans avoir à faire appel à un développeur pour de petits ajustements.
### 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](https://developers.hubspot.fr/docs/reference/cms/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`.
Lorsque le modèle de la page est changé, tout contenu existant ajouté aux zones de glisser-déposer du premier modèle sera conservé.
## L'expérience du développeur
Le développement avec des zones de glisser-déposer est similaire au travail avec les cadres CSS courants et leurs grilles. Tout d'abord, la page est mise en page à l'aide de conteneurs, appelés [sections](/cms/start-building/building-blocks/sections/sections), qui contiennent des lignes. À l'intérieur de ces lignes se trouvent des modules et des colonnes. Pour en savoir plus sur ces [éléments](#drag-and-drop-area-elements), voir ci-dessous.
Bien que vous puissiez coder presque tout dans le modèle, l'objectif du développement avec des zones de glisser-déposer est de construire le contenu de la page par défaut, qui pourra ensuite être modifié par un créateur de contenu.
Consultez les [modèles HubSpot CMS Boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates) pour voir les balises `dnd_area` utilisées.
## Éléments des zones de glisser-déposer
Lorsque vous construisez une page avec des zones de glisser-déposer, vous incluez les éléments suivants :
* [**dnd\_area**](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#dnd-area)\*\* :\*\* l'élément de glisser-déposer de plus haut niveau qui permet de glisser-déposer des modules dans l'éditeur de contenu. Il n'est pas possible d'imbriquer des zones par glisser-déposer. Par exemple, `dnd_section` ne peut pas contenir une balise `dnd_area`.
* [**dnd\_section**](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#dnd-section)\*\* :\*\* le conteneur le plus à l'extérieur dans un `dnd_area`. Peut contenir `dnd_row`, `dnd_column`, et `dnd_module`. Il n'est pas possible d'imbriquer `dnd_section` dans d'autres éléments de type glisser-déposer.
* [**dnd\_column**](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#dnd-column)\*\* :\*\* peut contenir `dnd_row`. La présence de plusieurs colonnes dans un `dnd_row` alignera le contenu de la ligne horizontalement.
* [dnd\_row](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#dnd-row)\*\* :\*\* peut contenir `dnd_module` et `dnd_column`.
* [dnd\_module](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#dnd-module)\*\* :\*\* un cadre de module où la présentation, les styles et le contenu du module peuvent être ajoutés.
En savoir plus sur chacune des balises ci-dessous. En outre, vous pouvez consulter le guide [Démarrer avec les zones de glisser-déposer](/cms/start-building/building-blocks/drag-and-drop/tutorial) pour une approche pratique.
Le diagramme ci-dessous détaille la hiérarchie des différents éléments en glisser-déposer.
Pour une démonstration de la visualisation des zones de glisser-déposer, regardez la vidéo ci-dessous :
Poursuivez votre lecture pour en savoir plus sur les sections, lignes, colonnes et modules de glisser-déposer.
### Sections
Les sections sont un type particulier de lignes qui sont créées à l'aide de la balise [`dnd_section`](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-section-code-dnd-section-code-). Elles sont le seul élément de glisser-déposer pouvant être un descendant direct de `dnd_area`. Les sections servent d'encadrement extérieur. Elles peuvent permettre au contenu d'être en pleine largeur ou d'avoir une largeur maximale confinée au centre. Comme les sections s'articulent autour des colonnes et des modules, il est facile de réorganiser et d'implémenter de grandes quantités de contenu. La balise `dnd_section` n'assure pas le rendu d'un élément HTML ``.
Vous trouverez ci-dessous une capture d'écran montrant comment une section apparaît dans l'éditeur de pages.
Outre la balise `dnd_section`, vous pouvez également créer des [modèles de section](/cms/start-building/building-blocks/sections/sections#create-reusable-sections) qui sont des sections prédéfinies et réutilisables auxquelles les créateurs de contenu peuvent accéder dans l'éditeur de page. Par exemple, vous pouvez créer la section illustrée dans la capture d'écran ci-dessus sous la forme d'un modèle de section afin qu'un créateur de contenu puisse l'ajouter rapidement aux pages en fonction de ses besoins. Les sections réutilisables ont de nombreuses spécificités : elles peuvent notamment être utilisées comme un modèle de partial standard hubL.
### Colonnes
Les colonnes servent de cadre aux lignes et aux modules, et peuvent être placées à l'intérieur d'une ligne ou d'une section. Les colonnes sont créées à l'aide de la balise [`dnd_column`](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-column-code-dnd-column-code-).
Utilisez plusieurs colonnes à l'intérieur d'une ligne pour placer horizontalement les lignes et les modules qu'elles contiennent.
Les colonnes sont des zones verticales qui peuvent contenir des lignes. Vous pouvez créer des colonnes de tailles différentes en modifiant leur largeur. La largeur d'une ligne est de 12 « colonnes », en référence à la grille CSS. Les colonnes situées à l'intérieur d'une ligne peuvent avoir toute taille inférieure à 12, mais leur total ne peut pas dépasser 12.
Lorsque plusieurs lignes sont placées à l'intérieur d'une colonne, les modules de ces lignes apparaissent empilés verticalement. Comme les modules sont eux-mêmes des colonnes, ils ne peuvent pas être des descendants directs d'une colonne. Ils doivent être contenus dans une ligne.
L'apparence d'une colonne dans l'éditeur de page.
### Lignes
Les lignes encadrent les colonnes. Elles peuvent être créées dans les modèles à l'aide de la balise [`dnd_row`](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-row-code-dnd-row-code-). Comme les modules sont des colonnes, vous pouvez les placer directement à l'intérieur d'une ligne. Ainsi, les modules apparaîtront horizontalement les uns à côté des autres.
Les modules peuvent être organisés verticalement en les plaçant à l'intérieur de lignes. Si vous voulez placer un module au-dessus d'un autre, vous devez placer ce module à l'intérieur d'une ligne. Vous devez ensuite ajouter un autre module dans une ligne au-dessus ou en dessous de cette première ligne.
L'apparence d'une ligne dans l'éditeur de page.
### Modules
Les [modules](/cms/start-building/building-blocks/modules/overview) sont une partie fondamentale du CMS Hub, agissant comme des blocs de construction réutilisables destinés à assembler un site et afficher du contenu. Lors de la création d'un modèle, vous placez les modules à l'intérieur des lignes et des sections de glisser-déposer en utilisant la balise [`dnd_module`](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-module-code-dnd-module-code-). Les modules sont également des colonnes. Cela signifie que si vous placez deux balises de module, ou un module et une colonne directement l'un à côté de l'autre, ils apparaîtront côte à côte horizontalement.
Il est impossible de placer des éléments de glisser-déposer dans un module. Les modules ne peuvent pas être les enfants directs de [`dnd_area`](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-area-code-dnd-area-code-).
## Structure et style HTML
Une fois rendus, les zones de glisser-déposer et leurs éléments associés ont des noms de classe pour une grille à 12 colonnes développée sous bootstrap 2. Pour faciliter la mise en route, vous pouvez utiliser le fichier [\_layout.css](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/objects/_layout.css) du [boilerplate du CMS Hub.](https://github.com/HubSpot/cms-theme-boilerplate/) Cette action fournit des styles par défaut pour ces noms de classe.
Il n'est pas obligatoire d'utiliser cette feuille de style et pouvez définir vos propres styles à la place. Si vous construisez votre site à partir du boilerplate du thème CMS et que vous souhaitez utiliser votre propre CSS, vous devez [supprimer l'appel de layout.css dans base.html](https://github.com/HubSpot/cms-theme-boilerplate/blob/5abaf2a4c45a95dbed1d459f7f0f6407350752ac/src/templates/layouts/base.html#L8). Pour votre propre grille CSS, vous devrez cibler ces mêmes noms de classe de grille, mais le choix du style vous appartient.
Lors du rendu, les zones de glisser-déposer créent des balises div avec des classes utilisées par l'éditeur de page. Par exemple, `widget-span` et `widget-type-cell`. Ne ciblez pas directement ces classes, car elles sont utilisées par l'éditeur de pages et peuvent évoluer dans le temps.
Au lieu de cela, ajoutez dans votre [`dnd_area`](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-area-code-dnd-area-code-) un paramètre de classe avec le nom de la classe que vous souhaitez utiliser.
```html theme={null}
```
### Style de l'éditeur et des attributs
Grâce aux zones de glisser-déposer, les créateurs de contenu peuvent avoir une certaine influence sur le style de la page. Ils peuvent par exemple faire en sorte qu'une section ait un arrière-plan. Les développeurs peuvent transmettre des valeurs par défaut pour ces paramètres par le biais d'attributs.
Lors du rendu de la page, les styles générés en fonction de ces paramètres sont ajoutés à `standard_header_includes`.
## Migration des colonnes flexibles
Si vous changez des modèles construits avec des colonnes flexibles pour utiliser des zones de glisser-déposer, gardez à l'esprit certains éléments.
Les colonnes flexibles ne sont pas les mêmes que les zones de glisser-déposer. Vous ne pouvez pas passer d'un modèle qui ne comporte qu'une colonne flexible à un modèle qui ne comporte qu'une zone de glisser-déposer. Cette limitation a été mise en place parce que le contenu ne pouvait pas être transféré de la colonne flexible à la zone de glisser-déposer. Pour illustrer ce phénomène, supposons que vous ayez construit votre nouveau modèle de manière à avoir une barre latérale et une zone de contenu principal. Votre barre latérale est une colonne flexible, votre contenu principal est une zone de glisser-déposer. L'outil de permutation fait correspondre la colonne flexible à la colonne flexible.
En savoir plus sur l'[ajout de zones de glisser-déposer à des pages existantes](https://developers.hubspot.fr/docs/guides/cms/improve-older-sites/add-theme-features-to-existing-sites#drag-and-drop-areas)
## Ressources associées
* [Ajout de zones de glisser-déposer à des sites web existants](https://developers.hubspot.fr/docs/guides/cms/improve-older-sites/add-theme-features-to-existing-sites#drag-and-drop-areas)
* [Création d'une zone de dépôt](/cms/start-building/building-blocks/drag-and-drop/tutorial)
* [Visualisation des zones de glisser-déposer - YouTube](https://www.youtube.com/watch?v=RUs24n8DfzA\&feature=youtu.be)
## L'expérience du développeur
Le développement avec des zones de glisser-déposer est similaire au travail avec les cadres CSS courants et leurs grilles. Tout d'abord, la page est mise en page à l'aide de conteneurs, appelés [sections](/cms/start-building/building-blocks/sections/sections), qui contiennent des lignes. À l'intérieur de ces lignes se trouvent des modules et des colonnes. Pour en savoir plus sur ces [éléments](#drag-and-drop-area-elements), voir ci-dessous.
Bien que vous puissiez coder presque tout dans le modèle, l'objectif du développement avec des zones de glisser-déposer est de construire le contenu de la page par défaut, qui pourra ensuite être modifié par un créateur de contenu.
Consultez les [modèles HubSpot CMS Boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates) pour voir les balises `dnd_area` utilisées.
## Éléments des zones de glisser-déposer
Lorsque vous construisez une page avec des zones de glisser-déposer, vous incluez les éléments suivants :
* [**dnd\_area**](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#dnd-area)\*\* :\*\* l'élément de glisser-déposer de plus haut niveau qui permet de glisser-déposer des modules dans l'éditeur de contenu. Il n'est pas possible d'imbriquer des zones par glisser-déposer. Par exemple, `dnd_section` ne peut pas contenir une balise `dnd_area`.
* [**dnd\_section**](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#dnd-section)\*\* :\*\* le conteneur le plus à l'extérieur dans un `dnd_area`. Peut contenir `dnd_row`, `dnd_column`, et `dnd_module`. Il n'est pas possible d'imbriquer `dnd_section` dans d'autres éléments de type glisser-déposer.
* [**dnd\_column**](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#dnd-column)\*\* :\*\* peut contenir `dnd_row`. La présence de plusieurs colonnes dans un `dnd_row` alignera le contenu de la ligne horizontalement.
* [dnd\_row](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#dnd-row)\*\* :\*\* peut contenir `dnd_module` et `dnd_column`.
* [dnd\_module](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#dnd-module)\*\* :\*\* un cadre de module où la présentation, les styles et le contenu du module peuvent être ajoutés.
En savoir plus sur chacune des balises ci-dessous. En outre, vous pouvez consulter le guide [Démarrer avec les zones de glisser-déposer](/cms/start-building/building-blocks/drag-and-drop/tutorial) pour une approche pratique.
Le diagramme ci-dessous détaille la hiérarchie des différents éléments en glisser-déposer.
Pour une démonstration de la visualisation des zones de glisser-déposer, regardez la vidéo ci-dessous :
Poursuivez votre lecture pour en savoir plus sur les sections, lignes, colonnes et modules de glisser-déposer.
### Sections
Les sections sont un type particulier de lignes qui sont créées à l'aide de la balise [`dnd_section`](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-section-code-dnd-section-code-). Elles sont le seul élément de glisser-déposer pouvant être un descendant direct de `dnd_area`. Les sections servent d'encadrement extérieur. Elles peuvent permettre au contenu d'être en pleine largeur ou d'avoir une largeur maximale confinée au centre. Comme les sections s'articulent autour des colonnes et des modules, il est facile de réorganiser et d'implémenter de grandes quantités de contenu. La balise `dnd_section` n'assure pas le rendu d'un élément HTML `
Outre la balise `dnd_section`, vous pouvez également créer des [modèles de section](/cms/start-building/building-blocks/sections/sections#create-reusable-sections) qui sont des sections prédéfinies et réutilisables auxquelles les créateurs de contenu peuvent accéder dans l'éditeur de page. Par exemple, vous pouvez créer la section illustrée dans la capture d'écran ci-dessus sous la forme d'un modèle de section afin qu'un créateur de contenu puisse l'ajouter rapidement aux pages en fonction de ses besoins. Les sections réutilisables ont de nombreuses spécificités : elles peuvent notamment être utilisées comme un modèle de partial standard hubL.
### Colonnes
Les colonnes servent de cadre aux lignes et aux modules, et peuvent être placées à l'intérieur d'une ligne ou d'une section. Les colonnes sont créées à l'aide de la balise [`dnd_column`](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-column-code-dnd-column-code-).
Utilisez plusieurs colonnes à l'intérieur d'une ligne pour placer horizontalement les lignes et les modules qu'elles contiennent.
Les colonnes sont des zones verticales qui peuvent contenir des lignes. Vous pouvez créer des colonnes de tailles différentes en modifiant leur largeur. La largeur d'une ligne est de 12 « colonnes », en référence à la grille CSS. Les colonnes situées à l'intérieur d'une ligne peuvent avoir toute taille inférieure à 12, mais leur total ne peut pas dépasser 12.
Lorsque plusieurs lignes sont placées à l'intérieur d'une colonne, les modules de ces lignes apparaissent empilés verticalement. Comme les modules sont eux-mêmes des colonnes, ils ne peuvent pas être des descendants directs d'une colonne. Ils doivent être contenus dans une ligne.
L'apparence d'une colonne dans l'éditeur de page.
### Lignes
Les lignes encadrent les colonnes. Elles peuvent être créées dans les modèles à l'aide de la balise [`dnd_row`](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-row-code-dnd-row-code-). Comme les modules sont des colonnes, vous pouvez les placer directement à l'intérieur d'une ligne. Ainsi, les modules apparaîtront horizontalement les uns à côté des autres.
Les modules peuvent être organisés verticalement en les plaçant à l'intérieur de lignes. Si vous voulez placer un module au-dessus d'un autre, vous devez placer ce module à l'intérieur d'une ligne. Vous devez ensuite ajouter un autre module dans une ligne au-dessus ou en dessous de cette première ligne.
L'apparence d'une ligne dans l'éditeur de page.
### Modules
Les [modules](/cms/start-building/building-blocks/modules/overview) sont une partie fondamentale du CMS Hub, agissant comme des blocs de construction réutilisables destinés à assembler un site et afficher du contenu. Lors de la création d'un modèle, vous placez les modules à l'intérieur des lignes et des sections de glisser-déposer en utilisant la balise [`dnd_module`](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-module-code-dnd-module-code-). Les modules sont également des colonnes. Cela signifie que si vous placez deux balises de module, ou un module et une colonne directement l'un à côté de l'autre, ils apparaîtront côte à côte horizontalement.
Il est impossible de placer des éléments de glisser-déposer dans un module. Les modules ne peuvent pas être les enfants directs de [`dnd_area`](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-area-code-dnd-area-code-).
## Structure et style HTML
Une fois rendus, les zones de glisser-déposer et leurs éléments associés ont des noms de classe pour une grille à 12 colonnes développée sous bootstrap 2. Pour faciliter la mise en route, vous pouvez utiliser le fichier [\_layout.css](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/objects/_layout.css) du [boilerplate du CMS Hub.](https://github.com/HubSpot/cms-theme-boilerplate/) Cette action fournit des styles par défaut pour ces noms de classe.
Il n'est pas obligatoire d'utiliser cette feuille de style et pouvez définir vos propres styles à la place. Si vous construisez votre site à partir du boilerplate du thème CMS et que vous souhaitez utiliser votre propre CSS, vous devez [supprimer l'appel de layout.css dans base.html](https://github.com/HubSpot/cms-theme-boilerplate/blob/5abaf2a4c45a95dbed1d459f7f0f6407350752ac/src/templates/layouts/base.html#L8). Pour votre propre grille CSS, vous devrez cibler ces mêmes noms de classe de grille, mais le choix du style vous appartient.
Lors du rendu, les zones de glisser-déposer créent des balises div avec des classes utilisées par l'éditeur de page. Par exemple, `widget-span` et `widget-type-cell`. Ne ciblez pas directement ces classes, car elles sont utilisées par l'éditeur de pages et peuvent évoluer dans le temps.
Au lieu de cela, ajoutez dans votre [`dnd_area`](https://developers.hubspot.fr/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-area-code-dnd-area-code-) un paramètre de classe avec le nom de la classe que vous souhaitez utiliser.
```html theme={null}