Zones de glisser-déposer
Cette page illustre et explique l'expérience et les concepts des zones de glisser-déposer dnd_area. Il s'agit d'un élément très avancé. Il est donc nécessaire de se familiariser au préalable avec le code.
Une fois que vous êtes prêt à développer, consultez la section Démarrer avec dnd_area, et la Référence dnd_area.
Les zones de glisser-déposer permettent aux développeurs de créer des zones de pages et des partials globaux qui aident les créateurs de contenu dans la réalisation de leurs tâches. Les zones de glisser-déposer permettent aux créateurs de contenu de placer des modules, de modifier la mise en page et certains styles dans les éditeurs de contenu. Cela vous permet de créer moins de modèles utilisables par les créateurs de contenu pour générer eux-mêmes une multitude de pages aux objectifs et aux mises en page variés. Les créateurs de contenu peuvent le faire sans avoir à manipuler de code ou à utiliser de nouveaux modèles pour de petites modifications de la mise en page. Les zones de glisser-déposer sont polyvalentes et pratiques. C'est pourquoi au moins un modèle de votre thème devrait en être doté.
Remarque : pour le moment, les zones de glisser-déposer ne sont pas utilisables dans les articles de blog ni dans les modèles d'e-mail.
Lorsqu'un créateur de contenu crée une page à l'aide d'un modèle qui comporte des zones de glisser-déposer, il voit d'abord la page avec des modules prédéfinis placés dans une mise en page donnée déterminée par le développeur. Cela donne au créateur de contenu une idée de ce à quoi ressembleront la plupart des pages lors du rendu. Il s'agit d'un point de départ pour les créateurs de contenu et non pas d'une apparence figée. Les créateurs de contenu peuvent glisser et déposer les modules, les sections, les lignes et les colonnes pour les réorganiser. Ils peuvent les redimensionner, modifier leur contenu et ajuster divers paramètres de style visuel afin d'aligner verticalement et horizontalement le contenu et d'ajouter des arrière-plans.
Les créateurs de contenu disposent ainsi d'un vaste panel d'options. Ils peuvent ainsi apporter de simples modifications aux pages sans avoir à faire appel à un développeur pour de petits ajustements.
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 construits avec l'éditeur visuel de mise en page par glisser-déposer peuvent être remplacés par d'autres modèles par 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_areane peuvent être échangés que contre d'autres modèles codés sans balisesdnd_area.
Pour les développeurs, travailler avec dnd_area revient à travailler avec les cadres CSS courants et leurs grilles. Les développeurs organisent la page à l'aide de conteneurs appelés « sections », qui contiennent des lignes. À l'intérieur de ces lignes se trouvent des modules et des colonnes. Presque tout ce que les créateurs de contenu peuvent faire dans l'éditeur de page avec les balises de zones de glisser-déposer, les développeurs peuvent le faire eux-mêmes sous forme de code dans les modèles. Ce que les développeurs construisent est le contenu par défaut des pages utilisant ce modèle.
L'avantage d'utiliser des zones de glisser-déposer plutôt que de coder en dur les balises des modules dans le modèle est que les créateurs de contenu peuvent modifier le contenu et la mise en page à l'intérieur de ces zones. Grâce à cette flexibilité, un seul modèle doté de zones de glisser-déposer peut servir à la conception d'une multitude de pages.
Consultez les modèles de boilerplate du thème CMS pour avoir un aperçu des balises dnd_area en situation.
Les zones de glisser-déposer sont constituées de blocs de construction qui définissent la mise en page et assurent une certaine souplesse en matière d'alignement du texte. La balise dnd_area crée une zone dans la page reconnaissable par l'éditeur de page, ce qui permet d'ajouter, de supprimer et de réorganiser des éléments par glisser-déposer. Elles sont définies à l'aide de HubL dans des modèles HTML et HubL. Tous les éléments de glisser-déposer se trouvent dans une zone de glisser-déposer. Les zones de glisser-déposer ne peuvent pas être imbriquées. Les éléments de glisser-déposer ne peuvent pas contenir eux-mêmes des zones de glisser-déposer.
Le contenu de la zone de glisser-déposer définie par le développeur dans le modèle constitue un point de départ pour les pages utilisant ce modèle. Les créateurs de contenu peuvent complètement modifier le contenu présent dans une zone de glisser-déposer. Votre travail consiste à leur fournir un bon point de départ qu'ils peuvent ensuite modifier à leur convenance.
Ce diagramme illustre la manière dont les différents éléments de glisser-déposer peuvent être imbriqués. L'un des concepts clés est que les sections et les lignes peuvent contenir des colonnes et des modules.
Les sections sont un type spécifique de ligne. Les sections sont créées dans les modèles à l'aide de la balise dnd_section. Elles sont le seul élément de glisser-déposer pouvant être un descendant direct d'une zone de glisser-déposer. Les sections servent d'encadrement extérieur. Elles peuvent permettre au contenu d'être en pleine largeur ou d'avoir une largeur maximale confinée au centre. Comme les sections s'articulent autour des colonnes et des modules, il est facile de réorganiser et d'implémenter de grandes quantités de contenu. La balise dnd_section n'assure pas le rendu d'un élément HTML <section>.
L'apparence d'une section dans l'éditeur de page.
Les développeurs peuvent fournir des modèles de section qui créent des sections réutilisables dans l'éditeur de page. Il s'agit de sections préconfigurées définies par le développeur, que les créateurs de contenu peuvent utiliser comme point de départ. Les sections réutilisables ont de nombreuses spécificités : elles peuvent notamment être utilisées comme un modèle de partial standard de hubL.
Les colonnes servent de cadre aux lignes et aux modules. Elles sont placées à l'intérieur d'une ligne, ou d'une section qui est une ligne spécialisée. Les colonnes peuvent être créées dans les modèles à l'aide de la balise dnd_column.
Utilisez plusieurs colonnes à l'intérieur d'une ligne pour placer horizontalement les lignes et les modules qu'elles contiennent.
Les colonnes sont des zones verticales qui peuvent contenir des lignes. Vous pouvez créer des colonnes de tailles différentes en modifiant leur largeur. La largeur d'une ligne est de 12 « colonnes », en référence à la grille CSS. Les colonnes situées à l'intérieur d'une ligne peuvent avoir toute taille inférieure à 12, mais leur total ne peut pas dépasser 12.
Lorsque plusieurs lignes sont placées à l'intérieur d'une colonne, les modules de ces lignes apparaissent empilés verticalement. Comme les modules sont eux-mêmes des colonnes, ils ne peuvent pas être des descendants directs d'une colonne. Ils doivent être contenus dans une ligne.
L'apparence d'une colonne dans l'éditeur de page.
Les lignes encadrent les colonnes. Les lignes peuvent être créées dans les modèles à l'aide de la balise dnd_row. Comme les modules sont des colonnes, vous pouvez les placer directement à l'intérieur d'une ligne. Ainsi, les modules apparaîtront horizontalement les uns à côté des autres.
Les modules peuvent être organisés verticalement en les plaçant à l'intérieur de lignes. Si vous voulez placer un module au-dessus d'un autre, vous devez placer ce module à l'intérieur d'une ligne. Vous devez ensuite ajouter un autre module dans une ligne au-dessus ou en dessous de cette première ligne.
L'apparence d'une ligne dans l'éditeur de page.
Les modules sont une partie fondamentale du CMS HubSpot, agissant comme des blocs de construction réutilisables destinés à assembler un site et afficher du contenu. Lors de la création d'un modèle, vous placez les modules à l'intérieur des lignes et des sections de glisser-déposer en utilisant la balise dnd_module. Les modules sont également des colonnes. Cela signifie que si vous placez deux balises de module, ou un module et une colonne directement l'un à côté de l'autre, ils apparaîtront côte à côte horizontalement.
Il est impossible de placer des éléments de glisser-déposer dans un module. Les modules ne peuvent pas être les enfants directs de dnd_area.
Une fois rendus, les zones de glisser-déposer et leurs éléments associés ont des noms de classe pour une grille à 12 colonnes développée sous bootstrap 2. Pour faciliter la mise en route, vous pouvez utiliser le fichier _layout.css du boilerplate du thème CMS. Ils fournissent des styles par défaut pour ces noms de classe.
Vous n'êtes pas obligé d'utiliser cette feuille de style et pouvez définir vos propres styles à la place. Si vous construisez votre site à partir du boilerplate du thème CMS et que vous souhaitez utiliser votre propre CSS, vous devez supprimer l'appel de layout.css dans base.html. Pour votre propre grille CSS, vous devrez cibler ces mêmes noms de classe de grille, mais le style vous appartient.
Lors du rendu, les zones de glisser-déposer créent des balises div avec des classes utilisées par l'éditeur de page. Les exemples sont widget-span et widget-type-cell. Ne ciblez pas directement ces classes, car elles sont utilisées par l'éditeur de pages et peuvent évoluer dans le temps.
Au lieu de cela, ajoutez dans votre dnd_area HubL un paramètre de classe avec le nom de la classe que vous souhaitez utiliser.
Grâce aux zones de glisser-déposer, les créateurs de contenu peuvent avoir une certaine influence sur le style de la page. Ils peuvent par exemple faire en sorte qu'une section ait un arrière-plan. Les développeurs peuvent transmettre des valeurs par défaut pour ces paramètres par le biais d'attributs.
Lors du rendu de la page, les styles générés en fonction de ces paramètres sont ajoutés au fichier standard_header_includes.
Au lancement de dnd_area, ces styles étaient chargés à partir de standard_footer_includes. Cela a récemment été remplacé par standard_header_includes et est en cours de déploiement sur tous les comptes HubSpot via le CMS HubSpot.
Si vous changez des modèles construits avec des colonnes flexibles pour utiliser des zones de glisser-déposer, gardez à l'esprit certains éléments. Les colonnes flexibles ne sont pas les mêmes que les zones de glisser-déposer. Vous ne pouvez pas passer d'un modèle qui ne comporte qu'une colonne flexible à un modèle qui ne comporte qu'une zone de glisser-déposer. Par mesure de sécurité, cette option n'est pas autorisée. Le contenu ne peut pas être transféré de la colonne flexible à la zone de glisser-déposer. Pour illustrer ce phénomène, supposons que vous ayez construit votre nouveau modèle de manière à avoir une barre latérale et une zone de contenu principal. Votre barre latérale est une colonne flexible, votre contenu principal est une zone de glisser-déposer. L'outil de permutation fait correspondre la colonne flexible à la colonne flexible.
Merci d'avoir partagé votre avis.