Usar os módulos padrão em seu modelo

Esta é uma visão geral de todos os módulos padrão disponíveis para modelos de layout na ferramenta de gerenciador de design. Cada tipo de módulo pode ser personalizado com opções de estilo e conteúdo no inspetor. Após adicionar módulos ao seu modelo, aprenda como cada um desses módulos padrão pode ser usado no conteúdo.

Adicionar um módulo ao seu modelo

Para adicionar módulos aos modelos de arrastar e soltar, clique em + Adicionar no inspetor no lado direito do editor. Todos os módulos padrão e quaisquer módulos salvos ou grupos serão exibidos aqui. Use a barra de pesquisa para procurar um módulo específico. Você também pode usar o menu suspenso para filtrar componentes por tipo, categoria ou tags.

Os estilos de módulo, configurações e conteúdo podem ser modificados no inspetor quando o módulo estiver selecionado no editor. Clique em Expandir para adicionar mais estilo personalizado no editor de código.

Na parte inferior do inspetor, você tem a opção de bloquear o módulo para que o conteúdo não possa ser modificado em um blog, e-mail ou editor de páginas. Ative o botão Impedir a edição em editores de conteúdo para 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 no gerenciador 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. 
  
  
• O painel de edição à direita exibirá o código-fonte do módulo no qual você poderá editá-lo conforme necessário. 
• 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

Menu avançado Cancelar assinatura de backup Comentários do blog Conteúdo do blog Assinatura de e-mail do blog Call to action Coluna flexível Siga-me Siga-me - e-mail Formulário Cabeçalho

Espaçador horizontal Imagem Galeria de imagens Troca de idiomas Módulo do logotipo Corpo principal do e-mail Módulos Informações de localização do escritório Uma linha de texto Rodapé da página Solicitação de senha

Filtro da publicação Lista de publicações Rich text Lista de RSS Cabeçalho da sessão Menu simples Compartilhamento social Preferências da assinatura Confirmação de atualização da assinatura Visualizar como página da Web

Menu avançado

Você pode usar um módulo de menu avançado para adicionar navegação ao seu conteúdo e modelos. As árvores de Menu são criadas e gerenciadas diretamente nas configurações de conteúdo. 

No gerenciador de design, você pode personalizar os seguintes recursos de seus módulos de menu avançados:

1. Menu: selecione um dos menus avançados existentes nas suas configurações de conteúdo.
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: mantém seu menu consistente em todas as páginas na navegação do site.
   • Dinâmico por seção - Mostra páginas no menu que estão relacionadas à seção visualizados: exibe itens de menu relacionados ao item de menu de nível superior que está sendo visualizado. 
   • Dinâmico por página - mostra páginas no menu que estão relacionadas à página visualizados: exibe itens de menu relacionados à página específica que está sendo visualizada.
   • Menu de caminho de estilo "Breadcrumb" (usa fluxo horizontal): exibe os itens de menu horizontalmente em um caminho relativo no topo do site.
3. Níveis máximos: o número máximo de itens de menu secundários que podem ser exibidos.
4. Orientação: adiciona uma classe hs-menu-flow-horizontal  ou hs-menu-flow-vertical à caixa de menu. Essas classes podem ser usadas no CSS para estilizar os menus horizontais e verticais. Saiba mais sobre as classes adicionadas pelas configurações de módulo em nossa documentação para desenvolvedores.
5. Ativar submenus: adiciona uma classe flyouts ou no-flyouts à caixa de menu. Essas classes podem ser usadas no CSS para marcar menus com ou sem menus suspensos. Saiba mais sobre as classes adicionadas pelas configurações de módulo em nossa documentação para desenvolvedores.

Cancelar assinatura de backup

O modelo de cancelamento de assinatura de backup é renderizado para os destinatários de e-mail se o HubSpot não puder determinar o endereço de e-mail quando o destinatário tentar cancelar a assinatura. Este módulo permite personalizar o texto de ajuda que aparece nesta página na seção Conteúdo padrão.

Comentários do blog

O módulo de comentários do blog  adiciona uma seção de comentário aos seus modelos de post do blog individuais. 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. Este módulo está disponível apenas nos layouts de modelos de blog.

Conteúdo do blog

O módulo de conteúdo do blog contém a marcação HTML/HubL para suas publicações de blog e páginas de lista de blog. Você pode editar a marcação da publicação clicando em Editar modelo de publicação e editar a marcação da lista clicando em Editar modelo de lista.

Saiba mais sobre a marcação do módulo de conteúdo do blog. Sempre é possível reverter o módulo para seu código original alternando-o para um novo módulo de conteúdo de blog.

Assinatura de e-mail do blog

Você pode usar o módulo de assinatura de e-mail de blog para permitir que os visitantes assinem os e-mails do blog, preenchendo um formulário simples. Este módulo é preenchido pelo formulário de assinante de blog, que pode ser localizado e personalizado na ferramenta de formulários.

Use o menu suspenso Selecionar blog para exibir para escolher o blog que seus visitantes estão assinando. Você pode personalizar o texto que aparece no título acima do formulário usando a caixa de texto no inspetor. Passe o cursor do mouse sobre a resposta integrada existente e clique no ícone de expansão expand para personalizar o texto exibido depois que um visitante enviar o formulário.

Observação: o módulo de assinatura de e-mail do blog não é suportado em modelos de e-mail.

Call to action

Um módulo call-to-action (CTA) é útil quando você quer que a CTA seja colocada em algum lugar em seu layout. Você também pode inserir um CTA em um módulo de rich text.

No inspetor, use o CTA  e  para selecionar um CTA padrão para este módulo no modelo. Ou clique em + Criar novo CTA para abrir o painel de CTA e criar uma nova CTA. 

Coluna flexível

Quando uma coluna flexível é adicionada a um modelo de página da HubSpot, você pode adicionar, remover e reordenar os módulos no nível da página no editor de conteúdo. Este recurso permite aos designers criar menos modelos, dando flexibilidade aos profissionais de marketing para personalizar cada página conforme as suas necessidades. 

Observação: este módulo não está disponível em modelos de blog, página do sistema ou de e-mail.

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 escolher Tornar coluna flexível.

Observação: 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 no modelo não serão refletidas nessa página. Isso garante que o conteúdo personalizado não seja substituído.

Siga-me

Você pode usar o módulo Siga-me módulopara ajudar seus visitantes a entrar em contato com sua empresa nas mídias 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.

Você pode especificar quais redes de mídias sociais aparecem neste módulo na seção Siga-me nas suas configurações sociais (Na sua conta da HubSpot, navegue até Marketing > Social.).

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

O módulo de e-mail Siga-me oferece opções de formatação e configurações adicionais para modelos de e-mail. Em vez de espelhar suas configurações sociais, esse módulo pode ser personalizado com as páginas sociais que você deseja. Você também pode ajustar a forma do ícone social, o esquema de cores eo alinhamento no seu módulo. Você também pode adicionar uma conta social personalizada e carregar seu próprio ícone no editor, se sua marca estiver ativa em uma plataforma social que não esteja listada.

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 e clique no lápis ícone edit ou lixo ícone deletepara fazer alterações.

Clicar no ícone de lápis edit fornece opções para selecionar qual rede social aparece e para onde apontar. Se você escolher Ícone personalizado, você verá opções adicionais para especificar uma imagem personalizada para esta rede. Clique em Substituir para escolher uma imagem do gerenciador de arquivos ou carregar uma nova imagem do seu computador.

Depois que você tiver feito suas seleções, use a navegação estilo "Breadcrumb" na parte superior do inspetor para voltar ao resto das opções do módulo.

Formulário

O módulo de formulário permite que os usuários selecionem um formulário para adicionar a uma página. É usado para capturar informações de contato dos visitantes do site. Ele está disponível como um módulo que pode ser adicionado ao conteúdo e modelos criados com landing pages, páginas de site e páginas de blog. 

Observação: os formulários não podem ser adicionados aos modelos de e-mail.

O módulo de formulário permite:

1. Dar um título ao seu formulário na página.
2. Escolher qual formulário da HubSpot aparecerá na página ou adicionar um novo formulário.
3. Escolher se deve redirecionar uma pessoa que envia o formulário para outra página ou exibir uma mensagem de agradecimento integrada na mesma página.
4. Personalizar a mensagem de agradecimento integrada aosvisitantes,se necessário.
5. Enviar e-mails de notificação de formulário para um endereço específico.
6. Adicionar visitantes que enviam o formulário a um fluxo de trabalho (somente Marketing Hub Professional ou Enterprise).
7. Enviar um e-mail de acompanhamento para visitantes que enviam o formulário.

Cabeçalho

Você pode usar um módulo de cabeçalho para exibir uma linha de texto em uma tag HTML de cabeçalho. Você pode personalizar o texto no conteúdo do cabeçalho e usar o menu suspenso para escolher qual tag de cabeçalho (H1-H4) será renderizada.

Espaçador horizontal

Você pode adicionar um módulo de espaçador de horizontal aos seus modelos para adicionar espaços em branco que personalizam o layout dos módulos de conteúdo. Este módulo cria uma tag div vazia que pode ser usada para adicionar espaçamento entre elementos em uma página.

Imagem

Módulos de imagem permitem adicionar qualquerimagem a uma página ou e-mail em um local específico. Você pode selecionar imagens já carregadas no gerenciador de arquivos ou fazer upload de uma nova imagem, adicionando conteúdo padrão ou trabalhando no editor de conteúdo. Isso é útil se você estiver formatando ou adicionando estilos a uma imagem de uma maneira específica para o seu modelo e quiser trocar a imagem sem alterar essa formatação.

Você também pode personalizar:

• A URL à qual as pessoas serão levadas quando elas clicarem na imagem
• 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.

Galeria de imagens

O módulo da galeria de imagem pode adicionar rapidamente um elemento visual dinâmico a uma página da HubSpot. No inspetor, você pode personalizar as seguintes opções:

1. Clique em + Adicionar na seção  Slide 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 edit para adicionar uma legenda e imagem.
2. Use o menu suspenso Modo de exibição para selecionar uma apresentação de slides, uma navegação em miniatura ou uma galeria do Lightbox padrão.
3. Ative o botão Apresentar slides em loop para repetir os slides do começo após serem visualizados.
4. Ative o botão Avanço automático se quiser que os slides mudem automaticamente.
5. Se você selecionar essa opção, use as teclas de seta para especificar o número de segundos entre o slide.
6. Ative o botão Mostrar botões de navegação para indicar se deseja que os visitantes cliquem por conta própria nas imagens.
7. Use o menu suspenso de Altura variável para escolher a Altura fixa se a galeria precisar manter seu tamanho durante a rolagem pelas imagens. Escolha a Altura variável se quiser que a galeria dimensione com base no tamanho da imagem.
8. Personalize a transição entre slides usando o menu suspenso para selecionar Slide ou Desvanecer.
9. Se suas imagens tiverem legendas, você poderá selecionar Sempre manter legendas abaixo da imagem ou Sobrepor legendas sobre as imagens.

Troca de idiomas

O módulo de troca de idioma permitirá aos visitantes das suas landing pages e páginas de site alternar entre versões traduzidas da página. Você pode personalizar como os nomes de seus idiomas traduzidos serão exibidos nesse módulo.

• Pagelang - significa que os nomes dos idiomas serão exibidos 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. 
• Localizados - significa que 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 das duas. 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.

Se esse módulo estiver incluído em, seu modelo de página aparecerá apenas na página ativa se mais de uma tradução tiver sido publicada para essa página. Saiba mais sobre como trabalhar com conteúdo multilíngue no HubSpot.

Módulo do logotipo

O módulo do Logotipo extrai o logotipo da sua empresa automaticamente de suas configurações de conteúdo. Se desejar alterar esse logotipo, você pode ativar a opção Substituir o logotipo padrão para carregar uma nova imagem apenas para esta página. Você também pode clicar em Editar nas configurações de conteúdo para atualizar o logotipo da sua empresa para todo o conteúdo.

O módulo de logotipo será automaticamente vinculado ao domínio da empresa, mas você poderá inserir um URL de link exclusivo para substituir este padrão.

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. Ele especifica a área principal de rich text para seus profissionais de marketing usarem para criar rascunhos de e-mails. 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. Use o balão de cores para escolher uma cor do seletor de cores ou insira o valor hexadecimal no campo de texto. Você também pode usar os campos de texto para especificar uma largura em pixels para a borda do módulo, o espaçamento interno e o espaçamento externo.

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 profissionais de marketing editem o conteúdo do módulo no editor sem tocar no código. Esses componentes serão rotulados com o ícone de módulo  customModules no localizador e no inspetor. Você pode saber mais sobre como trabalhar com módulos codificados personalizados no Forum do designer.

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

Este módulo inclui tokens obrigatórios que devem ser incluídos em cada modelo de e-mail para enviar um e-mail comercial legalmente. Embora você possa editar o formato dessa seção, 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  HubL obrigatórias.  

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 para escolher uma cor no seletor de cores ou insira o valor hexadecimal no campo de texto. Você também pode usar os campos de texto para especificar uma largura em pixels para a borda do módulo, o espaçamento interno e o espaçamento externo.

Uma linha de texto

A linha do módulo de texto permite que os criadores de conteúdo editem uma única linha de texto em suas páginas ou e-mails. Este módulo é útil para criar campos de texto simples, nos quais o usuário final não precisa tomar nenhuma decisão de formatação.

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. Não há campos de conteúdo editáveis para este módulo no gerenciador de design, pois o nome da empresa é extraído automaticamente da seção de Rodapé nas suas configurações de e-mail.

Solicitação de senha

Módulos de solicitação de senha estão disponíveis 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 foi inserida incorretamente.

Filtro da publicação

O módulo de filtro de publicação é usado para exibir uma lista de artigos do blog de um tópico específico, mês ou autor. Este módulo não está disponível nos modelos de e-mail.

Você pode personalizar as seguintes configurações nos padrões do módulo:

• O blog para o qual deseja exibir valores de filtro
• Lista de valores para filtrar links (tópicos, mês ou autor)
• Como solicitar os valores (contagem de publicações ou nome)
• Título da lista a exibir
• O número máximo de publicações de blog a listar
• Link de texto a exibir se houver mais valores de publicações que o permitido para exibir

Lista de publicações

O módulo de listagem de posts é usado para exibir uma lista dos artigos mais populares de um blog da HubSpot. A ordem das publicações do blog que você verá exibidas neste módulo são aquelas com mais visualizações, da maior para a menor. Este módulo não está disponível nos modelos de e-mail. 

Você pode personalizar os seguintes padrões de conteúdo no inspetor:

• O blog para o qual deseja exibir títulos de publicação
• Liste as publicações de blog mais recentes ou mais populares durante um determinado período
• Título da lista a exibir
• O número máximo de publicações de blog a listar

Rich text

O módulo rich text é o módulo de conteúdo mais comum usado nas várias ferramentas de conteúdo da HubSpot. Ele oferece mais opções de edição para seu conteúdo, como formatação de texto, imagens, links, CTAs e muito mais. As contas do Marketing Hub Professional e Enterprise podem usar módulos rich text para adicionar conteúdo inteligente a uma página.

Você pode usar esse módulo para criar áreas de conteúdo editáveis para seus profissionais de marketing. Se quiser adicionar conteúdo padrão a este módulo, clique em Expandir ou clique em qualquer lugar na prévia do conteúdo para abrir um editor rich text.

Lista de RSS

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. Este módulo não está disponível em modelos de e-mail (use um e-mail de RSS em vez disso).

Módulos de lista de RSS podem ser personalizados para filtrar um blog específico e até mesmo 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 que deseja usar acima do nome de cada 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 resumo do texto clickthrough será rotulado como Leia mais.
• Mostrar data de publicação - escolha 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

Você pode usar o módulo de cabeçalho da seção para exibir uma tag 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 no botão de rede social correspondente para incluir as redes selecionadas na 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

Esse é um módulo rich text que está disponível em modelos de confirmação de atualização de assinatura que permitem personalizar o que é exibido quando um destinatário de 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. Diferentes clientes de e-mail podem renderizar e-mails HTML de maneira diferente, portanto, incluir essa opção em um modelo de e-mail garante que seus usuários sempre visualizem o e-mail como pretendido, abrindo a versão do navegador.