Etiquetas HubL del área de arrastrar y soltar

Last updated:

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 se puede agregar a la plantilla utilizando {{ require_css() }}.

Nota: las áreas de arrastrar y soltar no se pueden utilizar en publicaciones de blog y 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:

ParameterTypeDescription Default
class
String

Una clase agregada al div envolvente de un dnd_area
label
String

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:

ParameterTypeDescription
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
Boolean

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 los valores de los márgenes 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
Integer

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
StringAlineación vertical del contenido infantil. Los eventos disponibles incluyen:
  • TOP
  • MIDDLE
  • BOTTOM

Nota: sólo puedes 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:

ParameterTypeDescription
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 los valores de los márgenes 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
Integer

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
StringAlineación vertical del contenido infantil. Los eventos disponibles incluyen:
  • TOP
  • MIDDLE
  • BOTTOM

Nota: solo puede 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:

ParameterTypeDescription
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 los valores de los márgenes 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
Integer

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
StringAlineación vertical del contenido infantil. Los eventos 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>

Una dnd_row también puede contener las siguientes etiquetas:

  • dnd_column
  • dnd_module

dnd_module

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

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

La ruta a un módulo.

horizontal_alignment
String

El posicionamiento horizontal, admite:

IZQUIERDA, CENTRO, DERECHA

offset
Integer

El desplazamiento desde 0 en la cuadrícula de 12 columnas.

width
Integer

El número de columnas que ocupan la cuadrícula de 12 columnas.

flexbox_positioning
Obsoletos
String

Obsoleto no utilizar. En su lugar, utiliza horizontal_alignment junto con el vertical_alignment de la fila o sección.


Valor de la posición 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.

ParameterTypeDescription
direction
String

La dirección del gradiente.

  • hasta abajo
  • hasta arriba
  • a la izquierda
  • a la derecha
colors
array

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 caracteres hex
  • 6 caracteres hex
  • 8 caracteres 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.

Use this table to describe parameters / fields
ClaveTypeDescription
backgroundPosition
String

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
String

La propiedad de tamaño de fondo CSS utilizada para la imagen.
Los valores admitidos son:

  • portada
  • contiene
  • auto
imageUrl
String

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.

¿Te resultó útil este artículo?
Con este formulario puedes enviar tu opinión sobre nuestros documentos para desarrolladores. Si tienes comentarios sobre el producto de HubSpot, puedes enviarlos al Foro de ideas.