Premiers pas avec les zones de glisser-déposer
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.

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.
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() }}
.
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.
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.
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.
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.

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.
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 :
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.
Merci d'avoir partagé votre avis.