Estruturar e personalizar modelos usando o editor de layout

Use o editor de layout no gerenciador de design para estruturar e personalizar modelos de arrastar e soltar. Ao organizar módulos, grupos e colunas, você pode controlar como o conteúdo é estruturado nas páginas. Isso também dá aos criadores de conteúdo mais controle no editor de páginas.

Antes de começar

Antes de estruturar e personalizar páginas usando o editor de layout no gerenciador de design, revise os requisitos e considerações. 

Compreender limitações e considerações

• As alterações em um modelo se aplicam a todo o conteúdo que usa esse modelo. 
• Alguns recursos, como colunas flexíveis, estão disponíveis apenas para modelos de página.

Estruture um modelo

Use o editor de layout para estruturar como o conteúdo é organizado dentro de um modelo.

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No localizador, clique em um modelo para abri-lo no editor de layout. 

Adicionar e organizar módulos

Os módulos são os blocos de construção de um layout de modelo. Arrastar um módulo ao lado de outro cria colunas. Arrastar um módulo em cima de outro agrupa os módulos.

1. No inspetor, clique em + Adicionar.
2. Insira o texto para pesquisar um módulo e clique no módulo. 
3. Arraste o módulo para o editor de layout.

Alterar larguras das colunas

Para alterar a largura de uma coluna:

1. No editor de layout, passe o mouse entre dois módulos.
2. Clique e arraste horizontalmente para ajustar a largura da coluna. 

Módulos de grupo

Agrupar módulos para organizar seções de um modelo.

Para agrupar módulos:

1. No editor de layout, selecione um módulo.
2. Pressione e segure a tecla Control (Windows) ou Command (Mac) e selecione módulos adicionais. 
3. No inspetor, clique no groupModule ícone Agrupar módulos.

Observação: os 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

A divisão de um módulo divide o módulo ao meio, criando dois módulos.

Para dividir um módulo:

1. No editor de layout, clique em um módulo

2. No inspetor, clique no splitModule ícone Dividir módulo . 

Módulos centrais

Use espaçadores horizontais para centralizar módulos e grupos na página ou adicione espaço em branco em ambos os lados deles. 

Para adicionar um espaçador horizontal:

1. No inspetor, clique em + Adicionar.

2. Insira espaçador horizontal no campo Pesquisar . Em seguida, arraste o módulo Espaçador horizontal para a posição no modelo no editor de layout.

3. Para alterar o tamanho de um espaçador horizontal, altere a largura da coluna que o separa de outros módulos.

4. Para centralizar um módulo ou grupo, adicione módulosespaçadores H orizontal em cada lado.

Adicionar uma coluna flexível

As colunas flexíveis são projetadas para facilitar o gerenciamento de conteúdo no nível da página para os criadores de conteúdo. Quando uma coluna flexível é adicionada a um modelo de página do HubSpot, os usuários terão a opção de adicionar, remover e reordenar módulos no editor de página individual. Esse recurso permite que os designers criem menos modelos, enquanto ainda permite aos profissionais de marketing a flexibilidade de personalizar cada página para atender às suas necessidades.

1. No inspetor, clique em + Adicionar.

2. Insira a coluna flexível no campo Pesquisar . Em seguida, arraste o módulo Coluna flexível para a posição no modelo no editor de layout.

Personalize seu modelo

Depois de estruturar o layout do modelo, você poderá trocar os módulos e fazer outras personalizações no modelo.

Editar opções do módulo

As opções de edição de um módulo incluem estilo, conteúdo padrão e podem variar dependendo do tipo específico de módulo. Saiba mais sobre como editar o CSS do módulo e o conteúdo e as configurações padrão.

1. No editor de layout, clique em um módulo. 
2. No inspetor, personalize as opções do módulo. 

Módulo de troca

Depois de adicionar um módulo ao seu modelo, você pode optar por trocá-lo por outro módulo.

1. No editor de layout, clique com o botão direito do mouse no módulo e selecione Trocar módulo.

2. No pop-up, selecione o módulo pelo qual substituir o módulo original.

Converter ao módulo global

Converta um módulo do seu modelo em um módulo global, que pode ser usado em vários modelos. Use isso quando você estilizou o módulo de uma determinada maneira ou tem conteúdo padrão no módulo que gostaria de reutilizar em outros modelos.

1. No editor de layout, clique em um módulo.
2. No inspetor, clique no menu suspenso Mais e selecione Converter para módulo global.
3. Na caixa de diálogo, insira o nome do módulo global e clique em Criar.

Excluir módulo

1. No editor de layout, clique em um módulo.

2. No inspetor, clique no ícone de delete lixeira. 

Gerenciar seu modelo no Finder

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

1. No localizador, clique no nome de um modelo.
2. Clique no menu suspenso Ações e selecione uma opção: 
   • Copiar para outra conta: copie o modelo para outra conta na qual você também seja um usuário. Os modelos comprados no Marketplace não poderão ser copiados para outros portais.
   • Clonar modelo: cria uma duplicata exata do seu modelo e é útil quando você deseja criar uma variação de um modelo existente.
   • Clonar para HTML: cria uma versão HTML separada do modelo de arrastar e soltar. Isso é útil se você precisar de mais controle sobre sua marcação ou quiser saber mais sobre como os modelos são codificados.
   • Exibir fonte do modelo: exiba o HTML do código-fonte do modelo. 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 modelo.
   • Mostrar dependentes: veja todas as páginas, e-mails ou blogs que atualmente usam o modelo.
   • Mostrar histórico de revisão: visualize o histórico de revisão do seu modelo e escolha reverter o modelo para uma versão publicada anteriormente.
   • Criar e-mail/página: crie um e-mail ou página diretamente do modelo.
   • Excluir modelo: exclui o modelo. Depois que o modelo for excluído, ele permanecerá disponível por 30 dias. Após esse período, ele será excluído permanentemente. Para restaurar o modelo, você precisará entrar em contato com o suporte ao cliente.