CMS-General

Use o inspetor para estilo seu modelo

Ultima atualização: November 21, 2018

Disponível para

Marketing Hub
marketing-basic-pro-enterprise
Professional, Enterprise
Basic
HubSpot CMS

Depois de estruturar seu modelo e adicionar algum conteúdo padrão, é hora de pensar em sua apresentação do site. 

O inspetor está localizado no lado direito do gerenciador de design. É onde você pode editar as propriedades de um layout, módulo ou grupo, também como adicionar módulos a um layout de arrastar e soltar. Quando se trata do estilo, você pode usar o inspetor para:

  • Anexar folhas de estilo ou arquivos JavaScript ao seu modelo
  • Adicione a marcação HTML do cabeçalho ou rodapé no modelo
  • Adicionar classes de CSS personalizadas e estilo integrado a um módulo ou grupo específico

Personalize as opções do cabeçalho do modelo e corpo

Quando você acessar seu modelo no gerenciador de design, você verá o inspetor de layout no lado direito se você não tiver nenhum módulo selecionado. As edições feitas no inspetor de layout afetarão o modelo inteiro. Aqui, você pode personalizar as opções de cabeçalho e corpo do seu modelo.

Anexar folhas de estilo e arquivos JavaScript

Na folha de estilos vinculada, opções de arquivos JavaScript vinculados, clique em Adicionar ao arquivo de estilo ou JavaScript para anexar ao modelo. Você também pode escolher incluir, excluir ou usar folhas de estilo padrão de estilo domínio no menu suspenso folhas de estilo do domínio.

Você pode saber mais sobre como criar e editar arquivos CSS para o estilo aqui.

Adicionar marcação de HTML de cabeçalho ou rodapé

Na parte adicional marcação e marcação adicional antes campos, você pode adicionar a marcação HTML ou HTML que se aplica ao modelo.

Adicione uma classe ou estilo integrado ao corpo do modelo

Na aulas do corpo, você pode adicionar um atributo de classe de corpo ao modelo. Você também pode adicionar estilo integrado ao corpo HTML do modelo no campo de estilo do corpo.

Personalize seu módulo ou as opções de estilo do grupo

Quando você selecionar um módulo específico no modelo, o inspetor do módulo aparecerá. Quando você selecionar um grupo de módulos em seu modelo, o inspetor do grupo aparecerá. O inspetor permite personalizar as opções de estilo do módulo ou grupo.

Dependendo se você está personalizando um módulo de modelos de e-mail, um módulo de página ou um grupo de módulos, as opções de estilo apresentadas à você podem mudar. O exemplo abaixo mostra as opções de estilo disponíveis para um módulo de rich em um modelo de página.

Adicionar uma classe CSS

O atributo de classe HTML permite atribuir aulas aos módulos em seus modelos para que eles possam ser usados usando CSS. Embora seu modelo já tenha muitas aulas padrão, aulas personalizadas dão aos designers mais controle sobre a aparência de um modelo, enquanto mantém a flexibilidade do editor de layout de arrastar e soltar.  

No exemplo acima, "bio" é adicionado ao campo de Classe do CSS no módulo de rich. Isso adicionará a aula de atributo HTML = "biografia à tag do contêiner do módulo (uma tag HTML que especifica uma área ou divisão de uma página). A classe de biografia, ou elementos dentro dessa aula, agora podem ser direcionados em seu modelo de estilo.

Observe: essa opção não é recomendada para uso em modelos de e-mail, pois tags de estilo não são compatíveis com alguns clientes de e-mail.

Em seu modelo de estilo, você pode direcionar o contêiner a estilo selecionando sua classe personalizada e aplicando várias propriedades do CSS. Por exemplo, para adicionar uma cor de fundo ao módulo com a aula de biografia, você poderia escrever CSS como o exemplo abaixo:

.biografia {
backtografia: #CCCC;
}

Você também pode querer direcionar elementos dentro do seu módulo, não apenas o contêiner. Para fazer isso, você pode usar seletores de seleção de notícias ou diretas. Por exemplo, para direcionar todo o texto do parágrafo dentro do módulo com a aula de biografia, você poderia escrever um seletor CSS de notícias como o exemplo abaixo:


.Bip {
color {color: #000000;
}

Adicionar estilo integrado

O estilo integrado é CSS que está escrito em suas tags de HTML. Adicionando propriedades do CSS e valores ao campo de estilo em linha para um módulo ou grupo aplicará seu código ao contêiner ou recipiente de grupo.

No exemplo acima, a margem e a cor são usadas para ajustar o espaço e a cor do módulo. Isso adicionará o tipo de atributo HTML = "margem-superior ": #00349;" para a tag do contêiner do módulo.

Embora essa opção possa ser útil para obter links rápidos para um modelo de página específico, é menos flexível que usar o campo de aula CSS, pois você precisa fazer alterações de código dentro de módulos individuais, em vez de em um estilos de modelo global.

Os clientes de e-mail são mais limitados em seus recursos de vendas HTML e CSSdo que navegadores modernos. Como, o estilo em linha é a melhor maneira de estilo a ser suportado em clientes de e-mail. Módulos de modelo de e-mail têm opções de compatibilidade com usuário adicionais para adicionar estilo integrado, mostrado abaixo.

Adicionar o HTML

Embora o editor de layout de arrastar e soltar não forneça acesso completo a uma marcação HTML de modelo, você pode adicionar mais HTML de amarração em torno de certos módulos. Esta opção é para designers que precisam de controle adicional sobre um modelo HTML, mas ainda querem manter a flexibilidade de usar o editor de layout de arrastar e soltar por meio de um modelo HTML.

Para implementar esse recurso, adicione sua marcação HTML e o token do HTML (onde o código do módulo vai renderizar) ao campo HTML da HubL. O exemplo anterior mostra um HTML5