Módulos predefinidos da HubSpot

Neste artigo, saiba mais sobre os módulos padrão que o HubSpot fornece para uso em seus modelos e páginas. Cada tipo de módulo pode ser personalizado com opções de estilo e de conteúdo no inspetor . Também pode adicionar um módulo predefinido a um modelo HTML com o seu snippet HubL. Saiba mais sobre o desenvolvimento com módulos padrão em Documentação do desenvolvedor da HubSpot.

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 Marketing Hub Professional e Enterprise e CMS Hub Professional e Enterprise têm uma pasta @hubspot nas ferramentas de design por predefinição. Esta pasta contém todos os seus temas e módulos predefinidos, incluindo módulos de correio eletrónico de arrastar e largar. Estes temas e módulos são apenas de leitura, mas podem ser clonados se os quiser editar. 

• Na sua conta da HubSpot, navegue até Marketing > Arquivos e Modelos > Ferramentas de design.
• No Finder, clique na pasta @hubspot.
• Clique com o botão direito do rato no módulo predefinido que pretende clonar e, em seguida, seleccione 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 subscrição de backup é exibido aos destinatários de e-mail que clicam num link de cancelamento de subscrição se o HubSpot não conseguir determinar o seu endereço de e-mail. Pode personalizar o texto de ajuda que aparece na página de cancelamento de subscrição de backup na secção Default Content deste módulo. 

Comentários do blog

Nota:: o módulo de comentários do blogue não está disponível para modelos de página ou de correio eletrónico. 

O módulo de comentários do blogue adiciona uma secção de comentários a um modelo de publicação de blogue. Pode personalizar o formulário de comentários do blogue na sua ferramenta de formulários. O nome do formulário será baseado no título do seu blog. 

Conteúdo do blog

Nota:: o módulo de conteúdo do blogue não está disponível para modelos de página ou de correio eletrónico. 

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. Pode editar a marcação das suas mensagens clicando em Editar modelo de mensagem e editar a marcação da sua página de listagem clicando em Editar modelo de listagem. Saiba mais sobre marcação do módulo de conteúdo do blogue.

Assinatura de e-mail do blog

Nota:: o módulo de subscrição de correio eletrónico do blogue não está disponível para modelos de correio eletrónico. 

O módulo de subscrição de correio eletrónico do blogue permite que os visitantes subscrevam as mensagens de correio eletrónico de resumo do seu blogue preenchendo um formulário. Este módulo é preenchido pelo seu formulário de subscrição do blogue , que pode ser personalizado na sua ferramenta de formulários.

Clique no menu pendente Select blog to display e seleccione o blogue que os seus visitantes estão a subscrever. 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 de expansão expand para personalizar o texto que aparece depois de um visitante submeter o formulário.

Call to action

Um módulo de chamada para ação (CTA) coloca uma CTA no seu próprio módulo dentro do esquema. Também é possível inserir uma CTA num módulo de rich text .

No inspetor, clique no menu suspenso CTA  banner  menu e selecionar um CTA predefinido para este módulo no seu modelo. Ou clique em + Criar nova CTA no mesmo menu para criar uma nova CTA como a sua CTA predefinida. 

Siga-me

Nota: o módulo Siga-me não está disponível para modelos de correio eletrónico. 

Pode utilizar a opção Siga-me  módulo  para ajudar os seus visitantes a entrar em contacto com a sua empresa nas redes sociais. Ao contrário de um módulo de compartilhamento social, os módulos Siga-me direcionam os usuários do site para suas respectivas páginas de mídias sociais.

Quando você adiciona um módulo Siga-me, pode personalizar o cabeçalho do módulo que aparece acima dos ícones sociais.

Pode especificar quais as redes de redes sociais que aparecem neste módulo na secção Follow Me das suas definições sociais .

Nota: o módulo Siga-me utiliza ícones predefinidos para cada rede social. Se pretender utilizar os seus próprios ícones sociais personalizados  , pode criar uma versão personalizada do módulo. 

Formulário

Nota:: o módulo de formulário não está disponível para modelos de correio eletrónico. 

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. Enviar um e-mail de acompanhamento: enviar até três e-mails de acompanhamento para os visitantes que submeterem o formulário.

Título

Um módulo de cabeçalho apresenta uma linha de texto numa etiqueta HTML heading. Introduzir texto de cabeçalho predefinido na caixa Conteúdo do cabeçalho. Clique no menu pendente Tipo de cabeçalho para selecionar a etiqueta de título (H1-H4).

Imagem

Um módulo de imagem adiciona uma única imagem a um conteúdo. Saiba mais sobre 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 rotativas a um único módulo. Saiba mais sobre as definições personalizáveis do módulo da galeria de imagens. 

Botão de idiomas

Nota:: o módulo de comutação de línguas não está disponível para modelos de correio eletrónico. 

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 estiver a visualizar a versão inglesa de uma página com uma tradução francesa, quando clicar no alternador de idiomas, verá Inglês e Francês como nomes de idiomas.
• Híbrido: uma combinação dos dois. Por exemplo, se estiver a ver a versão inglesa de uma página com uma tradução francesa, quando clicar no alternador de idiomas, verá Inglês e Francês (Français) como nomes de idiomas.

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.

Logótipo

O módulo Logo obtém automaticamente o logótipo da sua empresa a partir das definições do seu sítio Web . 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 logótipo predefinido para todos os conteúdos nas definições do seu sítio Web, clique em Editar logótipo predefinido neste domínio.

O módulo do seu logótipo ligar-se-á automaticamente ao domínio da sua empresa. Para substituir esta predefinição e ligar a uma página diferente, introduza um URL de ligação único. 

Grelha do logótipo

Com o módulo de grelha de logótipos, pode organizar vários logótipos de diferentes dimensões numa grelha consistente. Pode personalizar a cor de fundo, o rácio de aspeto, o tamanho da grelha, o tamanho do espaçamento e a altura máxima do logótipo. 

Corpo principal do correio eletrónico

O módulo principal do corpo do correio eletrónico é um módulo de rich text padrão que é incluído por defeito em todos os modelos de correio eletrónico. É possível personalizar o conteúdo predefinido do  para o corpo do e-mail num 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 seleccione uma cor no seletor de cores ou introduza um valor hexadecimal em no campo de texto para definir cores predefinidas. 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 geridos diretamente nas definições do sítio Web . 

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

1. Menu: seleccione um dos seus menus existentes a partir das suas definiçõ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âmica por secçã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á a ser visualizado: apresenta itens de menu relacionados com a página específica que está a ser visualizada.
   • 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: selecionar o número máximo de itens do menu filho que podem ser apresentados.
4. Orientação: selecione se os itens de menu são exibidos horizontal ou verticalmente.
5. Ativar flyouts: seleccione esta caixa de verificação para mostrar os itens do menu secundário quando passa o rato sobre o menu principal. Desmarque esta caixa de verificação para mostrar sempre os itens de menu secundários.

Módulos

Os módulos criados no editor de código permitem-lhe utilizar HTML, CSS, Javascript e HubL para adicionar funcionalidades avançadas aos seus modelos, permitindo ainda que os seus utilizadores 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 do módulo customModules no localizador e no inspetor. Saiba mais sobre como trabalhar com módulos codificados personalizados na nossa documentação para programadores .

Informações de localização do escritório

O módulo de localização do escritório inclui tokens necessários que devem ser incluídos num modelo de correio eletrónico para enviar legalmente mensagens de marketing. Embora seja possível editar o estilo deste módulo, não será possível guardar um modelo de correio eletrónico sem um módulo de informações sobre a localização do escritório ou o necessário  HubL  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 na bolha de cor e seleccione uma cor no seletor de cores ou introduza um valor hexadecimal em no campo de texto para definir cores predefinidas. 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 utilizadores editar uma única linha de texto no editor de conteúdos. 

Rodapé da página

O módulo de rodapé da página apresenta informações de direitos de autor com o ano atual e o nome da sua empresa. O nome da empresa é retirado automaticamente da secção Footer das suas definições de correio eletrónico .

Solicitação de senha

O módulo de solicitação de palavra-passe está disponível na solicitação de palavra-passe 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

Nota: o módulo de subscrição de correio eletrónico do blogue não está disponível para modelos de correio eletrónico. 

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

Nota: o módulo de subscrição de correio eletrónico do blogue não está disponível para modelos de correio eletrónico. 

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 de rich text é o módulo de conteúdo mais comum utilizado nas ferramentas de conteúdo da HubSpot. Suporta opções de edição para diferentes componentes, como texto, imagens e CTAs.

Para adicionar conteúdo predefinido a este módulo, clique em Expandir ou clique no conteúdo de pré-visualização para abrir um editor de rich text.

Lista de RSS

Nota: o módulo de listagem RSS não está disponível para modelos de correio eletrónico. Em vez disso, utilize um e-mail RSS. 

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

Os módulos de listagem de RSS podem apresentar um blogue ou uma etiqueta específicos. Clique para ativar o interrutor correspondente para indicar se uma imagem em destaque, o nome do autor, o resumo ou a data de publicação devem ser apresentados com cada publicação.

Depois de ativar estas definições, 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.

Título da secção

O módulo de cabeçalho de secção permite-lhe apresentar uma etiqueta de título h1 com um subtítulo de parágrafo. Este módulo é ideal para intitular a secçã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, ligações 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. Nas mensagens de correio eletrónico, o módulo utilizará o URL da versão Web dessa mensagem de correio eletrónico na ligação de partilha.

Nota: o módulo de partilha social utiliza ícones predefinidos para cada rede social. Se pretender utilizar os seus próprios ícones sociais personalizados  , pode criar uma versão personalizada do módulo.

Preferências da assinatura

Os módulos de preferências de subscrição só estão disponíveis nas preferências de subscrição 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 da subscrição é um módulo de rich text que está disponível nos modelos de sistema de confirmação de atualização da subscrição. 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 visualizar como página Web dá aos destinatários de correio eletrónico a opção de abrir a versão da página Web de um correio eletrónico. 

Ligação WhatsApp 

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

Utilize o módulo de ligação WhatsApp para adicionar uma forma de os visitantes do sítio Web se ligarem a si diretamente através do WhatsApp. Este módulo pode ser adicionado a páginas de sítios Web, publicações de blogues e páginas de listagem de blogues. Para utilizar este módulo, é necessário ligar o seu canal WhatsApp à sua caixa de entrada de conversas.

O estilo do botão, como a cor e o espaçamento, pode ser personalizado no separador Styles do editor de páginas, e pode configurar os seguintes elementos:

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