Ultima atualização: Janeiro 19, 2023
Essa é uma visão geral de todos os módulos padrão disponíveis para os modelos do tipo arrastar e soltar nas ferramentas de design. Cada tipo de módulo pode ser personalizado com opções de estilo e conteúdo no inspetor. Você também pode adicionar um módulo padrão a um modelo HTML com seu snippet HubL.
Adicionar um módulo ao seu modelo
Para adicionar módulos aos modelos de arrastar e soltar, clique em + Adicionar no inspetor no canto superior direito do editor. Todos os módulos padrão e quaisquer módulos ou grupos salvos serão exibidos aqui. Para localizar um módulo específico, insira seu nome na barra de pesquisa. Você também pode clicar no menu suspenso Filtrar por categoria ou tags e selecionar um ou mais filtros.
Quando o módulo é selecionado no editor, você pode modificar os estilos, as configurações e o conteúdo no inspetor. Na seção Divisão de texto HTML, clique em Expandir para adicionar mais estilos personalizados no editor de código.
Na parte inferior do inspetor, você pode bloquear o módulo para que os usuários não possam modificar o conteúdo padrão ao editar um blog, e-mail ou página. Clique para ativar a opção Impeça a edição em editores de conteúdo e ativar essa configuração.
Personalizar um módulo padrão
Todas as contas do Marketing Hub Professional e Enterprise de do CMS Hub Professional e Enterprise têm a pasta @hubspot nas ferramentas de design por padrão. Essa pasta contém todos os temas e módulos padrão, incluindo os módulos de e-mail do tipo arrastar e soltar. Esses temas e módulos são somente leitura, mas podem ser clonados se você quiser editá-los. 
- Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
- No Finder, clique na pasta @hubspot.
- Clique no módulo padrão que você deseja clonar e selecione Clonar módulo.
- No módulo clonado, edite o código-fonte do módulo no painel de edição central.
- Para salvar suas alterações, no canto superior direito, clique em Publicar alterações. O módulo estará disponível para uso ao criar modelos.
Tipos de módulos padrão
Cancelar assinatura de backup
O modelo de cancelamento de assinatura de backup será exibido para os destinatários do e-mail que clicarem no link de cancelamento de assinatura se a HubSpot não puder determinar seu endereço de e-mail. Você pode personalizar o texto de ajuda que aparece na página de cancelamento de assinatura de backup na seção Conteúdo padrão deste módulo.
Comentários do blog
Observação: o módulo de comentários do blog não está disponível para modelos de página ou e-mail.
O módulo de comentários do blog adiciona uma seção de comentários a um modelo de post de blog. Você pode personalizar o formulário de comentários do blog na ferramenta de formulários. O nome do formulário será baseado no título do seu blog.
Conteúdo do blog
Observação: o módulo de conteúdo do blog não está disponível para modelos de página ou e-mail.
O módulo de conteúdo do blog contém a marcação HTML/HubL para posts de blog e páginas de listagem de blog. Você pode editar a marcação dos posts clicando em Editar modelo da publicação e editar a marcação da listagem clicando em Editar modelo de listagem. Saiba mais sobre a marcação do módulo de conteúdo do blog.
Assinatura de e-mail do blog
Observação: o módulo de assinatura de e-mail do blog não está disponível para modelos de e-mail.
O módulo de assinatura de e-mail do blog permite que os visitantes assinem os e-mails do blog preenchendo um formulário. Este módulo é preenchido pelo formulário de assinante de blog, que pode ser personalizado na ferramenta de formulários.
Clique no menu suspenso Selecionar blog a exibir e selecione o blog que seus visitantes estão assinando. Na caixa de texto Título para exibir acima do formulário, personalize o texto que aparecerá no título acima do formulário. Passe o cursor do mouse sobre a resposta integrada existente e clique no ícone de expansão para personalizar o texto exibido após um visitante enviar o formulário.
Call to action
Um módulo de call to action (CTA) coloca uma CTA em seu próprio módulo dentro do layout. Você também pode inserir um CTA em um módulo de rich text.
No inspetor, clique no menu suspenso CTA
Coluna flexível
Colunas flexíveis podem ser adicionadas aos modelos de página para permitir adicionar, remover e reordenar os módulos dentro do editor de conteúdo. Isso permite que os criadores de página tenham a flexibilidade de usar um modelo para criar vários layouts de página.
- As colunas flexíveis não estão disponíveis no blog, na página do sistema ou nos modelos de e-mail.
- Quando uma coluna flexível for personalizada para uma página específica no editor de conteúdo, as alterações feitas na coluna flexível do modelo não serão refletidas nessa página. Isso garante que o conteúdo personalizado não seja substituído.
Quando você adiciona um módulo de coluna flexível ao seu modelo, pode arrastar e soltar outros módulos para criar um grupo de coluna flexível. Você também pode clicar no botão direito em um grupo estático existente e selecionar Tornar coluna flexível.
Siga-me
Observação: o módulo siga-me não está disponível para modelos de e-mail.
Você pode usar o módulo Siga-me
Quando você adiciona um módulo Siga-me, pode personalizar o cabeçalho do módulo que aparece acima dos ícones sociais.
Você pode especificar quais redes de mídias sociais aparecem neste módulo na seção Siga-me nas configurações sociais.
Observação: o módulo Siga-me usa ícones padrão para cada rede social. Se desejar usar seus próprios ícones sociais personalizados, você pode criar uma versão personalizada do módulo.
Siga-me - e-mail
Observação: este módulo está disponível somente para e-mails criados no editor de arrastar e soltar. Você pode localizar o módulo no editor nomeado Social.
O módulo de e-mail Siga-me oferece opções de formatação e configurações adicionais para modelos de e-mail de arrastar e soltar. Você pode ajustar a forma do ícone social, as cores
Para editar as redes sociais exibidas nesse módulo, clique no ícone + Adicionar na seção Rede social do inspetor. Passe o cursor do mouse sobre o nome de uma rede social e clique no ícone de edição
Clique no edit para selecionar a rede social que será exibida e a URL que leva a ela. Se você selecionar Ícone personalizado, você verá opções adicionais para especificar uma imagem personalizada para esta rede. Clique em Substituir para escolher uma imagem na ferramenta de arquivos ou carregar uma nova imagem do computador.
Formulário
Observe: o módulo de formulário não disponível para modelos de e-mail.
O módulo de formulário permite adicionar um formulário à sua página ou blog para capturar informações de contato dos visitantes do seu site.
Para esse módulo, você pode personalizar as seguintes configurações:
- Título do formulário: insira o título para seu formulário que será exibido na página ou blog.
- Formulário: selecione um formulário existente do HubSpot para exibir na página ou adicione um novo formulário.
- O que um visitante verá depois de enviar o formulário?: selecione se deve redirecionar a pessoa que envia o formulário para outra página ou exibir uma mensagem de agradecimento integrada na mesma página.
- Mensagem de agradecimento: personalize sua mensagem de agradecimento integrada.
- Enviar notificações de formulário para os endereços de e-mail especificados em vez do padrão de formulário: envie notificações de formulário para os endereços de e-mail especificados. Isso substituirá quaisquer destinatários de notificação definidos na ferramenta de formulários.
- Adicionar ao fluxo de trabalho: adicione os visitantes que enviam o formulário a um fluxo de trabalho (somente Marketing Hub Professional ou Enterprise).
- Enviar um e-mail de acompanhamento: envie até três e-mails de acompanhamento aos visitantes que enviam o formulário.
Cabeçalho
Um módulo de cabeçalho exibe uma linha de texto em uma tag HTML de cabeçalho. Insira o texto padrão do cabeçalho na caixa Conteúdo do cabeçalho. Clique no menu suspenso Tipo de cabeçalho para selecionar a tag de título (H1-H4).
Espaçador horizontal
O módulo de Espaçador horizontal cria uma tag div vazia que adiciona espaçamento entre os elementos de uma página.
Imagem
Módulos de imagem adicionam uma imagem a uma página ou e-mail. Ao adicionar conteúdo padrão, você pode selecionar uma imagem já carregada na ferramenta de arquivos ou carregar uma nova imagem do computador.
Você também pode personalizar:
- O texto alternativo da imagem.
- O tamanho da imagem:
- Para dimensionar a imagem com base no navegador e no tamanho do dispositivo, selecione Ajustar automaticamente. Se você selecionar essa opção, poderá definir o tamanho máximo da imagem na seção Tamanho máximo. Para usar o tamanho original da imagem como tamanho máximo, selecione Tamanho original da imagem. Para definir manualmente um tamanho máximo, selecione Personalizar e defina a Largura máxima e a Altura máxima.
- Para padronizar o tamanho da imagem para todos os dispositivos, selecione Largura e altura exatas.
- As configurações de carregamento da imagem:
- Lento: a imagem será carregada somente se o visitante rolar até ela. Isso reduzirá o tempo de carregamento da página e é a configuração padrão para os módulos de imagem.
- Rápido: a imagem será carregada assim que a página for carregada.
- A URL à qual os visitantes serão levados quando clicarem na imagem.
Galeria de imagens
O módulo de galeria de imagens adiciona uma série de imagens alternantes a um módulo. No inspetor, você pode personalizar as seguintes opções:
- Slide: Clique em +Adicionar para inserir mais slides. Os Slides podem ser reorganizados, arrastando-os e os soltando onde quiser. Passe o cursor do mouse sobre um slide específico e clique no ícone de edição para adicionar uma legenda e uma imagem.
- Modo de exibição: selecione um modo para suas imagens.
- Slides em loop: clique para ativar esse botão para repetir os slides depois que todas as imagens tiverem sido alternadas.
- Avanço automático: clique para ativar esse botão para permitir que os slides mudem por conta própria. Se você selecionar essa opção, clique nas setas para especificar o número de segundos entre os slides.
- Tempo em segundos entre a rolagem automática: se o Avanço automático estiver ativado, clique nas setas para ajustar o número de segundos entre os slides.
- Mostrar botões de navegação: clique para ativar esse botão para permitir que os visitantes cliquem manualmente.
- Altura variável: selecione o comportamento da altura do módulo.
- Altura fixa: a galeria deve manter o mesmo tamanho durante a rolagem pelas imagens
- Altura variável: a galeria será redimensionada com base no tamanho da imagem.
- Transições de slides: selecione Deslizar ou Desvanecer como transição de slide.
- Posição da legenda: selecione se as legendas serão exibidas abaixo ou acima das imagens.
Troca de idiomas
Observe: o módulo de troca de idiomas não está disponível para modelos de e-mail.
O módulo de troca de idiomas permite que os visitantes alternem entre as versões traduzidas de uma página ou blog. Clique no menu suspenso Modo de exibição para personalizar como os nomes dos seus idiomas traduzidos serão exibidos:
Pagelang: o nome de cada idioma aparecerá no idioma da página atual. Por exemplo, se você está vendo a versão em inglês de uma página com uma tradução em francês, quando clicar em trocar idioma, você verá inglês e francês como nomes de idioma.- Localizado: o nome de cada idioma aparecerá nesse idioma. Por exemplo, se você está vendo a versão em inglês de uma página com uma tradução em francês, quando clicar em trocar idioma, você verá inglês e francês como nomes de idioma.
- Híbrido: uma combinação dos dois. Por exemplo, se você está vendo a versão em inglês de uma página com uma tradução em francês, quando clicar em trocar idioma, você verá inglês e francês (Français) como nomes de idioma.
Este módulo aparecerá apenas nas páginas ativas com mais de uma tradução publicada. Saiba mais sobre como trabalhar com conteúdo multilíngue no HubSpot.
Módulo do logotipo
O módulo de Logotipo extrai o logotipo da sua empresa automaticamente das configurações do site. Para usar um logotipo diferente, clique para ativar o botão Substituir o logotipo padrão para esta página para carregar uma nova imagem apenas para esta página. Para alterar o logotipo padrão para todo o conteúdo, nas configurações do site, clique em Editar logotipo padrão nesse domínio.
O módulo de logotipo será automaticamente vinculado ao domínio da empresa Para substituir esse padrão e vincular a uma página diferente, insira uma URL de link exclusiva.
Corpo principal do e-mail
O módulo de corpo principal de e-mail é um módulo rich text padrão incluído em cada modelo de e-mail por padrão. Você pode personalizar o conteúdo padrão para o corpo do e-mail em um modelo específico.
Além das opções de estilo padrão, esse módulo pode ser personalizado com cores padrão, bordas e espaçamento. Clique no balão de cores e escolha uma cor no seletor de cores ou insira o valor hexadecimal no campo de texto para definir cores padrão. Insira os valores de pixel nos campos de texto Largura da borda e Espaçamento interno para definir o espaçamento padrão.
Menu
O módulo de menu adiciona navegação ao seu conteúdo e modelos. Menus são criados e gerenciados diretamente nas configurações do site.
Nas ferramentas de design, você pode personalizar os seguintes recursos do módulo de menu:
- Menu: selecione um dos menus existentes nas configurações.
- Tipo de menu avançado: selecione como os itens de menu devem aparecer no site:
- Estático - sempre mostra páginas de nível superior no
menu: manter seu menu consistente em todas as páginas. - Dinâmico por seção - Mostra as páginas no
menu relacionadas àseção que está sendo visualizada: exiba itens de menu relacionados ao item de menu de nível superior que está sendo visualizado. - Dinâmico por página - Mostra as páginas no
menu relacionadas àpágina que está sendo visualizada: exiba itens de menu relacionados à página específica que está sendo visualizada. - Menu de caminho estilo "Breadcrumb" (usa fluxo horizontal): exibe os itens do menu horizontalmente em um caminho relativo no topo do site.
- Estático - sempre mostra páginas de nível superior no
- Níveis máximos: selecione o número máximo de itens de menu secundários que podem ser exibidos.
- Orientação: selecione se os itens de menu são exibidos horizontal ou verticalmente.
- Ativar submenus: marque essa caixa de seleção para mostrar os itens de menu ao passar o cursor do mouse. Desmarque essa caixa de seleção para mostrar os itens de menu secundários.
Módulos
Os módulos criados no editor de código permitem usar HTML, CSS, Javascript, e HubL para adicionar funcionalidades avançadas aos seus modelos, enquanto ainda permite que seus usuários editem o conteúdo do módulo no editor sem alterar o código. Esses componentes serão rotulados com o ícone de módulo no localizador e no inspetor. Saiba mais sobre como trabalhar com módulos codificados personalizados em nossa documentação do desenvolvedor.
Informações de localização do escritório
O módulo de localização de escritório inclui os tokens obrigatórios que devem ser incluídos em um modelo de e-mail para enviar e-mails de marketing de forma legal. Embora você possa editar o estilo desse módulo, você não poderá salvar um modelo de e-mail sem um módulo de informações de localização de escritório ou as tags
Além das opções de estilo padrão, esse módulo pode ser personalizado com cores padrão, bordas e espaçamento. Clique no balão de cores e escolha uma cor no seletor de cores ou insira o valor hexadecimal no campo de texto para definir cores padrão. Insira os valores de pixel nos campos de texto Largura da borda e Espaçamento interno para definir o espaçamento padrão.
Uma linha de texto
A linha do módulo de texto permite que os usuários editem uma única linha de texto no editor de conteúdo.
Rodapé da página
O módulo de rodapé da página exibe informações de direitos autorais com o ano atual e o nome da empresa. O nome da empresa é extraído automaticamente da seção de Rodapé nas configurações de e-mail.
Solicitação de senha
O módulo de solicitação de senha está disponível em modelos de sistema de solicitação de senha. Se uma página for protegida por senha, a página de solicitação de senha será exibida antes que um usuário possa acessá-la. Você pode personalizar o texto do botão Enviar e o texto a exibir se a senha incorreta for inserida.
Filtro da publicação
Observação: o módulo de assinatura de e-mail do blog não está disponível para modelos de e-mail.
O módulo de filtro de post exibe uma lista de artigos do blog de um tópico específico, mês ou autor.
Você pode personalizar as seguintes configurações para este módulo na seção Conteúdo padrão:
- Selecione um blog para exibir: selecione de qual blog os posts devem ser usados.
- Lista de valores para filtrar links: selecione se o módulo é filtrado por tag, mês ou autor.
- Ordenação de valores para filtrar links: selecione se os valores serão organizados em ordem alfabética ou por número de posts.
- Título da lista a exibir: insira um título para exibir acima dos posts.
- Número máximo de valores de filtro para exibir: insira o número máximo de posts para um filtro específico. Deixe esse campo em branco para mostrar todas as publicações.
- Link de texto a exibir se houver mais valores de posts que o permitido para exibir: insira o texto que será exibido se houver mais posts disponíveis em uma categoria. O texto padrão é Ver tudo.
Lista de publicações
Observação: o módulo de assinatura de e-mail do blog não está disponível para modelos de e-mail.
O módulo de listagem de posts é usado para exibir uma lista de posts de um blog da HubSpot. Você pode definir o módulo para exibir os posts mais recentes ou mais populares no último mês, nos últimos seis meses, no último ano ou desde sempre.
Você pode personalizar os seguintes padrões de conteúdo no inspetor:
- Selecione o blog a exibir: o blog para o qual deseja exibir títulos de publicação
- Listar publicações de blog por: selecione como você organizará os posts
- Título da lista a exibir: insira um título para exibir acima dos posts.
- Número máximo de posts de blog para listar: insira um número máximo de posts que aparecerão nesse módulo.
Rich text
O módulo rich text é o módulo de conteúdo mais comum usado nas ferramentas de conteúdo da HubSpot. Oferece suporte a opções de edição para diferentes componentes, como texto, imagens e CTAs.
Para adicionar conteúdo padrão a este módulo, clique em Expandir ou clique na prévia do conteúdo para abrir um editor rich text.
Lista de RSS
Observação: o módulo de lista de RSS não está disponível para modelos de e-mail. Use um e-mail RSS em vez disso.
Você pode usar um módulo de lista de RSS para exibir resumos de publicação para um feed de blog da HubSpot ou um feed RSS externo.
Os módulos de lista de RSS podem exibir um blog ou uma tag específica. Clique no botão correspondente para indicar se uma imagem em destaque, o nome do autor, o resumo ou a data de publicação deve ser exibido com cada publicação.
Depois de ativar essas configurações, você pode personalizar os seguintes detalhes:
- Mostrar nome do autor: insira o texto de atribuição do autor para exibir acima de cada nome de autor. Por padrão, esse módulo incluirá por como texto de atribuição.
- Mostrar resumo: insira o comprimento (caracteres) de cada resumo do blog. Você também pode personalizar o texto de clickthrough de resumo, que é o link do blog que os visitantes clicam para ler a publicação completa. Por padrão, esse texto será rotulado como Leia mais.
- Mostrar data de publicação: selecione o Formato da data de publicação para personalizar como a data e a hora são formatadas para cada publicação. Você também pode personalizar o texto do indicador de data da publicação. Por padrão, esse texto será publicado em.
Cabeçalho da sessão
O módulo de cabeçalho da seção permite exibir uma tag de cabeçalho h1 com um subtítulo de parágrafo. Este módulo é ideal para nomear a seção principal de uma página.
Menu simples
Módulos de menu simples permitem que usuários criem menus específicos de página no editor de conteúdo. Este módulo fornece a flexibilidade de construir um menu simples para um modelo específico. No inspetor, clique em Editar menu para adicionar itens de menu, links e selecionar a orientação do menu. A configuração de orientação do menu adiciona uma classe hs-menu-flow-horizontal ou hs-menu-flow-vertical à caixa de menu, que pode ser usada para estilizar no CSS. Saiba mais sobre as classes adicionadas pelas configurações de módulo em nossa documentação para desenvolvedores.
Compartilhamento social
O módulo de compartilhamento social permite que os visitantes compartilhem facilmente seu conteúdo nos canais de mídias sociais e por e-mail. Clique para ativar o botão Ativação? ao lado de uma rede social específica para incluí-la em sua página ou e-mail.
O link de compartilhamento será preenchido automaticamente com as tags HubL necessárias para compartilhar seu conteúdo. Em e-mails, o módulo usará a URL da versão da Web desse e-mail no link de compartilhamento.
Observação: o módulo de compartilhamento social usa ícones padrão para cada rede social. Se desejar usar seus próprios ícones sociais personalizados, você pode criar uma versão personalizada do módulo.
Preferências da assinatura
Módulos de preferências de assinatura estão disponíveis apenas em modelos de sistema de preferências de assinatura.
Esses módulos permitem personalizar a página que um destinatário de e-mail vê quando ele acessa o gerenciamento das suas preferências de assinatura ou cancela a assinatura de suas comunicações de e-mail.
Confirmação de atualização da assinatura
O módulo de confirmação de atualização de assinatura é um módulo rich text que está disponível em modelos de sistema de confirmação de atualização de assinatura. Ele permite personalizar o que é exibido quando um destinatário do e-mail atualiza suas configurações de assinatura.
Visualizar como página da Web
O módulo de visualização como página da Web fornece aos destinatários do e-mail a opção de abrir o e-mail na versão de página da Web.
