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.
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. |
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 tagsdnd_area
.
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:
|
Observação: você somente pode usar um parâmetro de plano de fundo por tag dnd_section
.
xxxxxxxxxx
{% 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 %}
As tags dnd_section
também podem conter as seguintes tags:
dnd_column
dnd_module
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:
|
Observação: você somente pode usar um parâmetro de plano de fundo por tag dnd_column
.
A tag dnd_column
também pode conter 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:
|
Observação: você somente pode usar um parâmetro de plano de fundo por tag dnd_row
.
Uma tag dnd_row também pode conter as seguintes tags:
dnd_column
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 Obrigatório | 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 Descontinuado | 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:
|
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.
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
.
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.
xxxxxxxxxx
{% 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 %}
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.
|
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:
|
xxxxxxxxxx
{% 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 %}
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.
|
backgroundSize | String | A propriedade CSS de tamanho de fundo utilizada para a imagem. Os valores permitidos são:
|
imageUrl | String | O URL absoluto da imagem. |
xxxxxxxxxx
{% 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 %}
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.