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.