Tags do HubL para áreas de arrastar e soltar

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:

Parâmetro	Tipo	Descrição
`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

Uma {% dnd_section %} é uma linha de nível superior e deve estar aninhada em 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:

Parâmetro	Tipo	Descrição
`background_color`	Dicio	Um dicionário que suporta a especificação de uma cor de fundo. Também pode ser fornecido como uma string.
`background_image`	Dicio	Um dicionário que suporta a especificação de uma imagem de fundo.
`background_linear_gradient`	Dicio	Um dicionário que suporta a especificação de um fundo de gradiente linear.
`full_width`	Booleano	Um booleano que determina se a seção deve ter largura total ou ser restringida por um container interno.
`margin`	Dicio	Um dicionário que dá suporte à especificação de 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`	Inteiro	Um valor de pixel que define a largura máxima do conteúdo em um dicionário de encapsulamento.
`padding`	Dicionário	Um dicionário que suporta a especificação de 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`	String	Alinhamento 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

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

Parâmetro	Tipo	Descrição
`background_color`	Dicio	Um dicionário que suporta a especificação de uma cor de fundo.
`background_image`	Dicio	Um dicionário que suporta a especificação de uma imagem de fundo.
`background_linear_gradient`	Dicio	Um dicionário que suporta a especificação de um fundo de gradiente linear.
`margin`	Dicio	Um dicionário que dá suporte à especificação de 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`	Inteiro	Um valor de pixel que define a largura máxima do conteúdo em um dicionário de encapsulamento.
`padding`	Dicionário	Um dicionário que suporta a especificação de 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`	String	Alinhamento 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 -->

A 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:

Parâmetro	Tipo	Descrição
`background_color`	Dicio	Um dicionário que suporta a especificação de uma cor de fundo.
`background_image`	Dicio	Um dicionário que suporta a especificação de uma imagem de fundo.
`background_linear_gradient`	Dicio	Um dicionário que suporta a especificação de um fundo de gradiente linear.
`margin`	Dicio	Um dicionário que dá suporte à especificação de 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`	Inteiro	Um valor de pixel que define a largura máxima do conteúdo em um dicionário de encapsulamento.
`padding`	Dicionário	Um dicionário que suporta a especificação de 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`	String	Alinhamento 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 tag 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 o namespace @hubspot/), 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:

Parâmetro	Tipo	Descrição
`path`	String	O caminho de um módulo.
`horizontal_alignment`	String	Posicionamento horizontal, permite: `LEFT`, `CENTER`, `RIGHT`
`offset`	Inteiro	O deslocamento em relação a zero na grade de 12 colunas.
`width`	Inteiro	O número de colunas que ocupam a grade de 12 colunas.
`flexbox_positioning`	String	Descontinuado; não utilizar. Em vez disso, use `horizontal_alignment` em conjunto com a linha ou seção `vertical_alignment`. 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.

Parâmetro	Tipo	Descrição
`direction`	String	A direção do gradiente. `to bottom` `to top` `to left` `to right`
`colors`	matriz	Uma 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.

Chave	Tipo	Descrição
`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	O URL absoluto 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.

Start Building

Reference

Best Practices

Marketplace

Versions & Deprecations

Tags do HubL para áreas de arrastar e soltar

Observação:

dnd_area

Observação:

dnd_section

Observação:

dnd_column

Observação:

dnd_row

Observação:

dnd_module

Plano de fundo

background_color

background_linear_gradient

background_image

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

​Observação:

​dnd_area

​Observação:

​dnd_section

​Observação:

​dnd_column

​Observação:

​dnd_row

​Observação:

​dnd_module

​Plano de fundo

​background_color

​background_linear_gradient

​background_image

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

Observação:

dnd_area

Observação:

dnd_section

Observação:

dnd_column

Observação:

dnd_row

Observação:

dnd_module

Plano de fundo

background_color

background_linear_gradient

background_image

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