Zum Hauptinhalt springen
Dernière modification : 8 octobre 2025
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, et la référence dnd_area pour créer directement votre contenu.

​
Remarque :

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

​
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.
  • 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 de l'éditeur de page pour les zones de glisser-déposer dnd_areas

​
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, 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, 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 pour voir les balises dnd_area utilisées.
dnd_area codé en VS Code

​
É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** :** 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** :** 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** :** peut contenir dnd_row. La présence de plusieurs colonnes dans un dnd_row alignera le contenu de la ligne horizontalement.
  • dnd_row** :** peut contenir dnd_module et dnd_column.
  • 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 pour une approche pratique.
Relations entre les éléments de glisser-déposer
Le diagramme ci-dessous détaille la hiérarchie des différents éléments en glisser-déposer.
Exemple de structure
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. 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 <section>. Vous trouverez ci-dessous une capture d’écran montrant comment une section apparaît dans l’éditeur de pages.
Section dans l'éditeur de page
Outre la balise dnd_section, vous pouvez également créer des modèles de section 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. 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.
dnd_area column in page editor
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. 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.
dnd_area row in page editor
L’apparence d’une ligne dans l’éditeur de page.

​
Modules

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

​
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 du boilerplate du CMS Hub. 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. 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 un paramètre de classe avec le nom de la classe que vous souhaitez utiliser. 
<div class="container-fluid my-custom-class">
  <div class="row-fluid-wrapper">
    <div class="row-fluid">
      <div
        class="span12 widget-span widget-type-cell "
        style=""
        data-widget-type="cell"
        data-x="0"
        data-w="12"
      ></div>
      <!--end widget-span -->
    </div>
  </div>
</div>

​
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

​
Ressources associées

⌘I