Produits pris en charge
Exige l'un des produits suivants ou un produit supérieur.
Marketing HubMarketing HubPro
Content HubContent HubPro
Dernière modification : 22 août 2025
Les zones de glisser-déposer permettent aux développeurs de créer des sections de modèles d’e-mails personnalisés qui prennent en charge les modifications de mise en page, de style et de contenu directement dans l’éditeur d’e-mail. Cela permet aux développeurs de créer moins de modèles avec une structure globale, qui permettent aux créateurs de contenu de créer une multitude de pages avec des objectifs et des mises en page différents.
Remarque : les modèles d’e-mails personnalisés peuvent uniquement contenir une zone de glisser-déposer.
1

Créer un nouveau modèle HTML

Créez un nouveau modèle HTML pour inclure le code HubL et HTML qui constitueront votre section de glisser-déposer :
  • Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.
  • Dans la barre latérale de gauche, créez un nouveau fichier en cliquant sur Fichier > Nouveau fichier.
  • Dans la boîte de dialogue, cliquez sur le menu déroulant Que souhaiteriez-vous créer aujourd’hui ? et sélectionnez HTML et HUBL.
  • Cliquez sur Suivant.
  • Cliquez sur le menu déroulant Type de modèle, puis sélectionnez E-mail.
  • Saisissez un nom pour le modèle.
  • Pour mettre à jour l’emplacement du modèle, cliquez sur Modifier sous Emplacement du fichier, puis sélectionnez un nouveau dossier dans lequel le modèle sera créé.
  • Cliquez sur Créer.
2

Ajouter des balises HubL à l

Vérifiez les balises obligatoires et facultatives suivantes que vous pouvez inclure dans la section <head> de votre modèle d’e-mail à des fins de style et de compatibilité :

​
Balise requise

{{ dnd_area_stylesheet }}Cette balise fournira les éléments suivants :
  • Ajout des requêtes média associées
  • Correction des problèmes de style connus dans Outlook
  • Réinitialisation des marges et des remplissages
  • Activation de l’anticrénelage
  • Ajout de CSS

​
Balises facultatives

Pour garantir une restitution cohérente de votre modèle sur tous les principaux clients de messagerie, vous pouvez également inclure les balises HubL facultatives suivantes à votre modèle :
  • {{ email_header_includes }} : cette balise injecte du CSS dans votre modèle afin d’assurer un rendu cohérent du style, de résoudre les problèmes de style les plus courants et d’ajouter des métadonnées au code HTML de l’e-mail. Lors de l’analyse de cette balise HubL, le contenu suivant sera ajouté dans le <head> du code HTML de l’e-mail :
ParamètreDescription
<meta name="x-apple-disable-message-reformatting">Empêche iOS 11 de mettre automatiquement à l’échelle les e-mails.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">Informe les navigateurs et les clients de messagerie de la manière dont vous attendez d’eux qu’ils interprètent les différents caractères.
<meta http-equiv="X-UA-Compatible" content="IE=edge">Active CSS3 et les requêtes média sur Windows Phone 7,5, informe Internet Explorer d’afficher le contenu dans le mode le plus élevé possible et permet au navigateur de choisir la version d’Internet Explorer avec laquelle l’e-mail doit être restitué.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>Définit la zone visibles sur la largeur de l’écran de l’appareil, ce qui permet de rendre votre e-mail adaptable.
  • {{ reset_css_stylesheet }} : l’utilisation de cette balise corrige plusieurs problèmes de style dans Outlook, et réinitialise également les marges et les remplissages de votre e-mail.
  • {{ outlook_background_snippet }} : cette balise définit l’image ou la couleur d’arrière-plan dans Outlook, à condition que vous ayez spécifié une règle CSS d’arrière-plan associée.
3

Créer une zone de glisser-déposer

Après avoir ajouté la balise HubL {{ dnd_area_stylesheet }} et toute autre balise facultative à la balise <head> de votre modèle, vous pouvez configurer une zone dnd_area dans le corps du modèle.

​
Créer une zone de glisser-déposer vide

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.La zone de glisser-déposer peut être entourée de <div> ou de <table>. L’une des contraintes de la zone de glisser-déposer est que la largeur minimale est fixée à 624 pixels et que cette valeur ne peut pas être modifiée.Cette balise génère à elle seule une zone de dépôt sur laquelle les créateurs de contenu peuvent faire glisser des modules dans l’éditeur d’e-mail.Le code suivant spécifie une zone de glisser-déposer vide :
{% dnd_area "main" %}
	<!-- generates an empty drag and drop area drop-section -->
{% end_dnd_area %}

​
Créer une zone de glisser-déposer avec des colonnes vides

Vous pouvez également personnaliser votre zone de glisser-déposer pour spécifier des sections et des colonnes par défaut en utilisant les champs dnd_section et dnd_column.Par exemple, le code HubL suivant spécifie une zone aires de glisser-déposer avec 3 colonnes :
{% dnd_area "main" %}
  {% dnd_section padding={'top': 25, 'bottom': '20} %}
    {% dnd_column width=4 %}
    {% end_dnd_column %}
    {% dnd_column width=4 %}
    {% end_dnd_column %}
    {% dnd_column width=4 %}
    {% end_dnd_column %}
  {% end_dnd_section %}
{% end_dnd_area %}
La balise HubL dnd_row n’est pas actuellement prise en charge dans les modèles d’e-mail.
4

Ajouter une aire glisser-déposer avec des modules

Pour remplir une section avec du contenu, vous pouvez utiliser la balise dnd_module pour inclure un module en mentionnant son chemin d’accès. Le module doit être ajouté à l’intérieur d’une section et d’une colonne afin de pré-remplir la zone de glisser-déposer avec du contenu.Dans l’exemple ci-dessous, un module HubSpot par défaut est référencé, mais vous pouvez également inclure des modules que vous avez créés en spécifiant leur chemin d’accès dans l’arborescence de votre gestionnaire de conception.Pour spécifier une valeur par défaut pour l’élément dnd_module, vous pouvez utiliser la balise module_attribute.
{% dnd_area "main", full_width=False %}
	{% dnd_section padding={
	            'top':'25',
	            'bottom':'20'
	            }, full_width=False %}
	  {% dnd_column width=6 %}
	    {% dnd_module path='@hubspot/image_email', img={
	                    'alt':'NavyLogo',
	                    'height':38,
	                    'src':'email_dnd_template_images/NavyLogo.png',
	                    'width':120
	                    }, alignment='center', hs_enable_module_padding=True, hs_wrapper_css={
	                    'padding-bottom':'10px',
	                    'padding-left':'20px',
	                    'padding-right':'20px',
	                    'padding-top':'10px'
	                    } %}
	    {% end_dnd_module %}
	  {% end_dnd_column %}
	  {% dnd_column width=6 %}
	  {% end_dnd_column %}
	{% end_dnd_section %}
{% end_dnd_area %}
5

Personnaliser et styliser davantage votre modèle de glisser-déposer

Chaque balise HubL de glisser-déposer (par exemple, dnd_area, dnd_section ou encore dnd_column) comprend différents paramètres que vous pouvez utiliser pour fournir un style par défaut et spécifier d’autres comportements tels que le libellé qui apparaîtra dans la barre latérale de l’éditeur d’e-mail.Pour en savoir plus sur les paramètres disponibles pour chaque balise, consultez les liens ci-dessous :