Módulos padrão da HubSpot

No editor de conteúdo e no gerenciador de design, certos módulos padrão estão disponíveis para uso na maioria dos tipos de conteúdo.

Usando os snippets do HubL, você também pode adicionar esses módulos padrão a modelos HTML. Saiba mais sobre como trabalhar com módulos padrão em modelos personalizados na documentação do desenvolvedor. 

Adicionar módulo para arrastar e soltar modelos

No gerenciador de design, você pode adicionar módulos padrão para arrastar e soltar modelos usando o editor de layout. 

• Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
• Na coluna esquerda, clique no nome do modelo. 
• Na coluna direita, clique em + Adicionar. 
• Informe o nome de um módulo padrão ou personalizado na barra de pesquisa. 
• Clique no nome do módulo e arraste-o para o modelo. 
• Na seção Opções de estilo, defina um estilo personalizado para o módulo. 

• Na seção Conteúdo padrão, personalize o conteúdo que será exibido quando o módulo for adicionado ao editor de conteúdo. 

• Na seção Opções do editor, ative a opção Impedir a edição nos editores de conteúdo para impedir que outros usuários editem o conteúdo padrão do módulo no editor de conteúdo. 

Personalizar módulos padrão

Todas as contas do Marketing Hub Professional e Enterprise e do Content Hub Professional e Enterprise têm uma pasta @hubspot no gerenciador de design.

Esta pasta contém todos os seus temas e módulos padrão, incluindo arrastar e soltar módulos de e-mail. Estes temas e módulos são somente leitura, mas podem ser clonados se você quiser editá-los. 

• Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
• No Finder, clique na pasta @hubspot.
• Clique com o botão direito do mouse em um módulo padrão e selecione Clonar módulo. 
  
  
• No módulo clonado, edite o código-fonte.
• No canto superior direito, clique em Publicar alterações.

Gerenciar versões do módulo

Periodicamente, o HubSpot pode lançar uma nova versão de um módulo padrão existente. Isso permite que o HubSpot faça atualizações significativas sem afetar o conteúdo existente. Por exemplo, uma nova versão de um módulo pode fornecer melhor organização de campo, opções de estilo e funcionalidade adicionada. Saiba mais sobre como o controle de versão de módulos funciona nos bastidores, confira a documentação do desenvolvedor do HubSpot.

Você pode gerenciar as versões do módulo a partir da Módulos de & Temas página de configurações, incluindo atualização de uma versão, reversão para uma versão anterior ou exibição das versões atuais de todos os módulos padrão.

Atualizar a versão de um módulo

Para optar por uma nova versão de um módulo:

• Na sua conta HubSpot, clique no ícone de configurações settings icon na barra de navegação superior.
• No menu da barra lateral esquerda, navegue até Conteúdo > Módulos de & Temas.
• Na guia Alertas, as atualizações mais recentes dos módulos padrão serão exibidas com uma marca Atualização disponível. Clique em Exibir atualização ao lado de um módulo para exibir mais detalhes sobre a atualização.
  
  
• Na barra lateral direita, revise as alterações. A barra lateral incluirá um resumo de alto nível da atualização, juntamente com uma divisão detalhada das alterações e dos ativos que serão afetados.
  
  
• Para atualizar o módulo, clique em Instalar atualização. Em seguida, na caixa de diálogo, clique em Confirmar atualização. Observe que pode levar até 10 minutos para que as páginas e os modelos reflitam o módulo atualizado.

Após atualizar o módulo, você será levado para a guia Módulos do Temas & Módulos página de configurações. Nesta página, você pode ver módulos atualizados recentemente, módulos com atualizações disponíveis e informações de versão para todos os módulos padrão da conta.

Reverter um módulo atualizado

Na guia Módulos da página de configurações, você pode reverter um módulo que foi atualizado nos últimos 30 dias para uma versão anterior, se necessário:

• Na sua conta HubSpot, clique no ícone de configurações settings icon na barra de navegação superior.
• No menu da barra lateral esquerda, navegue até Conteúdo > Temas & Módulos.
• Clique no botão Módulos, localize o módulo que deseja reverter e clique em Reverter atualização recente.
  
  
• Na barra lateral direita, revise o histórico de versões do módulo e clique em Reverter esta atualização.
  
  
• Examine as informações na barra lateral direita para confirmar se você deseja reverter a atualização e clique em Reverter. 
• Na caixa de diálogo, clique em Confirmar. 

Após reverter a atualização, pode levar algum tempo para que os modelos e páginas reflitam o módulo revertido. A qualquer momento, você pode atualizar o módulo novamente seguindo as etapas de atualização acima.

Tipos de módulos padrão

Cancelar assinatura de backup

O modelo de cancelamento de assinatura de backup é exibido para destinatários de e-mail que clicam em um link de cancelamento de assinatura se a HubSpot não conseguir determinar seu endereço de e-mail. Você pode personalizar o texto de ajuda que aparece na página reserva de cancelamento de assinatura 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 de 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 sua 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 de blog não está disponível para modelos de página ou de 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 de post e editar a marcação da sua página de 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 seus e-mails de resumo do blog preenchendo um formulário. Este módulo é preenchido pelo seu formulário de assinante do blog , que pode ser personalizado na sua ferramenta de formulários.

Clique no menu suspenso Selecione o blog para exibir e selecione o blog em que os visitantes estão se inscrevendo. Na caixa de texto Título para exibir acima do formulário, personalize o texto que aparecerá no título acima do formulário. Coloque o cursor sobre a resposta em linha existente e clique no ícone Expandir expand para personalizar o texto que aparece depois que um visitante envia o formulário.

Call to action

Um módulo de call to action (CTA) adiciona uma CTA a um módulo próprio dentro do layout. Você também pode inserir um CTA em um módulo de rich text.

No inspetor, clique no menu suspenso CTA  banner  e selecione uma CTA padrão para este módulo no seu modelo. Ou clique em + Criar nova CTA no mesmo menu para criar uma nova CTA como sua CTA padrão. 

Biblioteca de conteúdo

Você pode usar o módulo da biblioteca de conteúdo para configurar uma biblioteca de recursos para que os visitantes possam acessá-la. Para a biblioteca, você pode definir o layout, os ícones, as fontes e as cores do recurso. Para cada recurso, você pode definir um nome, descrição, link ou arquivo e imagem de exibição.

Você também pode definir o conteúdo como "em destaque" para que apareça na parte superior da biblioteca e ocupe uma linha inteira. 

Formulário

Observação: o módulo de formulário não está 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: 

1. Título do formulário: insira o título para seu formulário que será exibido na página ou blog.
2. Formulário: selecione um formulário existente do HubSpot para exibir na página ou adicione um novo formulário.
3. 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.
4. Mensagem de agradecimento: personalize sua mensagem de agradecimento integrada.
5. 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. 
6. Adicionar ao fluxo de trabalho: adicione os visitantes que enviam o formulário a um fluxo de trabalho (somente Marketing Hub Professional ou Enterprise).
7. Envie 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 mostra uma linha de texto em uma tag HTML heading. Insira o texto de cabeçalho padrão na caixa Conteúdo do cabeçalho. Clique no menu suspenso Tipo de cabeçalho para selecionar a tag de cabeçalho (H1-H4).

Imagem

Um módulo de imagem adiciona uma imagem ao conteúdo. Saiba mais sobre as opções de edição para módulos de imagem. 

Galeria de imagens

Um módulo de galeria de imagens adiciona uma série de imagens alternantes a um módulo. Saiba mais sobre o configurações personalizáveis do módulo de galeria de imagens. 

Botão de idiomas

Observação: o módulo de alteração de idioma 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, ao exibir a versão em inglês de uma página com tradução para o francês, se você clicar no botão de idioma, verá Inglês e Francês como opções de idioma.
• Híbrido: uma combinação dos dois. Por exemplo, ao exibir a versão em inglês de uma página com tradução para o francês, se você clicar no botão de idioma, verá Inglês e Francês (Français) como opções 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.

Logotipo

O Logotipo módulo extrai o logotipo da sua empresa automaticamente do seu 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 seu site, clique em Editar logotipo padrão nesse domínio.

Seu módulo de logotipo será vinculado automaticamente ao URL especificado em seu kit de marca. Para substituir este padrão e encaminhar para uma página diferente, insira um URL de link único.

Grid de logotipo

Com o módulo de grid de logotipo, você pode organizar vários logotipos de diferentes dimensões em um grid consistente. Você pode personalizar a cor de fundo, a proporção, o tamanho do grid, o tamanho do espaçamento e a altura máxima do logotipo. 

Corpo principal do e-mail

O módulo de corpo principal do e-mail é um módulo de rich text padrão que é incluído em todos os modelos de e-mail. Você pode personalizar o conteúdo padrão para o corpo do email 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 na bolha de cor e selecione uma cor no seletor de cores ou insira um 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. Os menus são criados e gerenciados diretamente no seu configurações do site. 

Nas ferramentas de design, você pode personalizar os seguintes recursos do módulo de menu:

1. Cardápio: selecione um de seus menus existentes em suas configurações.
2. 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 - Mostrar páginas em  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 - Mostrar páginas em  menu  relacionadas à  página  que está sendo exibido: mostra os itens de menu relacionados à página específica que está sendo exibida.
   • Menu de caminho estilo "Breadcrumb" (usa fluxo horizontal): exibe os itens do menu horizontalmente em um caminho relativo no topo do site.
3. Níveis máximos: selecione o número máximo de cardápio infantil itens que podem ser exibidos.
4. Orientação: selecione se os itens de menu são exibidos horizontal ou verticalmente.
5. Ativar submenus: marque esta caixa de seleção para mostrar os itens do menu secundário ao passar o mouse sobre o menu principal. Desmarque esta caixa de seleção para sempre mostrar os itens de menu secundários.

Módulos

Módulos criados no editor de código permitem que você use HTML, CSS, Javascript e HubL para adicionar funcionalidades avançadas aos seus modelos, ao mesmo tempo que permite que seus usuários editem o conteúdo do módulo no editor de conteúdo sem alterar o código. Estes componentes serão identificados com um ícone de módulo customModules no finder 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 tokens necessários que deve ser incluído em um modelo de e-mail para enviar e-mails de marketing legalmente. Embora você possa editar o estilo deste módulo, não será possível salvar um modelo de email sem um módulo de informações de localização de escritório ou o obrigatório  HubL  .  

Além das opções de estilo padrão, esse módulo pode ser personalizado com cores padrão, bordas e espaçamento. Clique na bolha de cor e selecione uma cor no seletor de cores ou insira um 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

O módulo de uma linha de texto permite aos usuários editar uma única linha de texto no editor de conteúdo. 

Rodapé da página

O módulo de rodapé da página apresenta informações de direitos autorais, incluindo o ano atual e o nome da sua empresa. O nome da empresa é obtido automaticamente do Rodapé seção do seu configurações de e-mail.

Solicitação de senha

O módulo de solicitação de senha está disponível no prompt de senha modelos de sistema. 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. 

Produto

Usando o módulo do produto, você pode exibir produtos da biblioteca de produtos em páginas e posts. As informações padrão dos produtos são exibidas, mas você pode optar por substituí-las em uma página por nível de página. 

Rich text

O módulo de rich text é o módulo de conteúdo mais comumente utilizado 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 em Visualizar conteúdo para abrir um editor de rich text.

Lista de RSS

Observação: o módulo de listagem RSS não está disponível para modelos de e-mail. Use um E-mail RSS em vez de. 

Você pode usar um módulo de listagem de RSS para exibir resumos de posts para um blog da HubSpot ou um feed RSS externo.

Os módulos de listagem de RSS podem mostrar um blog ou tag específica. Clique para ativar a opção correspondente para indicar se uma imagem em destaque, o nome do autor, o resumo ou a data de publicação devem ser mostrados em cada post.

Depois de ativar estas 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 seção

O módulo de cabeçalho de seção permite mostrar uma tag de cabeçalho h1 com um parágrafo de subtítulo. Este módulo é ideal para intitular 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 do módulo em nossa documentação do desenvolvedor.

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. Nos e-mails, o módulo usará o URL da versão web desse e-mail no link de compartilhamento.

Observação: o módulo de compartilhamento social utiliza ícones padrão para cada rede social. Se você quiser usar o seu próprio ícones sociais personalizados , você pode criar uma versão personalizada do módulo.

Seguir na rede social

Com um módulo para seguir nas redes sociais, você pode direcionar os visitantes para seguir sua empresa nas redes sociais. Para cada rede social, é possível definir um link ou endereço de e-mail personalizado. No gerenciador de design, você também pode definir ícones personalizados para cada rede social. 

Preferências da assinatura

Os módulos de preferências de assinatura estão disponíveis apenas nas preferências de assinatura modelos de sistema. 

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 na confirmação de atualização de assinatura modelos de sistema. 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 Exibir como página da web permite aos destinatários abrir a versão de página da web de um e-mail. 

Link do WhatsApp 

Observação: este módulo está disponível apenas para contas do Marketing Hube do Service Hub Professional e Enterprise.

Utilize o módulo de link do WhatsApp para adicionar uma forma de os visitantes do site entrarem em contato com você diretamente através do WhatsApp. Este módulo pode ser adicionado a páginas de site, posts de blog e páginas de listagem de blog. Para utilizar este módulo, é necessário conectar seu canal do WhatsApp à caixa de entrada de conversas.

O estilo do botão, como a cor e o espaçamento, pode ser personalizado na guia Estilos do editor de páginas, e você pode configurar os seguintes elementos:

• Número do WhatsApp: selecione um número do WhatsApp conectado.
• Texto de opt-in: selecione o texto de opt-in e opt-out. 
• Mostrar: selecione se o botão apresenta texto, um ícone ou ambos.
• Posição do ícone: selecione se o ícone aparece à esquerda ou à direita do texto.
• Texto do botão: insira o texto que aparece no botão.
• Título do ícone do WhatsApp: para acessibilidade, insira a descrição do ícone para leitores de tela.