Essa é uma visão geral de todos os módulos padrão disponíveis para os 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.
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:
- Menu: selecione um dos menus avançados existentes nas suas configurações de conteúdo.
- 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.
- Estático - sempre mostra páginas de nível superior no
- Níveis máximos: o número máximo de itens de menu secundários que podem ser exibidos.
- Orientação: atualiza a marcação HTML para exibir os itens em sua árvore de menu vertical ou horizontalmente no site.
- Ativar submenus: isso indica se você deseja exibir quando um visitante passar o cursor do mouse sobre um menu que contenha itens de menu secundários.
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 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
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
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
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
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
Clicar no ícone de lápis 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:
- Dar um título ao seu formulário na página.
- Escolher qual formulário da HubSpot aparecerá na página ou adicionar um novo formulário.
- 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.
- Personalizar a mensagem de agradecimento integrada aos
visitantes, se necessário. - Enviar e-mails de notificação de formulário para um endereço específico.
- Adicionar visitantes que enviam o formulário a um fluxo de trabalho (somente Marketing Hub Professional ou Enterprise).
- 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
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
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:
- 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 para adicionar uma legenda e imagem.
- 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.
- Ative o botão Apresentar slides em loop para repetir os slides do começo após serem visualizados.
- Ative o botão Avanço automático se quiser que os slides mudem automaticamente.
- Se você selecionar essa opção, use as teclas de seta para especificar o número de segundos entre o slide.
- Ative o botão Mostrar botões de navegação para indicar se deseja que os visitantes cliquem por conta própria nas imagens.
- 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.
- Personalize a transição entre slides usando o menu suspenso para selecionar Slide ou Desvanecer.
- 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
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 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
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 dos posts do blog que você verá exibidas neste módulo são aqueles com mais visualizações, do maior para o 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 estilo ao menu com navegação horizontal ou vertical.
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.
