Tags do HubL para áreas de arrastar e soltar

Last updated:

As áreas de arrastar e soltar permitem aos desenvolvedores criar seções de páginas e partials globais que possibilitam fazer mudanças de layout, estilo e conteúdo diretamente nos editores de conteúdo. Consulte o tutorial sobre como criar uma área de arrastar e soltar para ver uma introdução à criação de áreas de arrastar e soltar.

As áreas de arrastar e soltar se baseiam em uma grade de 12 colunas responsivas. As tags de arrastar e soltar renderizam marcações com nomes de classe designando as colunas e as linhas.  Você precisará adicionar uma folha de estilos para direcionar esses nomes de classe.Um exemplo de estilos de layout que você pode implementar pode ser encontrado no HubSpot CMS Boilerplate. Sua folha de estilos pode ser adicionada ao modelo usando {{ require_css() }}.

Observação: as áreas de arrastar e soltar não podem ser usadas em posts de blog e em modelos de e-mail no momento.

dnd_area

Uma área de arrastar e soltar é um container que torna uma parte da página web editável em termos de estrutura, design e conteúdo. O corpo de uma tag {% dnd_area %} fornece o conteúdo padrão para a área de arrastar e soltar.

Os módulos em si não podem conter áreas de arrastar e soltar. Para fornecer aos criadores de conteúdo uma interface para adicionar conteúdo uniforme dentro de um módulo, use campos e grupos repetíveis.

Uma tag dnd_area pode conter os seguintes parâmetros:

ParameterTypeDescription Default
class
String

Uma classe adicionada à div que envolve uma dnd_area
label
String

Usado no editor para rotular a área na 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>

As tags dnd_area também podem conter tags dnd_section.

Observação: um criador de conteúdo pode trocar o modelo de uma página por outro do mesmo tipo, dependendo se tem tags dnd_area.

  • Os modelos criados com o editor visual de layout de arrastar e soltar podem ser trocados por outros modelos de arrastar e soltar ou codificados com ou sem as tags dnd_area.
  • Os modelos codificados com tags dnd_area somente podem ser trocados por outros modelos codificados com tags dnd_area.
  • Os modelos codificados sem tags dnd_area somente podem ser trocados por outros modelos codificados sem tags dnd_area.

dnd_section

Um {% dnd_section %} é uma linha de nível superior e deve ser aninhada dentro de uma tag {% dnd_area %}. As seções também podem ser definidas como um modelo e depois incluídas em uma dnd_area, tornando-as ideais para a construção rápida de um modelo.

Uma tag dnd_section pode conter os seguintes parâmetros:

ParameterTypeDescription
background_color
Dict

Um dicionário que suporta a especificação de uma cor de fundo. Também pode ser fornecido como uma string.

background_image
Dict

Um dicionário que suporta a especificação de uma imagem de fundo.

background_linear_gradient
Dict

Um dicionário que suporta a especificação de um fundo de gradiente linear.

full_width
Boolean

Um booleano que determina se a seção deve ter largura total ou ser restringida por um container interno.

margin
Dict

Um dicionário que permite especificar valores de margem em cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax e %. Quando nenhuma unidade de medida é fornecida, é aplicado o padrão px.

max_width
Integer

Um valor de pixel que define a largura máxima do conteúdo em um dicionário de encapsulamento.

padding
Dict

Um dicionário que permite especificar valores de deslocamento em cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax e %. Quando nenhuma unidade de medida é fornecida, é aplicado o padrão px.

vertical_alignment
StringAlinhamento vertical do conteúdo secundário. As opções disponíveis incluem:
  • TOP
  • MIDDLE
  • BOTTOM

Observação: você somente pode usar um parâmetro de plano de fundo por tag 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 -->

As tags dnd_section também podem conter as seguintes tags:

  • dnd_column
  • dnd_module

dnd_column

Um {% dnd_column %} é um componente estrutural vertical que ocupa uma ou mais colunas de layout definidas pela linha principal.

Esta tag do HubL deve ser aninhada dentro de uma tag {% dnd_area %}.

Uma tag dnd_column pode conter os seguintes parâmetros:

ParameterTypeDescription
background_color
Dict

Um dicionário que suporta a especificação de uma cor de fundo.

background_image
Dict

Um dicionário que suporta a especificação de uma imagem de fundo.

background_linear_gradient
Dict

Um dicionário que suporta a especificação de um fundo de gradiente linear.

margin
Dict

Um dicionário que permite especificar valores de margem em cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax e %. Quando nenhuma unidade de medida é fornecida, é aplicado o padrão px.

max_width
Integer

Um valor de pixel que define a largura máxima do conteúdo em um dicionário de encapsulamento.

padding
Dict

Um dicionário que permite especificar valores de deslocamento em cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax e %. Quando nenhuma unidade de medida é fornecida, é aplicado o padrão px.

vertical_alignment
StringAlinhamento vertical do conteúdo secundário. As opções disponíveis incluem:
  • TOP
  • MIDDLE
  • BOTTOM

Observação: você somente pode usar um parâmetro de plano de fundo por tag 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 -->

Uma tag dnd_column também pode conter dnd_row.

dnd_row

Um {% dnd_row %} é um componente estrutural horizontal que cria um grid com 12 colunas, no qual podem ser colocados colunas e módulos.

Esta tag do HubL deve ser aninhada dentro de uma tag {% dnd_area %}.

Uma tag dnd_row pode incluir os seguintes parâmetros:

ParameterTypeDescription
background_color
Dict

Um dicionário que suporta a especificação de uma cor de fundo.

background_image
Dict

Um dicionário que suporta a especificação de uma imagem de fundo.

background_linear_gradient
Dict

Um dicionário que suporta a especificação de um fundo de gradiente linear.

margin
Dict

Um dicionário que permite especificar valores de margem em cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax e %. Quando nenhuma unidade de medida é fornecida, é aplicado o padrão px.

max_width
Integer

Um valor de pixel que define a largura máxima do conteúdo em um dicionário de encapsulamento.

padding
Dict

Um dicionário que permite especificar valores de deslocamento em cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax e %. Quando nenhuma unidade de medida é fornecida, é aplicado o padrão px.

vertical_alignment
StringAlinhamento vertical do conteúdo secundário. As opções disponíveis incluem:
  • TOP
  • MIDDLE
  • BOTTOM

Observação: você somente pode usar um parâmetro de plano de fundo por tag 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>

Uma dnd_row também pode conter as seguintes tags:

  • dnd_column
  • dnd_module

dnd_module

Um {% dnd_module %} é um módulo envolto por uma div em que layout, estilos e conteúdo podem ser adicionados. O módulo é especificado referenciando o caminho, que pode ser um módulo padrão do HubSpot (usando @hubspot/namespace), ou módulos que você construiu, especificando o caminho dentro da árvore de arquivos do gerenciador de design.

Esta tag do HubL deve ser aninhada dentro de uma tag {% dnd_area %}.

Uma tag dnd_module pode conter os seguintes parâmetros:

Use this table to describe parameters / fields
ParameterTypeDescription
path
Obrigatório
String

O caminho de um módulo.

horizontal_alignment
String

Posicionamento horizontal, permite:

LEFT, CENTER, RIGHT

offset
Integer

O deslocamento em relação a zero na grede de 12 colunas.

width
Integer

O número de colunas que ocupam a grade de 12 colunas.

flexbox_positioning
Descontinuado
String

Descontinuado; não utilizar. Em vez disso, use horizontal_alignment em conjunto com o vertical_alignment da linha ou seção.


Valor da posição Flexbox do módulo. Oferece suporte a uma string que indica a posição vertical seguida da horizontal:

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

Um dos seus módulos antigos tem um nome de campo que corresponde a um dos parâmetros dnd_module acima? Você pode passar os valores padrão utilizando um parâmetro de campos, tal como faria com um 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>

Plano de fundo

Existem algumas formas de definir planos de fundo nos elementos dnd de coluna, seção e linha: background_image, background_linear_gradient e background_color. 

background_color

As tags dnd de coluna, seção e linha oferecem suporta a cores de fundo. Você pode definir a cor de fundo padrão para um elemento de arrastar e soltar usando background_color. Esse parâmetro é um parâmetro baseado em string e pode incluir os formatos descritos no exemplo abaixo. 

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

Os elementos dnd de coluna, seção e linha oferecem suporte a gradientes lineares de fundo. Você pode definir um gradiente padrão usando o parâmetro background_linear_gradient. O parâmetro espera um dicionário. No momento, ele oferece suporte apenas a duas paradas de cor.

ParameterTypeDescription
direction
String

A direção do gradiente.

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

Matriz de strings de cor. No momento, oferece suporte a dois valores: o início e o fim. Os valores são fornecidos como strings e os seguintes formatos são suportados:

  • 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

Os elementos dnd de coluna, seção e linha oferecem suporte a imagens de fundo. Você pode fornecer uma imagem de fundo padrão usando o parâmetro background_image que espera um dicionário.

Use this table to describe parameters / fields
LegendaTypeDescription
backgroundPosition
String

A posição da imagem no plano de fundo. Oferece suporte a uma string que indica a posição vertical seguida pela horizontal.

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

A propriedade CSS de tamanho de fundo utilizada para a imagem.
Os valores permitidos são:

  • cover
  • contain
  • auto
imageUrl
String

A URL absoluta da imagem.
{% 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 %}

Como os parâmetros de estilo dnd são traduzidos na página

Quando você usa parâmetros baseados em estilo, como planos de fundos, margens ou deslocamento, os nomes das classes são automaticamente computados para suas seções, colunas, linhas e módulos. Os valores de propriedade que você atribuiu são adicionados aos nomes de classe criados automaticamente e o código CSS resultante é colocado antes da tag de fechamento </body> na página dentro de uma tag <style>. 

Os estilos de arrastar e soltar também podem ser diferentes em diferentes pontos de quebra para oferecer um visual responsivo.

Este artigo foi útil?
Este formulário deve ser usado apenas para fazer comentários sobre esses artigos. Saiba como obter ajuda para usar a HubSpot..