Tipos de campos de tema e módulo

Last updated:

Adicione campos aos módulos e temas para permitir que os criadores de conteúdo controlem os diferentes aspectos de uma página dentro do editor de páginas. Abaixo, conheça todos os campos disponíveis para temas e módulos. Para obter mais informações sobre a implementação de campos de tema e módulo, incluindo grupos de campos e campos de repetição, consulte a visão geral dos campos de tema e módulo.

Propriedades utilizadas por todos os campos

Todos os campos têm algumas propriedades em comum. Essas propriedades controlam os nomes das variáveis que você usa para referenciar os valores, bem como a aparência desses valores para os criadores de conteúdo.

// Boolean field { "name" : "is_teaser_img", "label" : "Enable Teaser Image", "required" : false, "locked" : false, "type" : "boolean", "inline_help_text" : "Shows Teaser image when toggled on", "help_text" : "Teaser images are used to help provide visual context to the post.", "default" : false }
Propriedades utilizadas por todos os campos
ParameterTypeDescription Default
help_text
String

Texto que será exibido no editor na forma de uma dica de ferramenta para auxiliar o criador de conteúdo.

Melhor usado para informações complementares, mas não necessárias para usar o campo.

none
id
String

ID exclusivo de um campo. Isso é gerado pelo HubSpot. Ao criar localmente, não é necessário especificar este ID.

inline_help_text
String

Texto de ajuda que será mostrado em linha abaixo do rótulo do campo (limite de 300 caracteres). 

Melhor usado para informações necessárias para usar o campo.

null
label
String

O texto que o criador do conteúdo vê com a descrição do campo. Pode conter espaços.

Rich text field, Date field, etc.
locked
Boolean

Determina se o campo pode ser editado no editor de conteúdo. Se "true", o campo não aparecerá no editor de conteúdo.

false
name
String

O nome da variável que você usará para se referir aos valores deste campo, e junto à qual será armazenado o valor do campo. Não pode conter espaços ou caracteres especiais.

richtext_field, date_field, etc.
required
Boolean

Determina se o campo pode ser deixado em branco no editor. Se for verdadeiro, não será permitido publicar conteúdo sem preencher este campo.

false
type
String

O tipo de campo. Consulte tipos de campos abaixo para ver a documentação sobre todos os tipos de campo.

visibility
Array

Determina as condições de exibição de um campo.

display_width
String

Possibilita a exibição lado a lado de campos de módulo nos editores de conteúdo, em vez de exibi-los na largura total quando definidos como "half_width". O campo será exibido lado a lado com o próximo campo no arquivo fields.json, desde que esse campo também esteja definido para "half_width".

Não use inline_help_text e help_text intercambiavelmente. 

Em vez disso, pergunte-se: "Esta informação é necessária para um usuário completar uma tarefa?".

  • Se a resposta for sim, a informação precisa estar na tela, e é mais indicado usar inline_help_text.
  • Se não, então não há problema em colocar uma dica de ferramenta usando help_text.

Manter-se consistente nisso ajuda os usuários a compreenderem rapidamente a sua interface.

Alinhamento

Este campo fornece aos criadores de conteúdo uma forma de posicionar um elemento dentro de um container. Ele não deve ser usado para alinhamento de texto, pois há um tipo de campo específico para isso.

Os campos de alinhamento são suportados nos módulos.
Os campos de alinhamento só podem ser usados como campos de estilo.

Campo de alinhamento
// alignment field { "name": "img_position", "label": "Position Image", "help_text":"Position the image within it's container.", "required": false, "type": "alignment", "default": { "horizontal_align": "CENTER", "vertical_align": "TOP", } }
Campo do blog
ParâmetroTipoDescription Default
default
Object

O objeto que contém horizontal_align e vertical_align.

alignment_direction
String

Determina se apenas os controles de alinhamento horizontal ou vertical, ou ambos, devem ser mostrados. Pode ser:

  • HORIZONTAL
  • VERTICAL
  • BOTH
BOTH

Imagem de fundo

Este campo fornece um campo de imagem de fundo que tem subcampos para a posição e o tamanho do plano fundo. Os campos de imagem de fundo têm uma propriedade .css que retorna CSS com base no valor do campo. Saiba mais sobre a propriedade CSS gerada.

Os campos de imagem de fundo são suportados nos módulos.
Os campos de imagem de fundo só podem ser usados como campos de estilo.

Campo de imagem de fundo
// background image field { "name": "bg_image", "label": "Background image", "required": false, "type": "backgroundimage", "default": { "src": "https://example.com/img.png", "background_position": "MIDDLE_CENTER", "background_size": "cover" } }
Campo do blog
ParâmetroTipoDescription Default
default
Object

O objeto que contendo o src da imagem, a posição do plano de fundo e o tamanho do fundo.

null

Blog

Este campo permite que os editores de conteúdo selecionem um blog, fornecendo a você, o desenvolvedor, o ID do blog. Isso é útil em casos em que você precisa apresentar informações de teaser dos blogs em destaque nos módulos. Você pode usar o ID do blog em funções do HubL relacionadas a blog para obter informações como autores, posts recentes, posts recentes com uma tag específica e muito mais.

Os campos do blog são suportados nos módulos.

Captura de tela do campo do blog
// blog field { "name" : "blog", "label" : "Blog", "required" : false, "locked" : false, "type" : "blog", "default" : 1234567890 }
Campo do blog
ParâmetroTipoDescription Default
default
"default" / blog id

Especifica o blog que é selecionado por padrão. Este parâmetro aceita argumentos padrão ou um ID de blog (disponível na URL do painel do blog).

null

Booleano

Este campo permite que os editores de conteúdo ativem/desativem a funcionalidade. Booleanos somente podem ser true ou false. Muitas vezes faz sentido condicionar grupos ou campos com base em campos booleanos. Se você acha que pode precisar fornecer mais de dois estados no caminho, um campo de escolha pode ser uma opção melhor, pois você pode aumentar isso com menos esforço, caso precise alterar mais tarde.

Os campos booleanos são suportados tanto nos temas como nos módulos.
Os campos booleanos podem ser usados como campos de estilo.

Captura de tela do campo booleano
// Boolean field { "name" : "is_teaser_img", "label" : "Enable Teaser Image", "required" : false, "locked" : false, "type" : "boolean", "display":"checkbox", "inline_help_text" : "Shows Teaser image when toggled on", "help_text" : "Teaser images are used to help provide visual context to the post.", "default" : false }
Campo do blog
ParâmetroTipoDescription Default
default
Boolean

Define se o estado padrão deste campo é true ou false.

false
display
String

Escolha o estilo de exibição visual para o campo. Pode aparecer como um toggle ou checkbox.

checkbox

Mantenha a consistência ao utilizar a opção de botão ou a caixa de seleção. Se você não tomar cuidado, pode criar uma interface confusa para os criadores de conteúdo.

Um botão pode fazer sentido quando o valor do campo ativa/desativa outros campos que são mostrados de forma condicional. Outra situação em que um botão pode ser útil é quando o campo representa uma grande mudança de design para o módulo. As caixas de seleção fazem sentido para alterações menores que podem não ter um efeito tão significativo na exibição do módulo, como ocultar ou mostrar pequenos elementos individuais.

Borda

Este campo fornece aos criadores de conteúdo uma interface de usuário para a criação de uma borda em torno de um elemento. Os campos de borda têm uma propriedade .css que retorna o CSS com base no valor do campo. Saiba mais sobre a propriedade CSS gerada.

Os campos de borda são suportados nos módulos.
Os campos de borda só podem ser usados como campos de estilo.

Captura de tela do campo de borda do módulo no editor de páginas
// Border field { "id" : "styles.border", "name" : "border", "label" : "border", "required" : false, "locked" : false, "allow_custom_border_sides" : false, "type" : "border", "default" : { "top": { "width": { "value": 1, "units": "px" }, "opacity": 100, "style": "solid", "color": "#ffffff" }, "bottom": { "width": { "value": 1, "units": "px" }, "opacity": 100, "style": "solid", "color": "#ffffff" }, "left": null, "right": null } }
Campo do blog
ParâmetroTipoDescription Default
default
Boolean

objeto com chaves para o raio da borda, as partes superior e inferior e os lados direito e esquerdo.

{}

Escolha

Os campos de escolha são sinônimos de elementos <select> e botões de opção. Eles permitem que um criador de conteúdo escolha um item de uma lista de opções. Eles podem assumir duas formas visuais no editor de páginas. Você pode configurá-los para aparecerem como um campo de seleção ou botões de opção. As opções de um campo de escolha podem ter rótulos separados para seus valores. Após a utilização de um módulo em uma página, os rótulos de opção ainda podem ser modificados sem afetar negativamente os sites, já que o valor continua o mesmo. No entanto, Se você alterar o valor, todos os módulos contêm esse valor serão dissociados.

Os campos de escolha são suportados tanto nos temas quanto nos módulos. Os campos de escolha podem ser usados como campos de estilo.

choice-field-dropdown
// Choice field { "name" : "img_position", "label" : "Image Position", "required" : false, "locked" : false, "display" : "select", "choices" : [ [ "img--left", "Image Left - Text Right" ], [ "img--right", "Text Left - Image Right" ] ], "type" : "choice", "default" : "img--left" }
Campo booleano
ParâmetroTipoDescription Default
choices
Array

Matriz de pares de valores e rótulos. Os valores são listados primeiro.

[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]
default
Value

Define o valor padrão selecionado na matriz de opções.

display
String

Define a forma como o campo é exibido aos usuários. As duas opções são "radio " e "select".

"select"

Cor

Os campos de cor fornecem uma interface de seleção de cores para os criadores de conteúdo. Eles oferecem suporte a cores sólidas, bem como a transparência. São perfeitos para quando você quer dar aos criadores de conteúdo controle total sobre as cores dentro de um módulo.

Os campos de cor são suportados tanto nos temas quanto nos módulos.
Os campos de cor podem ser usados como campos de estilo.

Campo de cor

A opção de opacidade está desativada para módulos que tenham email incluído em host_template_types.

// color field { "name" : "bg_color", "label" : "Background color", "required" : false, "locked" : false, "type" : "color", "default" : { "color" : "#ff0000", "opacity" : 100 } }
Campo de cor
ParâmetroTipoDescription Default
default
Object

Define a cor e a opacidade padrão selecionadas.

{ "color" : "#ffffff", "opacity" : 100 }

CTA

Os campos de call to action (CTA) permitem que os usuários escolham uma CTA para exibir. As CTAs são essencialmente botões ou links rastreáveis. Os criadores de conteúdo criam CTAs que podem ser usadas em todo o site. 

Os campos de CTA são suportados nos módulos.
Os campos de CTA estão disponíveis no CMS Hub Professional e Enterprise.

Campo de call to action
// CTA field { "name" : "cta", "label" : "CTA", "required" : false, "locked" : false, "type" : "cta", "default" : null }
Campo de CTA
ParâmetroTipoDescription Default
default
String

A CTA selecionada por padrão. Espera um ID de CTA que pode ser encontrado na URL ao editar uma CTA no gerenciador de CTA.

null

Objeto do CRM

Os campos de objeto do CRM permitem que os usuários escolham uma instância individual de um objeto do CRM para exibir. 

module.fieldname.properties retorna as propriedades obtidas desta instância de objeto. Isso faz com que você não precise usar a função crm_object() para obter os dados para a instância de objeto selecionada.

module.fieldname.id retorna o ID da instância do objeto.

Os campos de objeto do CRM são suportados nos módulos.
Os campos de objeto do CRM estão disponíveis no CMS Hub Professional e Enterprise.

Campo de objeto do CRM
// fields.json { "name" : "crmobject_field", "label" : "CRM object", "required" : false, "locked" : false, "object_type" : "CONTACT", "properties_to_fetch" : [ ], "type" : "crmobject", "default" : { "id" : 1 } }
Campo de objeto do CRM
ParâmetroTipoDescription Default
object_type
Obrigatório
String

Tipo de objecto do CRM que o usuário pode escolher. Tipos de objetos do CRM suportados

properties_to_fetch
Array

Matriz de nomes de propriedades associadas ao tipo de objeto em forma de string. Exemplo: "date_of_birth" é uma propriedade associada a um contato. Use isso para limitar as informações que são disponibilizadas na página apenas àquelas de que você precisa.

default
Object

Objeto com ID da instância do objeto selecionado por padrão. ID de contato, ID de empresa etc.

null

Data

Os campos de data fornecem uma interface de seleção para facilitar a seleção de datas pelos criadores de conteúdo. Retorna o carimbo de data/hora que você pode usar no seu código.

Os campos de data são suportados nos módulos.

Campo de data com o seletor de calendário aberto
// Date field { "name" : "event_start_date", "label" : "Event Date", "required" : false, "locked" : false, "type" : "date", "default" : 1577854800000 }
Campo de data
ParâmetroTipoDescription Default
default
Timestamp

O carimbo de data/hora Unix Epoch para a data e a hora que você quer usar por padrão. Deixe como nulo para permitir que o seletor de data e hora indique a data e a hora atuais para o criador do conteúdo.

null

Data e hora

Os campos de data e hora fornecem uma interface de data e hora, como o campo de data, bem como um seletor de hora para facilitar para os criadores de conteúdo selecionarem a data e a hora do dia. Retorna o carimbo de data/hora que você pode usar no seu código.

Os campos de data e hora são suportados nos módulos.

Início do evento
// Date and time field { "name" : "event_start", "label" : "Event Start", "required" : false, "locked" : false, "type" : "datetime", "default" : 1577854800000 }
Campo de data e hora
ParâmetroTipoDescription Default
default
Timestamp

O carimbo de data/hora Unix Epoch para a data e a hora que você quer usar por padrão. Deixe como nulo para permitir que o seletor de data e hora indique a data e a hora atuais para o criador do conteúdo.

null

Endereço de email

Os campos de endereço de e-mail permitem que um usuário selecione vários endereços de e-mail. Eles podem ser usados para exibir informações de contato. O campo de e-mail retorna uma matriz de endereços de e-mail selecionados pelos quais você pode navegar.

Os campos de e-mail são suportados nos módulos.

email-field
// Email address field { "name" : "emails", "label" : "Email address", "required" : false, "locked" : false, "type" : "email", "default" : null }
Campo de endereço de e-mail
ParâmetroTipoDescription Default
default
Array

Matriz de strings de endereços de e-mail ["bob@example.com", "dennis@example.com"]

null

Incorporação

Os campos de incorporação permitem ao usuário adicionar uma URL de um site habilitado para oEmbed ou colar um código de incorporação de outro site. Para saber mais sobre o uso do oEmbed no HubSpot, e ver casos de uso, visite nosso documento sobre oEmbed.

Campo de incorporação
// embed field { "name" : "embed_field", "label" : "Embed", "required" : false, "locked" : false, "supported_source_types" : [ "oembed", "html" ], "supported_oembed_types" : [ "photo", "video", "link", "rich" ], "type" : "embed", "default" : { "source_type" : "oembed" } }
Use this table to describe parameters / fields
ParameterTypeDescription Default
supported_source_types
Array

Tipos de fontes suportados para URLs do oEmbed(oembed), código de incorporação HTML(html) ou Media Bridge (media_bridge).

["oembed", "html"]
supported_oembed_types
Array

O tipo de oEmbed suportado, incluindo "photo", "video", "link" e "rich". Não se aplica a supported_source_types de html

[ "photo", "video", "link", "rich" ]
supported_media_bridge_providers
Array

Matriz de IDs de provedores que determina quais provedores Media Bridge estão disponíveis para selecionar conteúdo.

Observação: este parâmetro também será preenchido ao instalar um aplicativo de provedor Media Bridge

type
String

Este parâmetro está sempre definido como "embed"

"embed"
default
Dict

Uma matriz contendo o parâmetro "source_type ". Este parâmetro tem um valor baseado em string das opções fornecidas no parâmetro "supported_source_types".

oembed

Arquivo

Os campos de arquivo permitem que o usuário faça upload de um arquivo no gerenciador de arquivos, ou no gerenciador de documentos, e facilita a anexação de itens que estão nesses locais. Isso pode ser útil para enviar links de PDFs ou de arquivos de outros formatos. Para exibir imagens em uma página, você deve usar o campo de imagem.

Os campos de arquivo são suportados nos módulos.

Campo de arquivo
// Email address field { "name" : "file_field", "label" : "File", "required" : false, "locked" : false, "type" : "file", "picker" : "file", "default" : null }
Campo de arquivo
ParâmetroTipoDescription Default
default
String

A URL do arquivo.

null
picker
String

Valores aceitáveis: "file", "document", "image".
O seletor mostra os ativos que foram carregados no gerenciador de arquivos ou no gerenciador de documentos, dependendo deste parâmetro.

file

E-mail de acompanhamento

Os campos de e-mail de acompanhamento permitem que um criador de conteúdo designe um e-mail que será enviado em resposta a um envio de formulário. Isso funciona em conjunto com a tag de formulário do HubL, por meio do parâmetro simple_email_campaign_id.

Os campos de e-mail de acompanhamento são suportados nos módulos.

followup email field
// Followup email field { "name" : "followup_email", "label" : "Followup email", "required" : false, "locked" : false, "type" : "followupemail", "default" : null }
Campo de endereço de e-mail
ParâmetroTipoDescription Default
default
String

ID de e-mail

null

Fonte

Os campos de fonte fornecem aos criadores de conteúdo controles básicos de estilo de fonte. Os criadores de conteúdo podem escolher o tamanho, a cor, a família de fonte e o formato (negrito, itálico e sublinhado). As fontes listadas são todas fontes do Google e fontes padrão seguras para a web. 

Os campos de fonte são suportados tanto nos temas quanto nos módulos. Os campos de fonte podem ser usados como campos de estilo.

Campo de fonte
// Font field { "name" : "font", "label" : "Font", "required" : false, "locked" : false, "load_external_fonts" : true, "type" : "font", "default" : { "size" : 12, "font":"Merriweather", "font_set":"GOOGLE", "size_unit" : "px", "color" : "#000", "styles" : { } }, "visibility" : { "hidden_subfields" : { "font": true, "size": true } } }

Observação: A família de fontes é determinada pela combinação de font e font_set. Você precisa ter os dois para carregar a fonte. Ao herdar campos, você precisa herdar ambos os valores.

Campo de fonte
ParâmetroTipoDescription Default
default
Object

Objeto de fonte com definições de tamanho, unidade de tamanho, cor e estilos para negrito, itálico e sublinhado.

{ "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }
load_external_fonts
Boolean

O HubSpot carregará automaticamente a fonte web selecionada na página se ela estiver selecionada e referenciada pelo HubL em uma folha de estilo ou em um módulo. Defina como falso se você já estiver carregando a fonte na página, assim a fonte não será carregada duas vezes.

true
visibility
Object

Usando o objeto aninhado hidden_subfields, você pode definir um booleano para os controles do campo de fonte que devem ser ocultados. Os subcampos incluem: font, size, bold, italic, underline e color.

variant
String

Ao usar uma fonte do Google, a variante da fonte que você deseja usar. Por exemplo, para usar um peso de fonte de 700, defina como "700". Para usar itálico e um peso de fonte de 400, defina como "400i".

Formulário

Os campos de formulário permitem que o criador de conteúdo designe um formulário na conta. Você pode usar isso para renderizar um formulário em uma página usando a tag de formulário do HubL

Os campos de formulário são suportados nos módulos.

form field-Aug-21-2020-08-09-55-35-PM
// Form field { "name" : "form", "label" : "Form", "required" : false, "locked" : false, "type" : "form", "default" : { "form_id" : "f7110408-1935-4ed3-8a8e-293bb1c9d1ec", "response_type" : "inline", "message" : "Thanks for submitting the form.", "gotowebinar_webinar_key" : null, "form_type" : "HUBSPOT" } }
Campo de endereço de e-mail
ParâmetroTipoDescription Default
default
Object

Objeto para formulários que contêm o ID do formulário selecionado, o tipo de resposta e a mensagem.

{ "response_type" : "inline", "message" : "Thanks for submitting the form." }

Gradiente

Este campo permite que os criadores de conteúdo criem e configurem gradientes. No momento, os gradientes lineares suportam até cinco paradas de cor. Os campos de gradiente têm uma propriedade .css que retorna CSS com base no valor do campo. Saiba mais sobre a propriedade CSS gerada.

Os campos de gradiente são suportados nos módulos. Os campos de gradiente só podem ser usados como campos de estilo.

Campo de gradiente
// Gradient field { "name": "bg_gradient", "label": "Background gradient", "help_text": "Sets a gradient behind the content", "required": false, "type": "gradient", "default": { "colors": [{ "color": { "r": 0, "g": 0, "b": 0, "a": 1 } }, { "color": { "r": 255, "g": 255, "b": 255, "a": 1 } }], "side_or_corner": { "verticalSide": "BOTTOM", "horizontalSide": null } } }
Campo de endereço de e-mail
ParâmetroTipoDescription Default
default
Object

O objeto que contêm a orientação de um gradiente ("side_or_corner") e paradas de cor para o gradiente como uma matriz de objetos.

Linha do HubDB

Os campos de linha do HubDB permitem que um criador de conteúdo selecione uma linha individual (ou linhas ao usar campos repetidores) em uma determinada tabela. Você pode utilizar este campo para criar listas definidas pelo usuário, tabelas, recursos e muito mais.

Os campos de linha do HubDB são suportados nos módulos.
Os campos de linha do HubDB estão disponíveis no CMS Hub Professional e Enterprise.

hubdb-row-field
// HubDB Row field { "name" : "hubdbrow_field", "label" : "HubDB row", "required" : false, "locked" : false, "table_name_or_id" : "3096859", "columns_to_fetch" : [ "name", "price", "desc" ], "display_columns" : [ "name", "price", "desc" ], "display_format" : "%0 - %1 :::: %2", "type" : "hubdbrow", "default" : { "id" : 4450468943 } }
Use this table to describe parameters / fields
ParameterTypeDescription Default
table_name_or_id
String

O nome ou o ID da tabela do HubDB. Este campo é obrigatório.

columns_to_fetch
Array

Uma matriz de nomes de colunas para buscar na tabela. Se for deixado em branco, retornará todas as colunas da tabela.

[]
display_columns
Array

Uma matriz de nomes de colunas para usar no rótulo de opção. Se for deixado em branco, retornará apenas a primeira coluna da tabela.

[]
display_format
String

O formato em que você deseja que os dados da coluna fossem exibidos no seletor de linha do HubDB usando o símbolo de porcentagem e o número para designar uma coluna.
Exemplo: %0 (%1) aparecerá como Column0Value (Column1Value)

""
default
Object

O objeto que contêm o "id" para definir a linha padrão do hubdb.

{ “id” : null }

Do Tabela HubDb

Os campos de tabela do HubDB permitem que um criador de conteúdo designe um HubDB na conta. Você pode usar isso para renderizar um formulário em uma página usando a tag de formulário do HubL. Retorna o ID da tabela, que você pode usar com as funções HubL do HubDB.

Os campos da tabela do HubDB são suportados nos módulos. Os campos de tabela do HubDB estão disponíveis no CMS HubProfessional e Enterprise.

Campo do HubDB
// HubDB Table field { "name" : "recipe_table", "label" : "Recipe Table", "required" : false, "locked" : false, "type" : "hubdbtable", "default" : 2010782 }
Campo de endereço de e-mail
ParâmetroTipoDescription Default
default
String

ID da tabela do HubDB

null

Ícone

Os campos de ícone fornecem uma interface de seleção para facilitar a adição de ícones aos módulos por parte dos criadores de conteúdo. O campo de ícone vem predefinido com ícones FontAwesome.

Os campos de ícone são suportados nos módulos. Os campos de ícone podem ser usados como campos de estilo.

icon field
// Icon field { "name" : "icon_field", "label" : "Icon", "required" : false, "locked" : false, "icon_set" : "fontawesome-5.14.0", "type" : "icon", "default" : { "name" : "accessible-icon", "unicode" : "f368", "type" : "REGULAR" } }
Campo de ícone
ParâmetroTipoDescription Default
default
Object

Objeto de ícone

icon_set
String

O ícone do FontAwesome que deve ser usado. Estes são os valores possíveis:
fontawesome-5.14.0
fontawesome-5.0.10

fontawesome-5.14.0

Imagem

Os campos de imagem fornecem uma interface fácil de usar para os criadores de conteúdo adicionarem imagens a um módulo ou tema. Os campos de imagem fornecem uma interface de seletor de arquivos que lista as imagens do Gerenciador de arquivos. Como as imagens podem ser usadas e exibidas de diferentes maneiras, os desenvolvedores podem limitar as opções de tamanho disponíveis para o criador do conteúdo na IU, bem como permitir o carregamento lento de imagens.

Campo de imagem

Os campos de imagem são suportados nos módulos.
As imagens podem ser usadas como campos de estilo 
Você somente deve usar campos de imagem como campos de estilo se a imagem for puramente representativa, ou seja, não transmita significado e não seja uma imagem de fundo. Isso serve para seguir as práticas recomendadas de acessibilidade.

// Image field { "name" : "image_field", "label" : "Image", "required" : false, "locked" : false, "responsive" : true, "resizable" : true, "show_loading" : false, "type" : "image", "default" : { "size_type" : "exact", "src" : "", "alt" : "image-alt-text", "loading" : "lazy", "width" : 128, "height" : 128, "max_width" : 128, "max_height" : 128 } }
Campo de link
ParâmetroTipoDescription Default
default
Object

Define as propriedades para dimensionamento de imagens, texto alternativo e muito mais. Pode conter as seguintes propriedades: 

  • size_type: se a imagem é dimensionada automaticamente ou manualmente:
    • "auto": o HubSpot ajustará automaticamente o tamanho da imagem com base nas dimensões originais.
    • "auto_custom_max": o HubSpot ajustará automaticamente o tamanho da imagem de acordo com as dimensões máximas especificadas pelas propriedades "max_height " e "max_width".
    • "exact": o HubSpot dimensionará a imagem com base nas dimensões especificadas pelas propriedades "height" e "width".
  • src: a URL da imagem padrão. Deve ser um caminho absoluto para uma imagem.
  • alt: o texto alternativo padrão da imagem.
  • loading: as opções de carregamento lento da imagem. Pode ser definido como "disabled" (padrão), "eager" ou "lazy".
{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }
responsive
Boolean

determina se a imagem deve agir de forma responsível ou se deve ter altura e largura fixas.

true
show_loading
Boolean

Determina se os controles para escolher carregar a imagem de forma lenta são mostrados no editor de páginas.

false

Os campos de link fornecem uma interface fácil para os criadores de conteúdo fornecerem links para URLs e endereços de e-mail. Para links externos, os criadores de conteúdo escolhem "external". Para links de e-mail, "email address". Por fim, para conteúdo hospedado no HubSpot CMS, eles podem usar "content", que mostra uma lista de todas as páginas e posts de blog na conta, "file" mostrando os ativos de arquivo e "blog" mostrando todas as listagens de blogs na conta. Os campos de link são muito semelhantes aos campos de URL, exceto pelo fato de fornecerem uma IU para "abrir em uma nova janela" e "informar aos mecanismos de busca para não seguir". Se você não quer que os criadores de conteúdo tenham esse controle, use o campo de URL.

Os campos de link são suportados nos módulos.

link field
// Link field { "name" : "link", "label" : "Link", "required" : false, "locked" : false, "supported_types" : [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ], "type" : "link", "show_advanced_rel_options" : false, "default" : { "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false } }
Campo de link
ParâmetroTipoDescription Default
default
Object

Objeto de URL

{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }
supported_types
Array

lista dos tipos de links que podem ser selecionados pelos criadores de conteúdo. Remova os tipos da lista que você não quer que os criadores de conteúdo tenham acesso para definir.

[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]
show_advanced_rel_options
Boolean

Se os criadores de conteúdo podem ou não ver opções rel avançadas. 

false

Logotipo

Os campos do logotipo permitem que os criadores de conteúdo especifiquem imagens a serem usadas em uma página, por padrão, para o logotipo do domínio. Isso é útil para cabeçalhos e rodapés de sites que contêm o logotipo da empresa.

Os campos de logotipo são suportados nos módulos.

logo field
// Logo field { "name" : "logo", "label" : "Logo", "required" : false, "locked" : false, "type" : "logo", "default" : { "override_inherited_src" : false, "src" : null, "alt" : null } }
Campo de link
ParâmetroTipoDescription Default
default
Object

Objeto de logotipo

{ "override_inherited_src" : false, "src" : null, "alt" : null }

Os campos de menu fornecem uma interface fácil para os criadores de conteúdo criarem, editarem e selecionarem um menu de navegação que pode ser reutilizado em outras páginas. Este campo é ideal para menus que são usados em várias páginas, como a navegação principal e a navegação no rodapé e outros conteúdos globais.  Use esse campo em conjunto com a tag de menu ou a função menu(), para renderizar um menu dentro do seu módulo.

Para menus que não serão reutilizados em outras páginas, como um menu de índice, use o campo de menu simples.

Os campos de menu são suportados nos módulos.

menu field
// Menu field { "name" : "menu", "label" : "Menu", "required" : false, "locked" : false, "type" : "menu", "default" : 12345678911 }
Campo de link
ParâmetroTipoDescription Default
default
Integer

O ID do menu. Valor padrão é null; assume o menu padrão na navegação.

null

Número

Os campos de numero fornecem uma interface fácil para que os criadores de conteúdo digitarem ou ajustarem valores e opções numéricos. Isso pode ser usado para criar itens baseados em porcentagem ou qualquer coisa que exija a entrada de números.

Os campos de número são suportados nos módulos. Os campos de número podem ser usados como campos de estilo.

Campo de número
// Number field { "name" : "number_field", "label" : "Number", "required" : false, "locked" : false, "display" : "slider", "min" : 1, "max" : 10, "step" : 1, "type" : "number", "prefix": "", "suffix" : "", "default" : null }

Observação: A utilização dos parâmetros de sufixo e prefixo não afetam o valor numérico do campo. Eles são simplesmente para fins de exibição no editor de conteúdo.

Campo de link
ParâmetroTipoDescription Default
default
Number

O número padrão a ser usado.

null
prefix
String

Adicionado como um prefixo ao campo de número.

suffix
String

Adicionado como um sufixo ao campo de número.

Página

Os campos de página fornecem uma interface para que os criadores de conteúdo selecionem páginas do site e landing pages.

O valor retornado por um campo de página é o ID da página selecionada. Quando usado em conjunto com as funções content_by_id ou content_by_ids, é possível usar os dados das páginas selecionadas na página atual.

Os campos de página são suportados nos módulos.

// Page field { "name" : "page_field", "label" : "Page", "help_text" : "Pulls data from the selected page.", "required" : false, "locked" : false, "placeholder" : "Page to pull from", "type" : "page", "default" : null }
Campo de link
ParâmetroTipoDescription Default
default
Integer

Um ID de página predefinido a ser selecionado.

null

Rich text

Os campos rich text fornecem aos criadores de conteúdo uma experiência de editor de texto WYSIWYG. Quando um campo de rich text é impresso, ele é impresso como HTML. Se você não quer que os criadores de conteúdo tenham capacidade de formatação, use campos de texto.

Os campos rich text são suportados nos módulos.

Campo de rich text
// Rich text field { "name" : "description", "label" : "Description", "required" : false, "locked" : false, "type" : "richtext", "default" : null }
Campo de link
ParâmetroTipoDescription Default
default
String

a string de conteúdo a ser exibida suporta HTML. 

Observação: você não pode usar a função get_asset_url dentro desta propriedade padrão. 

""
enabled_features
Opcional
Array

Uma matriz de itens que permite configurar a barra de ferramentas do editor de rich text e determinar quais opções estão disponíveis para os editores de conteúdo. 

Os campos de menu simples fornecem uma interface fácil para os criadores de conteúdo criarem um menu de navegação que não será reutilizado em outras páginas. Para menus que precisam ser reutilizados, use o campo de menu. Você pode usar isso para criar um menu de índice com links para títulos em páginas muito longas, ou uma lista de links de conteúdo que só faz sentido ter na página atual.

Os campos de menu simples são suportados nos módulos.

Campo de menu simples
// Simple menu field { "name" : "toc_menu", "label" : "Table of Contents", "required" : false, "locked" : false, "type" : "simplemenu", "default" : [ { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "Why is product marketing important?", "linkUrl" : null, "linkParams" : null, "linkTarget" : null, "type" : "NO_LINK", "children" : [ { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "Product Marketing Responsibilities", "linkUrl" : "#product-marketing-responsibilities", "linkParams" : null, "linkTarget" : null, "type" : "URL_LINK", "children" : [ ] }, { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "1. Identify the buyer personas and target audience for your product.", "linkUrl" : "#step1", "linkParams" : null, "linkTarget" : null, "type" : "URL_LINK", "children" : [ ] }, { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "2. Successfully create, manage and carry out your product marketing strategy.", "linkUrl" : "#step2", "linkParams" : null, "linkTarget" : null, "type" : "URL_LINK", "children" : [ ] } ] }, { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "How HubSpot can help", "linkUrl" : "https://hubspot.com", "linkParams" : null, "linkTarget" : null, "type" : "URL_LINK", "children" : [ ] } ] }
Campo de link
ParâmetroTipoDescription Default
default
Array of objects

Estrutura JSON para menus e menus secundários.

[]

Espaçamento

Este campo fornece uma interface de usuário (IU) para que os criadores de conteúdo definam o deslocamento e a margem. Os campos de espaçamento têm uma propriedade .css que retorna o CSS com base no valor do campo. Saiba mais sobre a propriedade CSS gerada.

Os campos de espaçamento são suportados nos módulos.
Os campos de espaçamento só podem ser usados como campos de estilo.

captura de tela do campo de estilo de espaçamento expandido no editor de páginas
// Spacing field { "name": "img_spacing", "label": "Spacing around image", "required": false, "type": "spacing", "default": { "padding": { "top": { "value": 10, "units": "px" }, "bottom": { "value": 10, "units": "px" }, "left": { "value": 10, "units": "px" }, "right": { "value": 10, "units": "px" } }, "margin": { "top": { "value": 10, "units": "px" }, "bottom": { "value": 10, "units": "px" } } } }
Campo de link
ParâmetroTipoDescription Default
default
Object

O objeto que contém um objeto de deslocamento e um objeto de margem. Atualmente, a margem só suporta ajustes "top" e "bottom".

{}

Tag

Os campos de tag fornecem um seletor de tags de blog para os criadores de conteúdo. Esse seletor de tags retorna um ID de tag que pode ser usado em funções relacionadas a tags de blog, tais como URL da tag do blog e posts recentes de tags de blog.

Os campos de tags são suportados nos módulos.

tag field
// Tag field { "id" : "c3395cd3-8e60-7e47-2f1b-b7ccf4d669c9", "name" : "blog_tag", "label" : "Blog Tag", "required" : false, "locked" : false, "tag_value" : "SLUG", "type" : "tag", "default" : null }
Campo de tag
ParâmetroTipoDescription Default
default
String

ID da tag do blog

null

Texto

Os campos de texto fornecem aos criadores de conteúdo uma experiência simples de edição de texto, sem funcionalidades rich text. Os campos de texto aparecem inicialmente como uma única linha, mas podem se expandir para serem áreas de texto, permitindo várias linhas. Use-os quando não quiser que os criadores de conteúdo tenham controle sobre a formatação. Se você quiser fornecer controles de formatação, use campos rich text.

Os campos de texto são suportados nos módulos.

text field
// Text field { "name" : "product_name", "label" : "Product Name", "required" : false, "locked" : false, "validation_regex" : "", "allow_new_line" : false, "show_emoji_picker" : false, "type" : "text", "default" : "" }
Campo de link
ParâmetroTipoDescription Default
default
String

String de texto.

""

Alinhamento de texto

Este campo permite que os criadores de conteúdo alinhem o conteúdo do texto dentro de um container. Isso não deve ser usado para alinhar outros ativos, pois há um tipo de campo específico para isso.

Os campos de alinhamento de texto são suportados nos módulos. Os campos de alinhamento de texto só podem ser usados como campos de estilo.

Campo de alinhamento de texto
// text alignment field { "name": "heading_align", "label": "Heading alignment", "required": false, "type": "textalignment", "default": { "text_align": "LEFT" } }
Campo do blog
ParâmetroTipoDescription Default
default
Object

O objeto que contém horizontal_align e vertical_align.

alignment_direction
String

Determina se apenas os controles de alinhamento horizontal ou vertical, ou ambos, devem ser mostrados. Pode ser:

  • HORIZONTAL
  • VERTICAL
  • BOTH
BOTH

URL

Os campos de URL fornecem uma experiência semelhante para vincular campos. Fornecendo uma interface para os criadores de conteúdo adicionarem links. No entanto, os campos de URL não exibem uma IU para abrir em uma nova janela, nem informam aos mecanismos de busca para não seguir. Use este campo quando você, o desenvolvedor, quiser determinar os valores disso. Se você quiser que o usuário tenha controle, use campos de link.

Os campos de URL são suportados nos módulos.

Campo de URL
// URL field { "name" : "url", "label" : "URL", "required" : false, "locked" : false, "supported_types" : [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ], "type" : "url", "default" : { "content_id" : null, "href" : "http://example.com", "type" : "EXTERNAL" } }
Campo de link
ParâmetroTipoDescription Default
default
Object

Objeto de URL, com tipo, href e id do conteúdo (se o conteúdo for uma página ou post no HubSpot)

{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }
supported_types
Array

lista dos tipos de links que podem ser selecionados pelos criadores de conteúdo. Remova os tipos da lista que você não quer que os criadores de conteúdo tenham acesso para definir.

[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]

Vídeo

Os campos de vídeo fornecem aos editores de conteúdo um lugar para adicionar HubSpot Video ao conteúdo do módulo sem a necessidade de usar campos rich text.

Campo de vídeo
//Video field { "id" : "ca4a319e-5b58-422e-47ac-49ce1b51b507", "name" : "videoplayer_field", "label" : "Video", "required" : false, "locked" : false, "type" : "videoplayer", "show_advanced_options" : false, "default" : { "player_id" : 32173842991, "height" : 1224, "width" : 1872, "conversion_asset" : { "type" : "CTA", "id" : "c3e4fa03-2c69-461d-b9af-22b2fde86bc7", "position" : "POST" }, "loop_video" : false, "mute_by_default" : false, "autoplay" : false, "hide_control" : false } }
Use this table to describe parameters / fields
ParameterTypeDescription Default
default
Object

Objeto de vídeo com configurações para player_id, height, width, size_type, conversion_asset, loop_video, mute_by_default, autoplay e hide_control.

[]
show_advanced_options
Boolean

Se os criadores de conteúdo podem ver as opções padrão avançadas.

false

Parâmetros do objeto conversion_asset

Use this table to describe parameters / fields
ParameterTypeDescription Default
type
String

Aceita "FORM", "CTA" ou ""

""
id
String

O ID do formulário ou tipo de CTA

""
position
String

Se o ativo de conversão deve ser mostrado antes do início do vídeo ou depois de este terminar. Aceita "PRE" ou "POST".

""

Esse artigo foi útil?
Este formulário é para comentários sobre nossos documentos de desenvolvimento. Se tiver comentários sobre o produto da HubSpot, em vez disso compartilhe sua opinião no Fórum de Ideias.