Usar módulos padrão no editor de layout

A HubSpot fornece módulos padrão para criar modelos de arrastar e soltar no editor de layout dentro do Gerenciador de design. Você pode adicionar módulos padrão e clonar módulos padrão para uso nos modelos de arrastar e soltar. Além disso, você pode editar o conteúdo padrão de alguns módulos padrão. 

Antes de começar

Antes de começar a trabalhar com esse recurso, certifique-se de compreender totalmente quais etapas devem ser executadas com antecedência, bem como as limitações do recurso e as possíveis consequências de usá-lo. 

Requisitos de marca

• Os usuários devem ser Superadministradores ou ter permissões para as Ferramentas de design para acessar e editar módulos. 

Compreender limitações e considerações

• Este artigo explica como usar o inspetor no editor de layout dentro do Gerenciador de design para adicionar e clonar módulos padrão. Você também pode editar o conteúdo padrão de alguns módulos padrão.
• Para adicionar módulos padrão usando HubL a modelos HTML ou modelos personalizados, saiba mais na documentação do desenvolvedor.
• Para adicionar e editar módulos no editor de conteúdo, saiba mais sobre como adicionar e editar módulos no editor de conteúdo.
• As contas do Marketing Hub e Content Hub Professional e Enterprise incluem a pasta @hubspot no Gerenciador de design por padrão.
• Alguns módulos padrão somente podem ser adicionados a tipos de modelo específicos. Por exemplo, o módulo de formulário não está disponível para modelos de e-mail.
• Os módulos padrão devem ser clonados para que o código-fonte do módulo possa ser personalizado.

Adicionar módulos para arrastar e soltar modelos

Você pode adicionar módulos padrão aos modelos de arrastar e soltar usando o editor de layout, no Gerenciador de design.

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

7. No inspetor da seção Conteúdo padrão, edite o conteúdo que aparecerá quando o módulo for adicionado ao editor de conteúdo. Saiba mais sobre como editar conteúdo padrão para módulos.

8. Para impedir que outros usuários editem o conteúdo padrão de um módulo, clique para ativar a opção Impeça a edição em editores de conteúdo na seção Opções do editor.

Clonar módulos padrão

Você pode clonar módulos padrão na pasta @hubspot no Gerenciador de design para editar o código-fonte do módulo. Esta pasta tem todos os seus temas e módulos padrão, incluindo módulos de e-mail de arrastar e soltar. 

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No Finder, clique na pasta @hubspot.

3. Clique com o botão direito em um módulo padrão e selecione Clonar módulo. 
4. No módulo clonado, edite o código-fonte do módulo. Saiba mais sobre como configurar um módulo.
5. No canto superior direito, clique em Publicar alterações.

Gerenciar versões do módulo

Periodicamente, a HubSpot pode lançar uma nova versão de um módulo padrão existente. Isso permite que o HubSpot implemente atualizações significativas sem prejudicar o conteúdo existente. Por exemplo, uma nova versão de um módulo pode fornecer maior organização de campos, mais opções de estilo e funcionalidade aprimorada. Saiba mais sobre o controle de versão do módulo na documentação do desenvolvedor da HubSpot.

Você pode gerenciar as versões do módulo na página de configurações de Módulos e temas da conta, 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 atualizar para uma nova versão de um módulo:

1. 1. Na sua conta HubSpot, clique no ícone de configurações settings icon na barra de navegação superior.
   2. No menu da barra lateral esquerda, acesse Conteúdo > Temas e módulos.
   3. Na guia Alertas, as atualizações mais recentes para os módulos padrão serão exibidas com uma tag Atualização disponível. Clique em Exibir atualização ao lado de um módulo para ver mais detalhes sobre a atualização.

1. 4. Na barra lateral direita, revise as alterações. A barra lateral terá 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.

1. 5. Para atualizar o módulo, clique em Instalar atualização. Em seguida, na caixa de diálogo, clique em Confirmar atualização.

Observação: pode levar até 10 minutos para que páginas e modelos exibam o módulo atualizado.

• Depois de atualizar o módulo, você será levado para a guia Módulos da página de configurações de Temas e módulos. 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. 

• Para reverter um módulo atualizado recentemente:
  1. Na sua conta HubSpot, clique no ícone de configurações settings icon na barra de navegação superior.
  2. No menu da barra lateral esquerda, acesse Conteúdo > Temas e módulos.
  3. Clique na guia Módulos, localize o módulo que deseja reverter e clique em Reverter atualização recente.

• 4. Na barra lateral direita, revise o histórico de versões do módulo e clique em Reverter esta atualização.

• 5. Examine as informações na barra lateral direita para confirmar que você deseja reverter a atualização e clique em Reverter. 
  6. Na caixa de diálogo, clique em Confirmar. 
• Depois de reverter o módulo, pode levar algum tempo para que os modelos e páginas mostrem o módulo revertido. Você pode atualizar o módulo novamente atualizando a versão de um módulo.

Editar o conteúdo padrão para diferentes tipos de módulos

Você pode editar o conteúdo padrão de alguns módulos padrão em modelos de arrastar e soltar no editor de layout do Gerenciador de design. Para ver uma lista completa dos módulos padrão, saiba mais sobre módulos de e-mail padrão e módulos da web padrão.

Cancelamento de assinatura de backup

O módulo de cancelamento de assinatura de backup é mostrado aos destinatários de e-mail que clicam em um link para cancelar a assinatura e a HubSpot não consegue confirmar seu endereço de e-mail. Este módulo somente pode ser editado a partir de um modelo de sistema de cancelamento de assinatura de e-mail de backup. 

• Para editar o conteúdo padrão do módulo de cancelamento de assinatura de backup:
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo Cancelamento de assinatura de backup.
  4. No inspetor da seção Conteúdo padrão, insira o texto que aparece para Título, Subtítulo e Mensagem de erro.

• Quando terminar de editar o módulo, clique em Publicar alterações.

Assinatura de e-mail do blog

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 assinatura de blog, que pode ser personalizado na ferramenta de formulários.

Observação: o módulo de assinatura de e-mail do blog não está disponível para modelos de e-mail. 

• Para editar o conteúdo padrão do módulo de assinatura de e-mail do blog:
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo Assinatura de e-mail do blog ou adicione o módulo.
  4. No inspetor da seção Conteúdo padrão, clique no menu suspenso Selecionar blog para exibir e selecione o blog no qual seus visitantes estão se inscrevendo.
  5. Clique no menu suspenso Nível de título para selecionar um nível de título.
  6. No campo Título para exibir acima do formulário, insira o texto que aparecerá no título acima do formulário.
  7. No campo Resposta integrada para usuários, clique no expandIcon ícone expandir para personalizar o texto que aparece depois que um visitante envia o formulário.

• Quando terminar de editar o módulo de assinatura de e-mail do blog, clique em Publicar alterações no canto superior direito.

Call to action

Um módulo de call to action (CTA) coloca uma CTA em seu próprio módulo dentro do layout. Também é possível inserir uma CTA em um módulo de rich text .

• Para editar o conteúdo padrão de um módulo de call to action:

• 1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo Call to action ou adicione o módulo.
  4. No inspetor da seção Conteúdo padrão, clique em Selecionar.

• 5. No painel do lado direito, selecione uma CTA ou clique em Criar novo.
  6. Clique em Inserir.

Biblioteca de conteúdos

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 editar o conteúdo padrão do módulo da biblioteca de conteúdo:
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo Biblioteca de conteúdo ou adicione o módulo.
  4. Para editar um recurso existente na biblioteca de conteúdo, clique no editIc onícone editar no inspetor. Você pode personalizar o nome, a descrição, o texto do link e a imagem.
  5. Para excluir um recurso do módulo da biblioteca de conteúdo, clique no deleteIcon ícone excluir no inspetor.
  6. Para adicionar um recurso personalizado ao módulo da biblioteca de conteúdo, clique em + Adicionar no inspetor.
  7. Para definir um recurso como em destaque, clique no favoriteIcon ícone Definir como em destaque no inspetor.

• Quando terminar de editar o módulo da biblioteca de conteúdo, clique em Publicar alterações no canto superior direito.

Formulário

Você pode usar o módulo de formulário para adicionar um formulário ao conteúdo para capturar informações do visitante.

Observação: o módulo de formulário não está disponível para modelos de e-mail. 

• Para editar o conteúdo padrão do módulo de formulário:
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo Formulário ou adicione o módulo.
  4. No inspetor da seção Conteúdo padrão, insira o texto para o campo Título do formulário.
  5. No menu suspenso Formulário, selecione um formulário.
  6. No campo O que um visitante verá depois de enviar o formulário?, selecione Redirecionar para outra página ou Exibir uma mensagem de agradecimento integrada. 
     • Para redirecionar para outra página, no menu suspenso Link de redirecionamento, selecione uma página, post ou clique em + Adicionar link externo. 
     • Para exibir uma mensagem de agradecimento integrada, no campo de mensagem de agradecimento, clique no expandícone Expandir.
  7. Marque a caixa de seleção Enviar notificações de formulário para os endereços de e-mail especificados em vez do padrão de formulário, para substituir os destinatários de notificação definidos na ferramenta de formulários.
• Quando terminar de editar o módulo de formulário, clique em Publicar alterações no canto superior direito.

Cabeçalho

Você pode usar o módulo de cabeçalho para exibir uma linha de texto em uma tag HTML de cabeçalho.

• Para editar o conteúdo padrão do módulo de cabeçalho:
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo Título ou adicione o módulo.
  4. No inspetor da seção Conteúdo padrão, insira o texto no campo Conteúdo do título. 
  5. Clique no menu suspenso Nível de título e selecione um nível de título (H1-H4).

• Quando terminar de editar o módulo de cabeçalho, clique em Publicar alterações no canto superior direito.

Imagem

Você pode usar o módulo de imagem para exibir uma única imagem em seu conteúdo.

• Para editar o conteúdo padrão do módulo de imagem:
  
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo Imagem ou adicione o módulo.
  4. No inspetor da seção Conteúdo padrão, clique em Substituir no campo Imagem.
  5. No painel do lado direito, selecione a imagem que deseja exibir. 
  6. No campo Texto alternativo, digite uma descrição de texto para a imagem.
  7. No menu suspenso Tamanho, selecione Ajustar automaticamente ou Largura e altura exatas.
  8. No menu suspenso Tamanho máximo, selecione Tamanho original da imagem ou Personalizado.
  9. No menu suspenso Carregamento de imagens, selecione Padrão do navegador, Lento ou Rápido.
  10. No campo Link (opcional), digite um URL opcional para o qual direcionar os visitantes quando a imagem for clicada.

• Quando terminar de editar o módulo de imagem, clique em Publicar alterações no canto superior direito.

Grade de imagem

Você pode usar o módulo de grade de imagem para adicionar uma grade uniforme de imagens ao conteúdo. 

• Para editar o conteúdo padrão do módulo de grade de imagem:
  
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo Grade de imagens ou adicione o módulo.
  4. Para editar uma imagem existente no módulo de grade de imagem, clique no editIc onícone editar no inspetor. Você pode carregar ou procurar imagens existentes e editar o texto do link, o URL do link ou a mensagem exibida ao passar o mouse.
  5. Para excluir uma imagem no módulo de grade de imagem, clique no deleteIcon ícone excluir no inspetor.
  6. Para adicionar uma nova imagem ao módulo de grade de imagem, clique em + Adicionar no inspetor.
  7. Clique para expandir as Configurações. No painel de configurações, você pode ajustar a Funcionalidade de passar o mouse, a Funcionalidade de clique, as Colunas e a Proporção. 

• Quando terminar de editar o módulo de grade de imagem, clique em Publicar alterações no canto superior direito.

Controle deslizante de imagem

Você pode usar o módulo de controle deslizante de imagem para exibir várias imagens que se alternam automaticamente no mesmo módulo. 

• Para editar o conteúdo padrão do módulo de controle deslizante de imagem:
  
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo Controle deslizante de imagens ou adicione o módulo.
  4. Para editar uma imagem existente no módulo de controle deslizante de imagem, clique no editIc onícone editar no inspetor. Você pode carregar ou procurar imagens existentes e editar a legenda ou o URL do link.
  5. Para excluir uma imagem do módulo do controle deslizante de imagem, clique no deleteIcon ícone excluir no inspetor.
  6. Para adicionar uma nova imagem ao módulo de controle deslizante de imagem, clique em + Adicionar no inspetor.
  7. Clique para expandir as Configurações. No painel de configurações, você pode ajustar os Slides, o Movimento e a Navegação. 

• Quando terminar de editar o módulo de controle deslizante de imagem, clique em Publicar alterações no canto superior direito.

Botão de idiomas

Você pode usar o módulo alternador de idioma para fornecer uma maneira para os visitantes alternarem entre as versões traduzidas de uma página ou blog. 

Observação: o módulo de alteração de idioma não está disponível para modelos de e-mail. 

• Para editar o conteúdo padrão do módulo de alternador de idioma:
  
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo Alternador de idioma ou adicione o módulo.
  4. No inspetor da seção Conteúdo padrão, marque a caixa de seleção Adicionar seta para baixo para exibir uma seta para o alternador de idioma.
  5. Clique no menu suspenso Modo de exibição para selecionar uma das seguintes opções:
     
     • 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 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 dos dois. 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.
  6. Clique no menu suspenso Opções de ícone e selecione Nenhum, Ícone ou Ícone personalizado.

• Quando terminar de editar o módulo do alternador de idioma, clique em Publicar alterações no canto superior direito.

Observação: este módulo aparecerá apenas nas páginas ativas com mais de uma tradução publicada. Saiba mais sobre como trabalhar comconteúdo multilíngue no HubSpot.

Logotipo

Você pode usar o módulo de logotipo para exibir o logotipo da sua empresa a partir do kit de marca no seu conteúdo. 

• Para editar o conteúdo padrão do módulo de logotipo :
  
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo Logotipo ou adicione o módulo.
  4. No inspetor da seção Conteúdo padrão, clique para ativar a opção Substituir logotipo padrão para ativar o upload de uma nova imagem no conteúdo que usa o modelo.
  5. Para editar o logotipo padrão, clique em Editar logotipo padrão neste domínio.
  6. No menu suspenso Carregamento de imagens, selecione Padrão do navegador, Lento ou Rápido. 
  7. No campo URL do link, digite o texto do URL ao qual você deseja que os visitantes sejam direcionados quando a imagem do logotipo for clicada. Isso substituirá o padrão especificado em seu kit de marca.

• Quando terminar de editar o módulo de logotipo, clique em Publicar alterações no canto superior direito.

Grid de logotipo

Você pode usar o módulo de grade de logotipo para organizar vários logotipos de diferentes dimensões em uma grade consistente.

• Para editar o conteúdo padrão do módulo de grade de logotipo:
  
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo Grade de logotipo ou adicione o módulo.
  4. Para editar uma imagem existente, clique no editIconícone editar no inspetor. Você pode carregar ou procurar imagens existentes e editar o texto alternativo ou o carregamento de imagens.
  5. Para excluir uma imagem no módulo de grade de logotipo, clique no deleteIcon ícone excluir no inspetor.
  6. Para adicionar uma nova imagem ao módulo de grade de logotipo, clique em + Adicionar no inspetor.

• Quando terminar de editar o módulo de grade de logotipo, clique em Publicar alterações no canto superior direito.

Corpo principal do e-mail

O módulo de corpo principal do e-mail é um módulo rich text padrão incluído em cada modelo de e-mail por padrão. 

• Para editar o conteúdo padrão do módulo de corpo de e-mail principal:
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo Corpo do e-mail principal.
  4. No inspetor da seção Conteúdo padrão, clique no expandIconícone expandir para editar o texto que aparece no corpo do e-mail.

• Para editar as opções de estilo do módulo principal do corpo de e-mail: 
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo Corpo do e-mail principal.
  4. No inspetor da seção Opções de estilo, insira valores hexadecimais nos campos de texto para Cor do texto, Cor de fundo e Cor da borda. Você também pode clicar no seletor de cores.

• Quando terminar de editar o módulo principal de corpo do e-mail, clique em Publicar alterações no canto superior direito.

Menu

Você pode usar o módulo de menu para adicionar navegação ao conteúdo. Os menus são criados e gerenciados diretamente nas configurações do menu de navegação. 

• Para editar o conteúdo padrão do módulo de menu:
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo Menu ou adicione o módulo.
  4. No inspetor da seção Conteúdo padrão, clique no menu suspenso Menu e selecione um menu existente ou clique em Criar novo.
  5. No menu suspenso Tipo de menu avançado, selecione uma das seguintes opções:
     • Estático - sempre mostrar páginas de nível superior no menu: mantenha seu menu consistente em todas as páginas.
     • Dinâmico por seção - mostra páginas no menu que estão relacionadas à seção em visualização: veja itens de menu relativos 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 em visualização: veja 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.
  6. No campo Níveis máx., digite o número máximo de itens de menu secundário que podem ser exibidos.
  7. No menu suspenso Orientação, selecione Horizontal ou Vertical.
  8. Para mostrar itens de menu secundário ao passar o mouse sobre a navegação principal, marque a caixa de seleção Ativar submenus?.

• Quando terminar de editar o módulo de menu, clique em Publicar alterações no canto superior direito.

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 em um modelo de e-mail para enviar e-mails de marketing. 

• Para editar o conteúdo padrão do módulo de informações de localização do escritório:
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo de e-mail.
  3. No editor de layout, clique no módulo Informações de localização do escritório.
  4. No inspetor da seção Conteúdo padrão, clique no expandIconícone expandir para editar o texto que aparece com os tokens necessários em seu e-mail.

• Para editar as opções de estilo do módulo de informações de localização do escritório:
  • Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  • Navegue até o seu modelo.
  • No editor de layout, clique no módulo Informações de localização do escritório.
  • No inspetor da seção Opções de estilo, insira valores hexadecimais nos campos de texto para Cor do texto, Cor de fundo e Cor da borda. Você também pode clicar no seletor de cores.

• Quando terminar de editar o módulo de informações de localização do escritório, clique em Publicar alterações no canto superior direito.

Uma linha de texto

Você pode usar o módulo de linha de texto para adicionar uma linha de texto ao conteúdo. 

Solicitação de senha

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

• Para editar o conteúdo padrão do módulo de solicitação de senha:
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o modelo de solicitação de senha.
  3. No editor de layout, clique no módulo Solicitação de senha.
  4. No inspetor da seção Conteúdo padrão, clique no expandIcon ícone expandir para editar o texto da mensagem de senha incorreta.

• Quando terminar de editar o módulo de solicitação de senha, clique em Publicar alterações no canto superior direito.

Filtro da publicação

Você pode usar o módulo de filtro de posts para exibir uma lista de artigos de blog de um tópico, mês ou autor específico. 

• Para editar o conteúdo padrão do módulo de filtro de post:

1. 1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
   2. Navegue até o seu modelo.
   3. No editor de layout, clique no módulo Filtro de posts.
   4. No inspetor da seção Conteúdo padrão, selecione um blog para exibir no menu suspenso Selecione o blog a exibir.
   5. No menu suspenso Lista de valores para filtrar links, selecione Tag, Mês ou Autor.
   6. No menu suspenso Ordenação de valores para filtrar links, selecione Contagem de posts ou Nome.
   7. No campo Título da lista a exibir, digite o texto que será exibido como título da lista.
   8. Para mostrar todos os filtros, marque a caixa de seleção Mostrar todos os filtros.
   9. No campo Número máximo de valores de filtro para exibir, digite o número de posts para um filtro.
   10. No Texto a ser exibido, se mais do que o valor máximo a ser exibido estiver disponível. Deixe em branco para omitir o campo de link, insira o texto que aparecerá se houver mais posts disponíveis em uma categoria.

• Quando terminar de editar o módulo de filtro de posts, clique em Publicar alterações no canto superior direito.

Lista de publicações

Você pode usar o módulo de listagem de posts para exibir uma lista de posts do seu blog. 

• Para editar o conteúdo padrão do módulo de listagem de posts:
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo Listagem de posts.
  4. No inspetor da seção Conteúdo padrão, selecione um blog para exibir no menu suspenso Selecione o blog a exibir.
  5. No menu suspenso Classificar posts por, selecione Mais recente, Mais popular - todos os tempos, Mais popular - ano passado, Mais popular - últimos seis meses ou Mais popular - mês passado.
  6. No campo Escolha o que aparece no seu feed, marque a caixa de seleção ao lado de Imagem, Título, Nome do autor e/ou Data de publicação.
  7. No campo Máximo de posts de blog para listar, digite o número máximo de posts de blog a serem exibidos.
  8. No campo Título do post, insira o texto exibido na parte superior do módulo.
  9. No menu suspenso Nível do título, selecione o nível de título (H1-H6) para o conteúdo no módulo.

• Quando terminar de editar o módulo de listagem de posts, clique em Publicar alterações no canto superior direito.

Produto

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

• Para editar o conteúdo padrão do módulo de produto:
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo Produto ou adicione o módulo.
  4. No inspetor da seção Conteúdo padrão, clique em Selecionar um produto.
  5. No painel do lado direito, marque a caixa de seleção ao lado do produto e clique em Selecionar. Para criar um novo produto, clique em Criar um produto. 
  6. Depois que um produto é selecionado, você pode substituir e editar o Nome, a Descrição, a Imagem e o Butão exibidos.

• Quando terminar de editar o módulo do produto, clique em Publicar alterações no canto superior direito.

Rich text

O módulo rich text oferece suporte a opções de edição para diferentes componentes, como texto, imagens e CTAs.

• Para editar o conteúdo padrão do módulo de rich text:
  
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo Rich text ou adicione o módulo.
  4. No inspetor da seção Conteúdo padrão, clique no expandIcon ícone expandir para editar o conteúdo Rich text. Saiba mais sobre como editar um conteúdo nos módulos de rich text.

• Quando terminar de editar o módulo rich text, clique em Publicar alterações no canto superior direito.

Lista de RSS

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

Observação: o módulo de lista de RSS não está disponível para modelos de e-mail. Em vez disso, utilize um e-mail de RSS. 

• Para editar o conteúdo padrão do módulo de listagem de RSS:
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo de Listagem de RSS ou adicione o módulo.
  4. No inspetor da seção Conteúdo padrão, insira o texto do campo Título do RSS.
  5. No campo Adicionar um feed RSS, selecione Use um feed RSS externo ou Usar um blog hospedado pela HubSpot.
  6. No menu suspenso Blog, selecione um blog.
  7. No menu suspenso Filtrar por tag, selecione uma tag.
  8. No campo Número máximo de posts a exibir, informe o número de posts.
  1. Para incluir uma imagem em destaque, marque a caixa de seleção para Incluir imagem em destaque.
  2. Para mostrar o nome do autor, marque a caixa de seleção para Mostrar nome do autor.
  3. No campo texto Atribuição do autor, insira o texto a ser exibido. O padrão inclui por como texto de atribuição.
• 
  
  4. Para mostrar um resumo do blog, marque a caixa de seleção para Mostrar resumo.
  5. No campo Limitar comprimento do resumo (número de caracteres), digite o número de caracteres ao qual limitar o resumo.
  6. No campo Texto de clickthrough do resumo, insira o texto a ser exibido. O padrão inclui Leia mais como texto.
  7. Para mostrar a data de publicação, marque a caixa de seleção para Mostrar data de publicação.
  8. No menu suspenso Formato da data de publicação, selecione o formato da data de publicação.
  9. No campo Texto indicador de data de publicação, insira o texto do indicador a ser exibido. O padrão inclui publicado em como texto.

• Quando terminar de editar o módulo de listagem RSS, clique em Publicar alterações no canto superior direito.

Cabeçalho da seção

Você pode usar o módulo de cabeçalho da seção para exibir texto em uma tag de cabeçalho com um subtítulo de parágrafo. 

• Para editar o conteúdo padrão do módulo de cabeçalho de seção:
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo Cabeçalho da seção ou adicione o módulo.
  4. No inspetor da seção Conteúdo padrão, insira o texto para o campo Conteúdo do cabeçalho da seção. 
  5. No menu suspenso Nível do título, selecione o nível do título (H1-H6) do conteúdo do texto.

• Quando terminar de editar o módulo de cabeçalho da seção, clique em Publicar alterações no canto superior direito.

Menu simples

Você pode usar o módulo de menu simples para criar um menu para um modelo específico.

• Para editar o conteúdo padrão do módulo de menu simples:

1. 1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
   2. Navegue até o seu modelo.
   3. No editor de layout, clique no módulo Menu simples ou adicione o módulo.
   4. No inspetor da seção Conteúdo padrão, clique em Editar menu para o campo Menu simples. 

1. 5. Para editar o menu simples, clique em Adicionar item de menu. Em seguida, insira o texto no campo Rótulo do item de menu. O tipo de item de menu padrão é definido como Link de página.
      • Para alterar o tipo de item de menu para um link de URL externo, clique no menu suspenso Ações e clique em Link de URL.
      • Para alterar o tipo de item de menu para que não tenha um link de URL, clique no menu suspenso Ações e clique em Sem link.
      • Para alterar o tipo de item de menu para uma página hospedada no HubSpot com um parâmetro de URL, clique no menu suspenso Ações e clique em Link de página com parâmetro de URL.

1. 6. No campo Orientação do menu, selecione Horizontal ou Vertical. Quando você altera as configurações de orientação do menu, uma classe de hs-menu-flow-horizontal ou hs-menu-flow-vertical é adicionada ao contêiner do wrapper do menu. Esta classe pode ser usada para estilizar o menu em seu CSS. Saiba mais sobre as classes adicionadas pelas configurações do módulo na documentação do desenvolvedor.

• Quando terminar de editar o módulo de menu simples, clique em Publicar alterações no canto superior direito.

Compartilhamento social

Você pode usar o módulo de compartilhamento social para fornecer aos visitantes uma opção para compartilhar seu conteúdo em canais de mídia social e e-mail.

• Para editar o conteúdo padrão do módulo de compartilhamento social:
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo Compartilhamento social ou adicione o módulo.
  4. No inspetor da seção Conteúdo padrão, insira um URL de página personalizado opcional no campo URL do link.
  5. Em cada seção de rede social, clique para expandir a seção e marque a caixa de seleção Habilitado? para incluir ao conteúdo.
  6. Depois que uma rede social for habilitada, o campo Link será preenchido automaticamente com as tags HubL necessárias para compartilhar o conteúdo. Nos e-mails de marketing, 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 usa ícones padrão para cada rede social. Se quiser utilizar os seus próprios ícones sociais personalizados, você poderá criar uma versão personalizada do módulo.

• Quando terminar de editar o módulo de compartilhamento social, clique em Publicar alterações no canto superior direito.

Seguir na rede social

Você pode usar o módulo Seguir na rede social para fornecer aos visitantes uma opção para seguir sua empresa nas mídias sociais.

• Para editar o conteúdo padrão do módulo Seguir na rede social:

1. 1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
   2. Navegue até o seu modelo.
   3. No editor de layout, clique no módulo Seguir na rede social ou adicione o módulo.

• 4. Para editar um link social existente a partir do módulo Seguir na rede social, clique no editIconícone editar no inspetor. Você pode personalizar o URL e marcar as caixas de seleção Abrir link em uma nova janela, Este link é um podcast, Personalizar texto alternativo e/ou Personalizar ícone.

1. 5. Para excluir um link social do módulo Seguir na rede social, clique no deleteIcon ícone excluir no inspetor.
   6. Para adicionar um link social ao módulo Seguir na rede social, clique em + Adicionar no inspetor. No menu suspenso Link para, selecione Externo ou Endereço de e-mail.

• Quando terminar de editar o módulo Seguir na rede social, clique em Publicar alterações no canto superior direito.

Preferências da assinatura

Você pode usar o módulo de preferência de assinatura para personalizar o conteúdo que um destinatário de e-mail vê quando gerencia suas preferências de assinatura. Este módulo somente está disponível em modelos de sistema de preferências de assinatura.

• Para editar o conteúdo padrão do módulo de preferências de assinatura:

1. 1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
   2. Navegue até o seu modelo.
   3. No editor de layout, clique no módulo Preferências de assinatura.
   4. Na janela inspetor para a seção Conteúdo padrão, insira o texto para o campo Cabeçalho.
   5. No menu suspenso Nível de título do cabeçalho, selecione um nível de título (H1-H6).
   6. No menu suspenso Nível de título do e-mail, selecione um nível de título (H1-H6).
   7. No campo Subtítulo, clique no expandIcon ícone expandir para editar o texto.

1. 8. Insira o texto desejado nos seguintes campos:
      • Texto de ajuda da seleção de preferências
      • Texto de ajuda para cancelar todas as assinaturas
      • Texto de ajuda para cancelar todas as assinaturas para um usuário que cancelou a assinatura
      • Rótulo para cancelar todas as assinaturas
      • Texto do botão de atualizar preferências
      • Texto do botão de assinar novamente

• Quando terminar de editar o módulo de preferências de assinatura, clique em Publicar alterações no canto superior direito.

Confirmação de atualização das assinaturas

Você pode usar o módulo de confirmação de atualização de inscrição para personalizar o conteúdo exibido quando um destinatário de e-mail atualiza suas preferências de assinatura. Este módulo somente está disponível em modelos de sistema de confirmação de assinatura de e-mail.

• Para editar o conteúdo padrão do módulo de confirmação de atualização de assinatura:

1. 1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
   2. Navegue até o modelo do sistema.
   3. No editor de layout, clique no módulo Confirmação de atualização de inscrições.
   4. No inspetor da seção Conteúdo padrão, insira o texto para o campo Título.
   5. No menu suspenso Nível de título do cabeçalho, selecione um nível de título (H1-H6).
   6. No menu suspenso Nível de título do e-mail, selecione um nível de título (H1-H6).
   7. No campo Subtítulo, clique no expandIcon ícone expandir para editar o texto.

1. 8. No campo Mensagem no cancelamento da assinatura, digite o texto a ser exibido quando um visitante cancelar a assinatura.
   9. No campo Mensagem na atualização da assinatura, digite o texto a ser exibido quando um visitante atualizar suas preferências de assinatura.

• Quando terminar de editar o módulo de confirmação de atualização de assinaturas, clique em Publicar alterações no canto superior direito.

Exibir como página da web

Você pode usar o módulo Exibir como página da web para fornecer aos destinatários de e-mail a opção de abrir seus e-mails de marketing como página da web. Saiba mais sobre como usar a versão de página da web de um módulo de e-mail.

• Para editar o conteúdo padrão do módulo de exibição como página da web:
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo de e-mail.
  3. No editor de layout, clique no módulo Exibir como página da Web ou adicione o módulo.
  4. No inspetor da seção Conteúdo padrão, clique no botão expandIco ícone expandir para editar o texto que aparece no campo Exibir como texto de página da web.

• Para editar as opções de estilo do módulo principal do corpo de e-mail: 
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo de e-mail.
  3. No editor de layout, clique no módulo Exibir como página da Web ou adicione o módulo.
  4. No inspetor da seção Opções de estilo, insira valores hexadecimais nos campos de texto para Cor do texto, Cor de fundo e Cor da borda. Você também pode clicar no seletor de cores.

• Quando terminar de editar o módulo principal de corpo do e-mail, clique em Publicar alterações no canto superior direito.

Link do WhatsApp 

Você pode usar o módulo de link do WhatsApp para dar aos visitantes do site e opção para se conectarem com você diretamente. Este módulo pode ser adicionado a páginas, posts de blog e páginas de listagem de blogs. Para usar este módulo, é necessário conectar seu canal do WhatsApp à caixa de entrada de conversas.

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

• Para editar o conteúdo padrão do módulo de link do WhatsApp:
  1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  2. Navegue até o seu modelo.
  3. No editor de layout, clique no módulo Link do WhatsApp
     ou adicione o módulo.
  4. No inspetor da seção Conteúdo padrão, clique em Ir para configurações para conectar seu canal do WhatsApp à sua caixa de entrada de conversas. 
  5. No menu suspenso Texto de opt-in, selecione uma opção de opt-in.
  6. No menu suspenso Mostrar, selecione Texto e ícone, Somente texto ou Somente ícone. 
  7. No menu suspenso Posição do ícone, selecione Esquerda ou Direita.
  8. No campo Texto do botão, digite o texto que será exibido no botão. O texto padrão exibirá Chat no WhatsApp.
  9. No campo título do ícone do Whatsapp, digite o texto do título para acessibilidade. O texto padrão é Ícone do WhatsApp.

• Quando terminar de editar o módulo de link do WhatsApp, clique em Publicar alterações no canto superior direito.