CMS-General

Use os módulos padrão em seu modelo

Ultima atualização: November 26, 2018

Disponível para

Marketing Hub
marketing-basic-pro-enterprise
Professional, Enterprise
Basic

Esta é uma visão geral de todos os módulos padrão disponíveis para modelos de layout de arrastar e soltar. Cada tipo de módulo pode ser personalizado com opções de estilo e conteúdo no inspetor. Este guia examinará como adicionar módulos ao seu modelo e como cada um desses módulos padrão pode ser usado em seu conteúdo.

Adicione 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 a opção Impeça a edição em editores de conteúdo para ativar essa configuração.

Tipos de módulos padrão

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 em seu 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 seu site.
    • Dinâmico por seção - Mostra páginas no menu que estão relacionadas à seção que está sendo visualizada - 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 que está sendo visualizada - 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 do menu horizontalmente em um caminho relativo no topo do seu site.
  3. Níveis máximos - o número máximo de itens de menu secundários que podem ser exibidos.
  4. Orientação - atualiza a marcação HTML para exibir os itens em sua árvore de menu vertical ou horizontalmente no site.
  5. Ativar submenus - isso indica se você deseja exibir itens de menu secundários quando um visitante passar o mouse sobre um menu que os contenha.
Opções do menu avançado


Cancelar assinatura de backup

O modelo de cancelamento de assinatura de backup para destinatários de e-mail se não for possível 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.

Saiba mais sobre como criar modelos de sistema.

Cancelar assinatura de backup

Comentários do blog

O módulo de comentários do blog  adiciona uma seção de comentário aos seus modelos de publicação de blog individuais. Você pode personalizar o formulário de comentários do blog a partir da sua ferramenta de formulários (Contatos > 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.

Formulário de comentários do blog padrão

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.

blog-content-1.png

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 para especificar 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 para expandir o texto que aparece após um visitante enviar o formulário.

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

Assinatura de e-mail do blog

Call to action

Você pode inserir um botão de CTA em um módulo rich text ou usar um módulo call to action. Um módulo call to action é útil quando você quer que a CTA seja colocada em algum lugar em seu layout.

No inspetor, use o menu suspenso CTA menu suspenso para selecionar uma CTA específica para o módulo. Você também pode clicar em + Criar novo CTA para abrir o painel de CTA onde você pode criar uma nova CTA. 

Captura de tela do artigo de Ajuda da HubSpot


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 editar ou lixo ícone excluirpara fazer alterações.

follow-me-email-options

Clicar no ícone de lápis editar 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.

custom-icon

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: 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. (Requer uma assinatura do Marketing Professional ou Enterprise.)
  7. Enviar um e-mail de acompanhamento para visitantes que enviam o formulário.

form-module-2

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.

Captura de tela do artigo de Ajuda da HubSpot

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
  • A altura e largura da imagem

image-module

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 editar para adicionar uma legenda e imagem.
  2. Use o menu suspenso Modo de exibição para selecionar uma apresentação de slides padrão, uma navegação em miniatura ou uma galeria do Lightbox.
  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 Altura fixa se a galeria deve 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.
Captura de tela do artigo de Ajuda da HubSpot


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 fançais 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 (Fanç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.

Módulo do logotipo


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.

Corpo do e-mail


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.

Captura de tela do artigo de Ajuda da HubSpot


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.

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 lista de publicações é usado para exibir uma lista dos artigos mais recentes ou mais populares de um blog da HubSpot. 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
Lista de publicações


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.

Captura de tela do artigo de Ajuda da HubSpot


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.
Captura de tela do artigo de Ajuda da HubSpot


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.

Cabeçalho da sessão


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 estilo ao menu com navegação horizontal ou vertical.

Menu simples


Compartilhamento social

Você pode usar o módulo de compartilhamento social para permitir que os visitantes compartilhem facilmente seu conteúdo em canais de mídias sociais e por e-mail. Clique no botão da rede social correspondente para incluí-la no modelo. O link de compartilhamento será preenchido automaticamente com as tags HubL necessárias para compartilhar seu conteúdo.

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.

Preferências da assinatura


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.

Atualizações de assinatura


Exibir como página da web

O módulo de exibiçã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.

Captura de tela do artigo de Ajuda da HubSpot