Balises HubL de zone de glisser-déposer

Last updated:

Les zones de glisser-déposer permettent aux développeurs de créer des sections de pages et des partials globaux qui prennent en charge les modifications de mise en page, de style et de contenu directement dans les éditeurs de contenu. Voir le tutoriel sur la création d'une zone de glisser-déposer pour une introduction à la création de zones de glisser-déposer 

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 devrez ajouter une feuille de style pour cibler ces noms de classe. Un exemple de styles de mise en page que vous pouvez mettre en œuvre se trouve dans le Boilerplate de HubSpot CMS. Votre feuille de style peut être ajoutée au modèle en utilisant {{ require_css() }}.

Veuillez noter que les zones de glisser-déposer ne peuvent pas être utilisées dans des articles de blog et modèles d'e-mails pour le moment.

dnd_area

Une zone de glisser-déposer 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.

Les modules eux-mêmes ne peuvent pas contenir de zones de glisser-déposer. Pour fournir aux créateurs de contenu une interface permettant d'ajouter du contenu uniforme dans un module, utilisez plutôt des champs et des groupes reproductibles.

Une balise dnd_area peut contenir les paramètres suivants :

ParameterTypeDescription Default
class
String

Une classe ajoutée avec la balise div d'une dnd_area
label
String

Utilisé dans l'éditeur pour libeller la zone dans la barre latérale.
{% dnd_area "unique_name", class="main" %} {% end_dnd_area %}<div class="container-fluid main"> <div class="row-wrapper"> <div class="row-fluid"> <div class="span12 widget-span widget-type-cell " style="" data-widget-type="cell" data-x="0" data-w="12"> </div> </div> </div> </div>

Les balisesdnd_area peuvent également contenir des balises dnd_section.

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

dnd_section

{%dnd_section%}  est une ligne de niveau supérieur et doit être imbriqué dans une balise{%dnd_area%} . Les sections peuvent également être définies comme un modèle, puis incluses dans un dnd_area, ce qui les rend idéales pour élaborer rapidement un modèle.

Une balise dnd_section peut contenir les paramètres suivants :

ParameterTypeDescription
background_color
Dict

Un dictionnaire qui permet de spécifier une couleur d'arrière-plan. Peut également être fourni en tant que chaîne.

background_image
Dict

Un dictionnaire qui permet de spécifier une image d'arrière-plan.

background_linear_gradient
Dict

Un dictionnaire qui permet de spécifier un arrière-plan à dégradé linéaire.

full_width
Boolean

Un booléen qui détermine si la section est destinée à être pleine page ou limitée par un conteneur interne.

margin
Dict

Un dictionnaire qui permet de spécifier les valeurs de marge en cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax et %. Si aucune unité de mesure n'est fournie, la valeur par défaut est px.

max_width
Integer

Une valeur en pixels qui définit la largeur maximale d'un contenu sur une balise dict.

padding
Dict

Un dictionnaire qui permet de spécifier les valeurs de remplissage en cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax, et %. Si aucune unité de mesure n'est fournie, la valeur par défaut est px.

vertical_alignment
StringAlignement vertical du contenu enfant. Les options disponibles incluent :
  • TOP
  • MIDDLE
  • BOTTOM

Remarque : Vous ne pouvez utiliser qu'un seul paramètre d'arrière-plan par balise dnd_section.

{% dnd_section background_image={ "backgroundPosition": "MIDDLE_CENTER", "backgroundSize": "cover", "imageUrl": "https://example.com/path/to/image.jpg" }, margin={ "top": 32, "bottom": 32 }, padding={ "top": "1em", "bottom": "1em", "left": "1em", "right": "1em" }, max_width=1200, vertical_alignment="MIDDLE" %} {% end_dnd_section %}<div class="row-fluid-wrapper row-depth-1 row-number-1 unique_name-row-0-background-image dnd-section unique_name-row-0-max-width-section-centering unique_name-row-0-margin unique_name-row-0-padding"> <div class="row-fluid "> </div><!--end row--> </div><!--end row-wrapper -->

Les balisesdnd_section peuvent également contenir les balises suivantes :

  • dnd_column
  • dnd_module

dnd_column

{%dnd_column%} est un bloc de construction structurel vertical qui occupe une ou plusieurs colonnes de mise en page définies par sa ligne parent.

Cette balise HubL doit être imbriquée dans une balise {% dnd_area%} .

Une balise dnd_column peut contenir les paramètres suivants :

ParameterTypeDescription
background_color
Dict

Un dictionnaire qui permet de spécifier une couleur d'arrière-plan.

background_image
Dict

Un dictionnaire qui permet de spécifier une image d'arrière-plan.

background_linear_gradient
Dict

Un dictionnaire qui permet de spécifier un arrière-plan à dégradé linéaire.

margin
Dict

Un dictionnaire qui permet de spécifier les valeurs de marge en cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax et %. Si aucune unité de mesure n'est fournie, la valeur par défaut est px.

max_width
Integer

Une valeur en pixels qui définit la largeur maximale d'un contenu sur une balise dict.

padding
Dict

Un dictionnaire qui permet de spécifier les valeurs de remplissage en cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax, et %. Si aucune unité de mesure n'est fournie, la valeur par défaut est px.

vertical_alignment
StringAlignement vertical du contenu enfant. Les options disponibles incluent :
  • TOP
  • MIDDLE
  • BOTTOM

Veuillez noter que vous ne pouvez utiliser qu'un seul paramètre d'arrière-plan par balise dnd_column.

{% dnd_column offset=0, width=12, background_color={ r: 255, g: 0, b: 0, a: 1 }, margin={ "top": "1em", "bottom": "1em" }, %} {% end_dnd_column %}<div class="span12 widget-span widget-type-cell unique_name-column-1-margin unique_name-column-1-background-color unique_name-column-1-vertical-alignment dnd-column" style="" data-widget-type="cell" data-x="0" data-w="12"> </div><!--end widget-span -->

Une balise dnd_column peut également contenir dnd_row.

dnd_row

{%dnd_row%} est un bloc de construction structurel horizontal qui crée une grille de mise en page imbriquée à 12 colonnes dans laquelle des colonnes et des modules peuvent être placés.

Cette balise HubL doit être imbriquée dans une balise {% dnd_area%} .

Une balise dnd_row peut inclure les paramètres suivants :

ParameterTypeDescription
background_color
Dict

Un dictionnaire qui permet de spécifier une couleur d'arrière-plan.

background_image
Dict

Un dictionnaire qui permet de spécifier une image d'arrière-plan.

background_linear_gradient
Dict

Un dictionnaire qui permet de spécifier un arrière-plan à dégradé linéaire.

margin
Dict

Un dictionnaire qui permet de spécifier les valeurs de marge en cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax et %. Si aucune unité de mesure n'est fournie, la valeur par défaut est px.

max_width
Integer

Une valeur en pixels qui définit la largeur maximale d'un contenu sur une balise dict.

padding
Dict

Un dictionnaire qui permet de spécifier les valeurs de remplissage en cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax, et %. Si aucune unité de mesure n'est fournie, la valeur par défaut est px.

vertical_alignment
StringAlignement vertical du contenu enfant. Les options disponibles incluent :
  • TOP
  • MIDDLE
  • BOTTOM

Veuillez noter que vous ne pouvez utiliser qu'un seul paramètre d'arrière-plan par balise dnd_row.

{% dnd_row background_color={ r: 123, g: 123, b: 123, a: 1.0 }, margin={ "top": 20, "bottom": 200 }, padding={ "top": 20, "bottom": 200, "left": 20, "right": 20 } %} {% end_dnd_row %}<div class="row-fluid-wrapper row-depth-1 row-number-1 main-row-0-padding main-row-0-background-color main-row-0-margin"> <div class="row-fluid "> </div> </div>

Un dnd_row peut également contenir les balises suivantes :

  • dnd_column
  • dnd_module

dnd_module

{%dnd_module%} est un module enveloppé dans un div où la mise en page, les styles et le contenu peuvent être ajoutés. Le module est spécifié en faisant référence à son chemin d'accès, qui peut être soit un module par défaut de HubSpot (en utilisant l'espace de noms @hubspot/ ), soit des modules que vous avez construits, en spécifiant leur chemin d'accès dans l'arborescence des fichiers du gestionnaire de conception.

Cette balise HubL doit être imbriquée dans une balise {% dnd_area%} .

Une balise dnd_module peut contenir les paramètres suivants :

Use this table to describe parameters / fields
ParameterTypeDescription
path
Obligatoire
String

Chemin d'accès à un module.

horizontal_alignment
String

Positionnement horizontal, prend en charge :

LEFT, CENTER, RIGHT

offset
Integer

Décalage par rapport à 0 dans la grille à 12 colonnes.

width
Integer

Nombre de colonnes occupant la grille de 12 colonnes.

flexbox_positioning
Obsolète
String

Obsolète, ne pas utiliser. Utilisez plutôt le paramètre horizontal_alignment en tandem avec le paramètre vertical_alignment de la ligne ou de la section.


Valeur de la position Flexbox pour le module. Chaîne compatible indiquant la position verticale suivie de la position horizontale :

  • TOP_LEFT
  • TOP_CENTER
  • TOP_RIGHT
  • MIDDLE_LEFT
  • MIDDLE_CENTER
  • MIDDLE_RIGHT
  • BOTTOM_LEFT
  • BOTTOM_CENTER
  • BOTTOM_RIGHT

Vous avez un ancien module dont le nom de champ correspond à l'un des paramètres dnd_module ci-dessus ? Vous pouvez transmettre des valeurs par défaut par le biais d'un paramètre de champ, tout comme vous le feriez pour un groupe de champs.

{% dnd_module path="@hubspot/rich_text", offset=0, width=8, %} {% module_attribute "html" %} <h1>Hello, world!</h1> {% end_module_attribute %} {% end_dnd_module %}<div class="span8 widget-span widget-type-custom_widget" style="" data-widget-type="custom_widget" data-x="0" data-w="12"> <div id="hs_cos_wrapper_main-module-1" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module" > <span id="hs_cos_wrapper_module-1_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"> <h1>Hello, world!</h1> </span> </div> </div>

Arrière-plan

Il existe plusieurs façons de définir des arrière-plans pour les éléments de colonne, de section et de ligne du tableau de bord, background_image, background_linear_gradient, et background_color. 

background_color

Les balises dnd de colonne, de section et de ligne prennent en charge les couleurs d'arrière-plan. Vous pouvez définir la couleur d'arrière-plan par défaut pour un élément de glisser-déposer en utilisant background_color. Ce paramètre est un paramètre basé sur une chaîne de caractères et peut inclure les formats suivants décrits dans l'exemple ci-dessous. 

{% dnd_section %} // Hex Value (both 3 and 6 char length) {% dnd_column background_color="#F7F7F7" %} {% end_dnd_column %} {% dnd_column background_color="#FFF" %} {% end_dnd_column %} // Both RGB and RGBA {% dnd_column background_color="rgb(255,255,255)" %} {% end_dnd_column %} {% dnd_column background_color="rgba(0,0,0,.25)" %} {% end_dnd_column %} {% end_dnd_section %}

background_linear_gradient

Les éléments dnd de colonne, de section et de ligne prennent en charge les dégradés linéaires d'arrière-plan. Vous pouvez définir un dégradé par défaut à l'aide du paramètre background_linear_gradient. Le paramètre attend un dictionnaire. Actuellement, il ne prend en charge que les arrêts de deux couleurs.

ParameterTypeDescription
direction
String

La direction du dégradé.

  • to bottom
  • to top
  • to left
  • to right
colors
array

Tableau de chaînes de couleurs. Actuellement, il prend en charge 2 valeurs, le début et la fin. Les valeurs sont fournies sous forme de chaînes de caractères, et les formats suivants sont pris en charge :

  • RGB
  • RGBA
  • 3 char hex
  • 6 char hex
  • 8 char hex
{% dnd_section background_linear_gradient={ "direction": "to bottom", "colors": [ "#1EB6C3", "#2A2859" ] } %} {% dnd_module path="@hubspot/rich_text" width="6" %} {% end_dnd_module %} {% end_dnd_section %}

background_image

Les éléments dnd de colonne, de section et de ligne prennent en charge les images d'arrière-plan. Vous pouvez fournir une image d'arrière-plan par défaut en utilisant le paramètre background_image qui attend un dictionnaire.

Use this table to describe parameters / fields
CléTypeDescription
backgroundPosition
String

La position de l'image en arrière-plan. Prend en charge une chaîne indiquant la position verticale suivie de la position horizontale.

  • TOP_LEFT
  • TOP_CENTER
  • TOP_RIGHT
  • MIDDLE_LEFT
  • MIDDLE_CENTER
  • MIDDLE_RIGHT
  • BOTTOM_LEFT
  • BOTTOM_CENTER
  • BOTTOM_RIGHT
backgroundSize
String

Propriété de taille d'arrière-plan de la CSS utilisée pour l'image.
Les valeurs prises en charge sont les suivantes :

  • cover
  • contain
  • auto
imageUrl
String

URL absolue de l'image.
{% dnd_section background_image = { "backgroundPosition": "MIDDLE_CENTER", "backgroundSize": "cover", "imageUrl": "https://www.example.com/bg-image.jpg" }, %} {% dnd_module path="@hubspot/rich_text" width="6" %} {% end_dnd_module %} {% end_dnd_section %}

Comment les paramètres de style dnd se traduisent sur la page

Lorsque vous utilisez des paramètres basés sur le style, tels que les arrière-plans, les marges ou le remplissage, les noms de classe sont automatiquement calculés pour vos sections, colonnes, lignes et modules. Les valeurs de propriété que vous avez assignées sont alors ajoutées à ces noms de classe créés automatiquement et le code CSS qui en résulte est ensuite placé devant la balise de fermeture </body> de la page dans une balise <style>. 

Les styles de glisser-déposer peuvent également être différents à différents points de rupture pour offrir un aspect réactif.

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