Premiers pas avec les zones de glisser-déposer

Last updated:
APPLICABLE PRODUCTS
  • Marketing Hub
    • Professional or Enterprise
  • CMS Hub
    • Professional or Enterprise

Les zones de glisser-déposer permettent aux développeurs de créer des sections de page qui prennent en charge les modifications de mise en page, de style et de contenu directement dans les éditeurs de contenu. Cela permet aux développeurs de créer quelques 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, sans jamais se perdre dans le code ou nécessiter de nouveaux modèles pour de petites modifications de la mise en page.

Animation de modules glissés sur une page, avec ajustement des colonnes et des lignes

Les développeurs peuvent spécifier des zones de dépôt vides pour les zones de glisser-déposer, où les créateurs de contenu créent leur propre contenu et leur propre mise en page. Ils peuvent également pré-remplir les zones de glisser-déposer avec divers modules, mises en page, styles et contenus pour servir de point de départ aux créateurs de contenu.

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.

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 de glisser-déposer restituent 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. Un exemple des styles de mise en page que vous pouvez mettre en œuvre se trouve dans le cms-theme-boilerplate. 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.

Définissons une image d'arrière-plan ainsi qu'un alignement vertical centré et une largeur maximale de 1000 px 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, nous pouvons utiliser la balise dnd_module pour inclure un module en mentionnant son chemin d'accès. Dans cet exemple, nous faisons référence à un module HubSpot par défaut, mais vous pouvez également inclure des modules que vous avez créés, en spécifiant leur chemin d'accès dans l'arborescence de fichier des outils de conception.

Pour spécifier une valeur par défaut pour notre élément dnd_module, nous pouvons utiliser 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 %}

Maintenant, nous pouvons voir que notre zone de glisser-déposer contient un module que les créateurs de contenu peuvent modifier dans l'éditeur de contenu. Nous pouvons également voir comment la définition de max_width sur dnd_section affecte notre 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, nous pouvons utiliser plusieurs balises dnd_module. En réglant les paramètres offset et width qui sont basés sur une grille à 12 colonnes, nous pouvons placer un module d'image à côté de notre module de texte enrichi.

{% 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> <p>Use this space to tell everyone about what you have to offer.</p> {% 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 %}

Désormais, nous disposons également d'un module d'image modifiable ainsi que d'une poignée de glissement permettant aux créateurs de contenu de modifier la largeur et le décalage des modules. Nous pouvons également voir comment la définition de vertical_alignment sur dnd_section permet de centrer verticalement notre 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 notre zone de glisser-déposer plus complexe, nous pouvons 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> <p>Use this space to tell everyone about what you have to offer.</p> {% 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, nos créateurs de contenu pourront contrôler davantage le style et la mise en page de lignes et de 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. Un exemple des styles de mise en page que vous pouvez mettre en œuvre se trouve dans le cms-theme-boilerplate. Votre feuille de style peut être ajoutée au modèle en utilisant {{ require_css() }}.

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.  

Tutoriels connexes

Cet article vous a-t-il été utile ?
Ce formulaire est destiné à recueillir les avis sur la documentation pour les développeurs. Si vous souhaitez faire part de votre avis sur les produits HubSpot, veuillez le partager sur le forum des idéesde la communauté.