Isenção de responsabilidade de tradução: esse conteúdo foi traduzido para sua conveniência com o uso de software e pode não ter sido revisado por uma pessoa. O texto oficial é a versão em inglês e sempre será o texto mais atualizado. Para ver a versão em inglês, clique aqui.
CMS-General

Estruturar e personalizar layouts de modelos

Ultima atualização: Janeiro 28, 2019

Disponível para

Marketing Hub Professional, Enterprise
Basic
HubSpot CMS

Saiba como configurar e personalizar seu modelo de arrastar e soltar existente e trabalhar com módulos, grupos e colunas como blocos de construção do seu modelo.

Estruturar o modelo

Ao usar o editor de layout no gerenciador de design, você pode criar rapidamente o layout do conteúdo sem precisar escrever qualquer HTML.

  • Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
  • No localizador, clique no modelo para editar.

Adicionar e arrastar módulos

Para adicionar um módulo a um layout, clique em + Adicionar na parte superior do inspetor de layout. Pesquise ou selecione um módulo e arraste-o para o local onde deseja renderizá-lo no layout. Arrastar um módulo sobre outro módulo cria colunas ou agrupa os módulos.

Alterar larguras das colunas

Para alterar a largura de uma coluna, posicione o cursor do mouse entre os módulos e clique e arraste horizontalmente.

Agrupar módulos

Grupos de módulos são unidades de módulos que compõem diferentes seções de uma página.

Para agrupar dois módulos, clique no primeiro módulo e pressione e mantenha pressionada a tecla Ctrl e selecione o segundo módulo. Repita essa etapa se você estiver agrupando mais de dois módulos. Em seguida, clique no ícone de agrupar groupModule no inspetor de módulo.

Observação: grupos de módulos não podem ultrapassar um separador de seção ou conter um grupo de módulos parcialmente selecionado.

Dividir módulos horizontalmente

Dividir um módulo o divide pela metade, criando dois módulos. Para dividir um módulo, clique no módulo e no ícone de dividir módulo splitModuleinspetor de módulo. Opcionalmente, clique com o botão direito no módulo no layout e selecione Dividir módulo.

Adicionar uma coluna flexível

Colunas flexíveis são projetadas para facilitar o gerenciamento de conteúdo na página para os criadores de conteúdo. Quando uma coluna flexível é adicionada a um modelo de página da HubSpot, os usuários podem adicionar, remover e reordenar os módulos no  editor de página individual. Este recurso permite aos designers criar menos modelos, dando flexibilidade aos profissionais de marketing para personalizar cada página conforme as suas necessidades.

Para adicionar uma coluna flexível, clique em + Adicionar no topo do inspetor de layout. Localize a Coluna flexível e arraste-a ao modelo.

Observação: colunas flexíveis só podem ser adicionadas aos modelos de página e não podem ser adicionados aos modelos de e-mail ou blog.


Personalizar o modelo

Depois de estruturar o layout geral do modelo, você pode trocar módulos e fazer outras personalizações de modelos.

Editar opções do módulo

Você pode editar as opções de um módulo, clicando no módulo no editor de layout. No inspetor do módulo à direita, você verá as opções editáveis do módulo. Essas opções geralmente incluem estilo, conteúdo padrão e opções do editor e podem ser diferentes, dependendo do tipo específico de módulo. Saiba mais sobre edição de módulo CSS e conteúdo padrão e configurações.

Opções de edição

Trocar módulo

Depois de adicionar um módulo ao modelo, você poderá alterá-lo por outro módulo. Clique com o botão direito no módulo no editor de layout e em Trocar módulo. No menu suspenso exibido, selecione o módulo a substituir pelo módulo original.

Converter para módulo global

Você pode converter um módulo no modelo para um módulo global, que pode ser usado em vários modelos. Isso é útil quando você estiliza o módulo de uma determinada maneira e/ou tem conteúdo padrão no módulo que gostaria de reutilizar em outros modelos.

  • Clique no módulo no editor de layout.
  • No inspetor de módulo, clique no menu suspenso Mais e selecione Converter a um módulo global.
  • Na caixa de diálogo, insira um nome para seu módulo global e clique em Criar.

Excluir módulo

Para remover um módulo, clique no módulo no editor de Layout e no ícone de lixeira Excluir noinspetor de módulo. Opcionalmente, você pode clicar com o botão direito no módulo e selecionarExcluir módulo.

Gerenciar modelo no localizador

Além das suas opções de módulo, há várias ações que você pode realizar para o modelo específico.

  • No canto superior direito do modelo, clique no ícone de pasta pasta.
  • Clique com o botão direito no nome do modelo. No menu suspenso, você pode personalizar as seguintes opções:
    • Copiar para os portais: copie o modelo para outro portal no qual você também seja um usuário. Modelos comprados do Marketplace não poderão ser copiados para outros portais.
    • Clonar modelo: isso cria uma duplicata exata do modelo e é útil quando você quiser criar uma variação de um modelo existente.
    • Clonar para HTML: isso cria uma versão HTML separada do modelo. Isso é útil se precisar de mais controle sobre sua marcação ou quiser saber mais sobre como os modelos são codificados.
    • Exibir fonte do modelo: veja o código fonte do modelo HTML. Ao contrário da opção Clonar para HTML, isso não cria uma versão HTML separada do seu modelo.
    • Renomear modelo: edite o nome interno do seu modelo.
    • Mostrar dependentes: veja todas as páginas, e-mails ou blogs que usam atualmente o modelo.
    • Mostrar histórico de revisão: veja o histórico de revisão do modelo e escolha reverter seu modelo para uma versão publicada anteriormente.
    • Criar e-mail/páginacrie um e-mail ou landing page/página de site diretamente do modelo.
    • Excluir modelo: isso exclui o modelo. Uma vez excluído, o modelo permanecerá disponível por 30 dias. Depois disso, ele será excluído permanentemente.
  • Essas opções também podem ser acessadas nos menus suspensos Arquivo Ações acima.