Balises HubL de la zone de glisser-déposer

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 CMS Hub. Votre feuille de style peut être ajoutée au modèle en utilisant {{ require_css() }}.

Remarque:

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 :

Paramètre	Type	Description
`class`	Chaîne	Une classe ajoutée avec la balise div d’une dnd_area
`label`	Chaîne	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 balises dnd_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 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.

dnd_section

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

Paramètre	Type	Description
`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`	Booléen	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 dans `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`	Entier	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 rembourrage dans `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`	Chaîne	Alignement 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 :

Paramètre	Type	Description
`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 dans `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`	Entier	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 dans `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`	Chaîne	Alignement 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_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 :

Paramètre	Type	Description
`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 dans `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`	Entier	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 dans `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`	Chaîne	Alignement 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_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>

Une balise 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 :

Paramètre	Type	Description
`path`	Chaîne	Chemin d’accès à un module.
`horizontal_alignment`	Chaîne	Positionnement horizontal, prend en charge : `LEFT`, `CENTER` et `RIGHT`
`offset`	Entier	Décalage par rapport à 0 dans la grille à 12 colonnes.
`width`	Entier	Nombre de colonnes occupant la grille de 12 colonnes.
`flexbox_positioning`	Chaîne	Obsolète, ne pas utiliser. Utilisez plutôt `horizontal_alignment` en tandem avec l’élément `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>

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.

Paramètre	Type	Description
`direction`	Chaîne	La direction du dégradé. `to bottom` `to top` `to left` `to right`
`colors`	Tableau	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.

Clé	Type	Description
`backgroundPosition`	Chaîne	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`	Chaîne	Propriété de taille d’arrière-plan de la CSS utilisée pour l’image. Valeurs prises en charge : `cover` `contain` `auto`
`imageUrl`	Chaîne	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.

Champs

HubL

React

Modules

Fonctions sans serveur

Balises HubL de la zone de glisser-déposer

Remarque:

dnd_area

Remarque:

dnd_section

Remarque:

dnd_column

Remarque:

dnd_row

Remarque:

dnd_module

background_color

background_linear_gradient

background_image

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

​Remarque:

​dnd_area

​Remarque:

​dnd_section

​Remarque:

​dnd_column

​Remarque:

​dnd_row

​Remarque:

​dnd_module

​Milieu social

​background_color

​background_linear_gradient

​background_image

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

Remarque:

dnd_area

Remarque:

dnd_section

Remarque:

dnd_column

Remarque:

dnd_row

Remarque:

dnd_module

Milieu social

background_color

background_linear_gradient

background_image

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