> ## 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.

# Créer une zone de glisser-déposer

> Utilisez des zones de glisser-déposer pour aider les créateurs de contenu à apporter facilement des modifications de mise en page, de style et de contenu.

export const SupportedProducts = ({marketing, sales, service, cms, marketingLevel, salesLevel, serviceLevel, cmsLevel}) => {
  const translations = {
    header: "Produits pris en charge",
    description: "Exige l'un des produits suivants ou un produit supérieur.",
    productNames: {
      marketing: "Marketing Hub",
      sales: "Sales Hub",
      service: "Service Hub",
      cms: "Content Hub"
    },
    tiers: {
      free: "Gratuit",
      starter: "Starter",
      professional: "Pro",
      enterprise: "Entreprise"
    }
  };
  const translateTier = tier => {
    if (!tier) return '';
    const lowerTier = tier.toLowerCase();
    return translations.tiers[lowerTier] || tier;
  };
  const products = [{
    name: marketing ? translations.productNames.marketing : '',
    level: translateTier(marketingLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/marketing-bolt.svg",
    alt: "Marketing Hub"
  }, {
    name: sales ? translations.productNames.sales : '',
    level: translateTier(salesLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/sales-star.svg",
    alt: "Sales Hub"
  }, {
    name: service ? translations.productNames.service : '',
    level: translateTier(serviceLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/service-heart.svg",
    alt: "Service Hub"
  }, {
    name: cms ? translations.productNames.cms : '',
    level: translateTier(cmsLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/content-play.svg",
    alt: "Content Hub"
  }].filter(product => product.name && product.level);
  if (products.length === 0) return null;
  return <div>
      <div className="text-sm mb-2">{translations.description}</div>
      <div className={`grid ${products.length === 1 ? 'grid-cols-1' : 'grid-cols-2'} gap-1.5`}>
        {products.map((product, index) => <div key={index} style={{
    display: 'flex',
    alignItems: 'center'
  }}>
            <img src={product.icon} alt={product.alt} className="w-3.5 h-3.5 mr-1.5 mt-2.5 mb-2.5 flex-shrink-0 align-middle" />
            <span className="font-medium mr-1 text-sm">{product.name} -</span>
            <span className="text-sm">{product.level}</span>
          </div>)}
      </div>
    </div>;
};

<Accordion title="Produits pris en charge" defaultOpen="true" icon="cubes">
  <SupportedProducts marketing={true} marketingLevel="professional" cms={true} cmsLevel="professional" />
</Accordion>

Les [zones de glisser-déposer](https://developers.hubspot.fr/docs/guides/cms/content/templates/drag-and-drop/overview) 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.

<Frame>
  <img src="https://newinboundblog.hubspot.com/hubfs/a%20new%20approach.gif" alt="Animation de modules glissés sur une page, avec ajustement des colonnes et des lignes" />
</Frame>

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](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/home.html) 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](/docs/cms/reference/hubl/tags/dnd-areas).

<Warning>
  **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](/docs/cms/reference/hubl/tags/dnd-areas).

  * 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é.
</Warning>

<Steps>
  <Step title="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.

    <Info>
      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](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() }}`](/docs/cms/reference/hubl/tags/standard-tags#require-css).
    </Info>
  </Step>

  <Step title="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.

    ```hubl theme={null}
    {% dnd_area "body_dnd_area" %}
    	<!-- generates an empty drag and drop area drop-section -->
    {% end_dnd_area %}
    ```
  </Step>

  <Step title="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](/docs/cms/reference/hubl/tags/dnd-areas).

    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`.

    ```hubl theme={null}
    {% 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.

    <Frame>
      <img src="https://newinboundblog.hubspot.com/hubfs/dnd_rich_text.png" alt="Capture d'écran de l'éditeur de page avec la barre d'outils du module affichée" />
    </Frame>
  </Step>

  <Step title="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.

    ```hubl theme={null}
    {% 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.

    <Frame>
      <img src="https://newinboundblog.hubspot.com/hubfs/dnd_rich_image.png" alt="capture d'écran de l'éditeur de page montrant un module d'image ajouté à une section" />
    </Frame>
  </Step>

  <Step title="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.

    ```hubl theme={null}
    {% 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.

    <Frame>
      <img src="https://newinboundblog.hubspot.com/hubfs/dnd_area_full.png" alt="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." />
    </Frame>
  </Step>

  <Step title="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 :

    ```css theme={null}
    .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](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/css/objects). Votre feuille de style peut être ajoutée au modèle en utilisant [`{{ require_css() }}`](/docs/cms/reference/hubl/tags/standard-tags#require-css).
  </Step>
</Steps>

## Tutoriels connexes

* [Premiers pas avec les thèmes](/docs/cms/start-building/building-blocks/themes/getting-started)
* [Premiers pas avec les modules personnalisés](/docs/cms/start-building/building-blocks/modules/overview)
* [Ajouter des fonctionnalités de thème à un site existant](/docs/cms/best-practices/improve-existing-sites/add-theme-features-to-existing-sites)