Produits pris en charge
Exige l'un des produits suivants ou un produit supérieur.
Marketing HubMarketing HubPro
Content HubContent HubPro
Dernière modification : 28 août 2025
Les zones de glisser-déposer sont des sections d’un modèle qui agissent comme des conteneurs vides qui peuvent être modifiés directement à partir de l’éditeur de page. La création de zones de glisser-déposer dans un modèle permet aux créateurs de contenu d’ajouter et de gérer les modules dans l’éditeur de page selon leurs besoins, plutôt que de s’appuyer sur des modules statiques intégrés au modèle.
Animation de modules glissés sur une page, avec ajustement des colonnes et des lignes
En plus d’utiliser les zones de glisser-déposer comme zones de dépôt vides pour les créateurs de contenu, vous pouvez également pré-remplir les zones de glisser-déposer avec divers modules, mises en page et contenus pour servir de point de départ. Ce tutoriel vous montrera comment configurer une zone de glisser-déposer simple. Pour plus de ressources de développement sur les zones de glisser-déposer, consultez le boilerplate et découvrez les bonnes pratiques de mise en œuvre ainsi que la documentation de référence sur les balises HubL pour les zones de glisser-déposer.
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 de glisser-déposer créés avec l’éditeur visuel de mise en page peuvent être remplacés par d’autres modèles de 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é.
1

Créer un nouveau modèle HTML

Créez un nouveau modèle HTML pour héberger le HubL et le HTML qui constitueront votre section 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 devez ajouter une feuille de style pour cibler ces noms de classe. Vous pouvez trouver un exemple de styles de mise en page que vous pouvez mettre en œuvre dans le Boilerplate de CMS Hub. Votre feuille de style peut être ajoutée au modèle en utilisant {{ require_css() }}.
2

Créer une zone de glisser-déposer

Un élément dnd_area 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.Cette balise génère à elle seule une zone de dépôt dans laquelle les créateurs de contenu peuvent faire glisser des modules.
{% dnd_area "body_dnd_area" %}
	<!-- generates an empty drag and drop area drop-section -->
{% end_dnd_area %}
3

Créer une section avec un module

Un élément dnd_section est une ligne de niveau supérieur et ne peut être qu’un enfant direct d’un élément dnd_area. Les sections prennent en charge une variété de paramètres qui contrôlent les valeurs par défaut des contrôles stylistiques dont disposent les créateurs de contenu pour les sections au sein des créateurs de contenu.Par exemple, le code ci-dessous crée une section avec une image d’arrière-plan (background_image). Cette section est centrée par un paramètre vertical-alignment et a une largeur de champ maximale de 1000px pour le contenu enfant. Pour obtenir une liste complète des paramètres pris en charge par les balises HubL de type glisser-déposer, consultez la documentation de référence sur les balises HubL de type glisser-déposer.Pour pré-remplir la section avec du contenu, le code comprend également une balise dnd_module permettant d’inclure un module en mentionnant son chemin d’accès. Dans cet exemple, la propriété dnd_module extrait le module de texte enrichi par défaut de HubSpot, tel que défini par le paramètre path. Une valeur par défaut pour le module de texte enrichi est spécifiée à l’aide de la balise module_attribute.
{% dnd_area "body_dnd_area" %}
    {% dnd_section
        background_image = {
            'backgroundPosition': 'MIDDLE_CENTER',
            'backgroundSize': 'cover',
            'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
          },
          max_width=1000,
          vertical_alignment='MIDDLE'
    %}
        {% dnd_module path='@hubspot/rich_text' %}
            {% module_attribute "html"%}
                This is your main headline.
                Use this space to tell everyone about what you have to offer.
            {% end_module_attribute %}
        {% end_dnd_module %}
    {% end_dnd_section %}
{% end_dnd_area %}
La zone de glisser-déposer contient alors un module que les créateurs de contenu peuvent modifier dans l’éditeur de contenu. Notez comment la configuration de max_width sur dnd_section affecte le contenu.
Capture d'écran de l'éditeur de page avec la barre d'outils du module affichée
4

Inclure plusieurs modules

Pour inclure plusieurs modules, vous pouvez utiliser plusieurs balises dnd_module. En réglant les paramètres offset et width qui sont basés sur une grille à 12 colonnes, vous pouvez placer un module d’image à côté du module de texte enrichi comme indiqué ci-dessous.
{% dnd_area "body_dnd_area" %}
    {% dnd_section
        background_image={
            'backgroundPosition': 'MIDDLE_CENTER',
            'backgroundSize': 'cover',
            'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
        },
        max_width=1000,
        vertical_alignment='MIDDLE'
    %}
        {% dnd_module path='@hubspot/rich_text', width=8, offset=0, label="Rich Text" %}
            {% module_attribute "html"%}
            	<h1>This is your main headline.</h1>


Use this space to tell everyone about what you have to offer.
            {% end_module_attribute %}
        {% end_dnd_module %}
        {% dnd_module path='@hubspot/linked_image',
          width=4,
          offset=8,
          img={
            "src": "https://www.dragndrop.com/placeholder-image.jpg",
            "alt": "Stock placeholder image"
          }
        %}
        {% end_dnd_module %}
    {% end_dnd_section %}
{% end_dnd_area %}
La page comprend désormais un module d’image modifiable ainsi qu’une poignée de glissement permettant aux créateurs de contenu de modifier la largeur et le décalage des modules. Notez que le fait de définir vertical_alignment sur dnd_section permet de centrer verticalement le contenu.
capture d'écran de l'éditeur de page montrant un module d'image ajouté à une section
5

Incorporer des colonnes et des lignes

Pour rendre la zone de glisser-déposer plus complexe, vous pouvez incorporer des lignes et des colonnes à l’aide des balises dnd_row et dnd_column. Les lignes et les colonnes agissent de la même manière que les sections dans l’éditeur de contenu, où les créateurs de contenu peuvent les faire glisser ainsi que les cloner, les supprimer et les styliser.
{% dnd_area "body_dnd_area" %}
  {% dnd_section
    background_image={
        'backgroundPosition': 'MIDDLE_CENTER',
        'backgroundSize': 'cover',
        'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
    },
    max_width=1000,
    vertical_alignment='MIDDLE'
  %}
    {% dnd_module path='@hubspot/linked_image',
      width=6,
      img={
        "src": "https://www.dragndrop.com/placeholder-image.jpg",
        "alt": "Stock placeholder image"
      }
    %}
    {% end_dnd_module %}
    {% dnd_column width=6, offset=6 %}
      {% dnd_row
        padding={
            'bottom': 15
        }
      %}
        {% dnd_module path='@hubspot/rich_text' %}
          {% module_attribute "html"%}
              <h1>This is your main headline.</h1>


Use this space to tell everyone about what you have to offer.
          {% end_module_attribute %}
        {% end_dnd_module %}
      {% end_dnd_row %}
      {% dnd_row %}
        {% dnd_module path='@hubspot/form' %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}
{% end_dnd_area %}
Désormais, les créateurs de contenu disposeront d’un contrôle plus poussé du style et de la mise en page sur des lignes et des colonnes spécifiques, en plus des modules et des sections.
Capture d'écran de l'éditeur de page montrant une ligne avec deux colonnes, un module d'image à gauche, un module de texte enrichi et un module de formulaire à droite.
6

Définir des styles génériques pour les composants de glisser-déposer

Les différents composants des zones de glisser-déposer, des sections, des colonnes, des lignes et des modules possèdent tous des classes qui peuvent être stylisées à l’aide de CSS. Les styles et options modifiables de ces composants peuvent être définis à l’aide de CSS plutôt que de HubL. Par exemple, le remplissage par défaut peut être défini sur dnd_sections avec la CSS :
.dnd-section {
  padding: 80px 20px;
}
Les sélecteurs CSS génériques pour les composants de la zone de glisser-déposer sont .dnd-section, .dnd-column, .dnd-row et .dnd-module. En dehors de ces classes préfixées dnd, les noms des classes de la grille dans le balisage sont basés sur des noms Bootstrap 2. Cela ne signifie pas que vous devez utiliser Bootstrap 2 avec des zones de glisser-déposer. Lorsque vous ajoutez dnd_area à votre page, vous devez fournir les styles qui permettent à la grille de fonctionner. Vous pouvez trouver un exemple de styles de mise en page que vous pouvez mettre en œuvre dans le Boilerplate de CMS Hub. Votre feuille de style peut être ajoutée au modèle en utilisant {{ require_css() }}.

​
Tutoriels connexes