Estruturar e personalizar layouts de modelos

Written by HubSpot Support | 10/jul/2018 16:55:04

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

Estruturar seu 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.

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 Control/Command 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 splitModule inspetor de módulo. Opcionalmente, clique com o botão direito no módulo no layout e selecione Dividir módulo.

Módulos centrais

Com espaçadores horizontais, você pode centralizar módulos e grupos na página ou adicionar um espaço em branco em qualquer um dos lados. Para adicionar um espaçador horizontal, clique em + Adicionar na parte superior do inspetor de layout. Localize o Espaçador horizontal e arraste-o e solte-o no modelo.

Para alterar o tamanho de um espaçador horizontal, alterar a largura da coluna que o separa dos outros módulos. Para centralizar um módulo ou grupo, adicione espaçadores horizontais em cada um dos lados.

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:

As colunas flexíveis só podem ser adicionadas a modelos de páginas, e não podem ser adicionadas a modelos de e-mails ou blogs.
Os módulos adicionados às colunas flexíveis não podem ter classes CSS, estilo em linha, ou o HTML de embrulho associado a elas. As opções de estilo precisam de ser adicionadas à própria coluna flexível.

Personalizar seu 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 o módulo de edição CSS e o conteúdo e configurações padrã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

Pode converter um módulo no seu template para um módulo global, que pode ser utilizado em múltiplos templates. 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 delete 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 folder.
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ágina: crie 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. Para restaurar o modelo, será necessário entrar em contato com o suporte ao cliente.
Essas opções também podem ser acessadas nos menus suspensos Arquivo e Ações acima.

View full post