Etiquetas HubL del área de arrastrar y soltar

Las áreas de arrastrar y soltar permiten a los desarrolladores crear secciones de páginas y parciales globales que admiten cambios de diseño, estilo y contenido directamente en los editores de contenido. Consulta el tutorial sobre crear un área de arrastrar y soltar para una introducción a la configuración de las áreas de arrastrar y soltar. Las áreas de arrastrar y soltar se basan en una cuadricula responsiva de 12 columnas. Las etiquetas de arrastrar y soltar generan marcas con nombres de clase que designan columnas y filas. Tendrás que agregar una hoja de estilos para orientar esos nombres de clase. Un ejemplo de estilos de diseño que podrías implementar se encuentra en la plantilla de CMS de HubSpot. Tu hoja de estilo puede agregarse a la plantilla usando {{ require_css() }}.

Nota:

Las áreas de arrastrar y soltar no se pueden utilizar en publicaciones de blog ni plantillas de correo electrónico en este momento.

dnd_area

Un área de arrastrar y soltar es un contenedor que hace que una parte de la página web sea editable en cuanto a su estructura, diseño y contenido. El cuerpo de una etiqueta{% dnd_area %} proporciona el contenido predeterminado del área de arrastrar y soltar. Los módulos en sí no pueden contener áreas de arrastrar y soltar. Para proporcionar a los creadores de contenido una interfaz para agregar contenido uniforme dentro de un módulo, utiliza en su lugar campos y grupos repetibles. Una etiqueta dnd_area puede contener los siguientes parámetros:

Parámetro	Tipo	Descripción
`class`	Cadena	Una clase agregada al div envolvente de un dnd_area
`label`	Cadena	Se utiliza en el editor para etiquetar el área en la barra lateral.

{% 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>

Las etiquetas dnd_area también pueden contener etiquetas dnd_section.

Nota:

Un creador de contenido puede cambiar la plantilla de una página por otra del mismo tipo, dependiendo de si tiene etiquetas dnd_area.

Las plantillas construidas con el editor de diseño visual de arrastrar y soltar pueden cambiarse por otras plantillas de arrastrar y soltar o plantillas codificadas con o sin etiquetas dnd_area.
Las plantillas codificadas con etiquetas dnd_area solo pueden cambiarse por otras plantillas codificadas con etiquetas dnd_area.
Las plantillas codificadas sin etiquetas dnd_area solo pueden cambiarse por otras plantillas codificadas sin etiquetas dnd_area.

dnd_section

Una {% dnd_section %} es una fila de nivel superior, y debe estar anidada dentro de una etiqueta {% dnd_area %}. Las secciones también pueden definirse como una plantilla y luego incluirse en una dnd_area, lo que las hace ideales para estructurar rápidamente una plantilla. Una etiqueta dnd_section puede contener los siguientes parámetros:

Parámetro	Tipo	Descripción
`background_color`	Dict	Un dict que permite especificar un color de fondo. También se puede proporcionar como una cadena de texto.
`background_image`	Dict	Un dict que permite especificar una imagen de fondo.
`background_linear_gradient`	Dict	Un dict que permite especificar un fondo gradiente lineal.
`full_width`	Booleano	Un booleano que determina si la sección está destinada a ser de ancho completo o limitada por un contenedor interior.
`margin`	Dict	Un dict que permite especificar valores de margen en `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` y `%`. Cuando no se proporciona ninguna unidad de medida, se aplica el valor predeterminado `px`.
`max_width`	Entero	Un valor en píxeles que establece el ancho máximo del contenido en un dict de envoltura.
`padding`	Dict	Un dict que permite especificar valores de relleno en `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` y `%`. Cuando no se proporciona ninguna unidad de medida, se aplica el valor predeterminado `px`.
`vertical_alignment`	Cadena	Alineación vertical del contenido secundario. Las opciones disponibles incluyen: `TOP` `MIDDLE` `BOTTOM`

Nota:

Solo puede utilizar un parámetro de fondo por etiqueta 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 -->

Las etiquetas dnd_section también pueden contener las siguientes etiquetas:

dnd_column
dnd_module

dnd_column

Un {% dnd_column %} es un bloque estructural vertical que ocupa una o más columnas de diseño definidas por su fila principal. Esta etiqueta HubL debe estar anidada dentro de una etiqueta{% dnd_area %}. Una etiqueta dnd_column puede contener los siguientes parámetros:

Parámetro	Tipo	Descripción
`background_color`	Dict	Un dict que permite especificar un color de fondo.
`background_image`	Dict	Un dict que permite especificar una imagen de fondo.
`background_linear_gradient`	Dict	Un dict que permite especificar un fondo gradiente lineal.
`margin`	Dict	Un dict que permite especificar valores de margen en `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` y `%`. Cuando no se proporciona ninguna unidad de medida, se aplica el valor predeterminado `px`.
`max_width`	Entero	Un valor en píxeles que establece el ancho máximo del contenido en un dict de envoltura.
`padding`	Dict	Un dict que permite especificar valores de relleno en `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` y `%`. Cuando no se proporciona ninguna unidad de medida, se aplica el valor predeterminado `px`.
`vertical_alignment`	Cadena	Alineación vertical del contenido secundario. Las opciones disponibles incluyen: `TOP` `MIDDLE` `BOTTOM`

Nota:

Solo puedes utilizar un parámetro de fondo por etiqueta 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 -->

Una etiqueta dnd_column también puede contener dnd_row.

dnd_row

Una {% dnd_row %} es un bloque estructural horizontal que crea una cuadricula de diseño anidada de 12 columnas en la que se pueden colocar columnas y módulos. Esta etiqueta HubL debe estar anidada dentro de una etiqueta{% dnd_area %}. Una etiqueta dnd_row puede incluir los siguientes parámetros:

Parámetro	Tipo	Descripción
`background_color`	Dict	Un dict que permite especificar un color de fondo.
`background_image`	Dict	Un dict que permite especificar una imagen de fondo.
`background_linear_gradient`	Dict	Un dict que permite especificar un fondo gradiente lineal.
`margin`	Dict	Un dict que permite especificar valores de margen en `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` y `%`. Cuando no se proporciona ninguna unidad de medida, se aplica el valor predeterminado `px`.
`max_width`	Entero	Un valor en píxeles que establece el ancho máximo del contenido en un dict de envoltura.
`padding`	Dict	Un dict que permite especificar valores de relleno en `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` y `%`. Cuando no se proporciona ninguna unidad de medida, se aplica el valor predeterminado `px`.
`vertical_alignment`	Cadena	Alineación vertical del contenido secundario. Las opciones disponibles incluyen: `TOP` `MIDDLE` `BOTTOM`

Nota:

Solo puedes utilizar un parámetro de fondo por etiqueta 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>

Las etiquetas dnd_row también pueden contener las siguientes etiquetas:

dnd_column
dnd_module

dnd_module

Un {% dnd_module %} es un módulo envuelto dentro de un div donde se puede agregar diseño, estilos y contenido. El módulo se especifica haciendo referencia a su ruta, que puede ser un módulo predeterminado de HubSpot (usando el espacio de nombres @hubspot/), o módulos que hayas construido, especificando su ruta dentro del árbol de archivos del administrador de diseño Esta etiqueta HubL debe estar anidada dentro de una etiqueta{% dnd_area %}. Una etiqueta dnd_module puede contener los siguientes parámetros:

Parámetro	Tipo	Descripción
`path`	Cadena	La ruta a un módulo.
`horizontal_alignment`	Cadena	El posicionamiento horizontal, admite:`LEFT`, `CENTER`, `RIGHT`
`offset`	Entero	El desplazamiento desde 0 en la cuadrícula de 12 columnas.
`width`	Entero	El número de columnas que ocupan la cuadrícula de 12 columnas.
`flexbox_positioning`	Cadena	Obsoleto, no utilizar. En su lugar, utiliza `horizontal_alignment` junto con la fila o sección `vertical_alignment` . Valor de posición de Flexbox para el módulo. Admite una cadena que indica la posición vertical seguida de la horizontal: `TOP_LEFT` `TOP_CENTER` `TOP_RIGHT` `MIDDLE_LEFT` `MIDDLE_CENTER` `MIDDLE_RIGHT` `BOTTOM_LEFT` `BOTTOM_CENTER` `BOTTOM_RIGHT`

¿Tienes un módulo antiguo cuyo nombre de campo coincide con uno de los parámetros de dnd_module anteriores? Puedes pasar valores predeterminados a través de un parámetro de campos, como lo harías con un grupo de campos.

{% 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>

Fondo

Hay varias formas de establecer fondos en los elementos dnd de columna, sección y fila, background_image, background_linear_gradient y background_color.

background_color

Las etiquetas dnd de columna, sección y fila admiten colores de fondo. Puedes establecer el color de fondo predeterminado para un elemento de arrastrar y soltar utilizando background_color. Este parámetro es un parámetro basado en una cadena y puede incluir los siguientes formatos indicados en el ejemplo siguiente.

{% 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

Los elementos dnd de columna, sección y fila admiten gradientes lineales de fondo. Puedes establecer un gradiente predeterminado utilizando el parámetro background_linear_gradient. El parámetro espera un dict. Actualmente solo admite dos paradas de color.

Parámetro	Tipo	Descripción
`direction`	Cadena	La dirección del gradiente. `to bottom` `to top` `to left` `to right`
`colors`	matriz	Matriz de cadenas de color. Actualmente admite 2 valores, el inicial y el final. Los valores se proporcionan como cadenas, y se admiten los siguientes formatos: `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

Los elementos dnd de columna, sección y fila admiten imágenes de fondo. Puedes proporcionar una imagen de fondo predeterminada utilizando el parámetro background_image que espera un dict.

Clave	Tipo	Descripción
`backgroundPosition`	Cadena	La posición de fondo de la imagen. Admite una cadena que indica la posición vertical seguida de la horizontal. `TOP_LEFT` `TOP_CENTER` `TOP_RIGHT` `MIDDLE_LEFT` `MIDDLE_CENTER` `MIDDLE_RIGHT` `BOTTOM_LEFT` `BOTTOM_CENTER` `BOTTOM_RIGHT`
`backgroundSize`	Cadena	La propiedad de tamaño de fondo CSS utilizada para la imagen. Los valores admitidos son: `cover` `contain` `auto`
`imageUrl`	Cadena	URL absoluta de la imagen.

{% 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 %}

Cómo se trasladan los parámetros de estilo de dnd a la página

Cuando utilizas parámetros basados en estilo, como los fondos, los márgenes o el relleno, los nombres de las clases se calculan automáticamente para las secciones, columnas, filas y módulos. Los valores de propiedad que has asignado se agregan a los nombres de clase creados automáticamente y el código CSS resultante se coloca antes de la etiqueta de cierre </body> en la página en una etiqueta <style>. Los estilos de arrastrar y soltar también pueden ser diferentes en distintos puntos de ruptura para ofrecer un aspecto responsivo.

Start Building

Reference

Best Practices

Marketplace

Versions & Deprecations

Etiquetas HubL del área de arrastrar y soltar

Nota:

dnd_area

Nota:

dnd_section

Nota:

dnd_column

Nota:

dnd_row

Nota:

dnd_module

Fondo

background_color

background_linear_gradient

background_image

Cómo se trasladan los parámetros de estilo de dnd a la página

​Nota:

​dnd_area

​Nota:

​dnd_section

​Nota:

​dnd_column

​Nota:

​dnd_row

​Nota:

​dnd_module

​Fondo

​background_color

​background_linear_gradient

​background_image

​Cómo se trasladan los parámetros de estilo de dnd a la página

Nota:

dnd_area

Nota:

dnd_section

Nota:

dnd_column

Nota:

dnd_row

Nota:

dnd_module

Fondo

background_color

background_linear_gradient

background_image

Cómo se trasladan los parámetros de estilo de dnd a la página