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.
Landing Pages
Blog
Website Pages

Personalizar os estilos de módulo no editor de conteúdo

Ultima atualização: Julho 15, 2020

Disponível para

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Marketing Hub Basic (versão anterior)

Na página do site e no editor de landing page, você pode editar o estilo de módulos individuais. Na maioria dos casos, você pode ajustar o espaçamento e o preenchimento em torno de seus módulos na guia Estilo para personalizar a posição do módulo na sua página. Se o desenvolvedor do site que criou seu modelo de página incluiu opções de estilo adicionais, elas poderão ser visualizadas na guia Opções.

Se você estiver usando um modelo starter, um modelo de tema ou um modelo codificado com uma área de arrastar e soltar, também poderá aplicar estilos de fundo às linhas, colunas ou seções da sua página.

Observação: editar um estilo de módulo do editor de página adicionará regras de CSS com tags !important, que podem substituir as regras na sua folha de estilos. Para obter os melhores resultados, é recomendável trabalhar com um designer para fazer as edições do CSS diretamente nas folhas de estilo anexadas ao seu site. Para personalizar rapidamente um estilo de página sem usar código, use um modelo starter ou um modelo de tema.

Antes de começar

As opções de estilo disponíveis dependem do tipo de módulo que você está editando e o modelo de página que está usando. O desenvolvedor do site que criou o modelo controla quais opções de estilo são exibidas no editor de página.

  • Os módulos mais comuns têm opções de estilo para margem e preenchimento, para que você possa ajustar o espaçamento e o posicionamento dos seus módulos. Módulos de formulário têm mais opções de estilo, incluindo cores de texto e estilos de borda.
  • Módulos repetidos várias vezes na sua página, como botões ou cabeçalhos, normalmente têm estilos predefinidos para cores e fontes, baseadas na folha de estilos codificada do modelo ou nas configurações de tema do modelo.
  • Módulos personalizados não têm opções de estilo disponíveis em editores de conteúdo e devem ser editados no gerenciador de design. Se precisar de ajuda com um módulo personalizado, conecte-se a um Parceiro da HubSpot para ajudá-lo com as edições de design.

Personalizar estilos para um módulo

  • Na sua conta da HubSpot, acesse Marketing SiteLanding pages ou Páginas da Web.
  • No painel esquerdo, clique na guia Conteúdo e selecione o módulo que deseja editar.
  • Clique na guia Estilos.
  • Use as teclas de seta para fazer ajustes nas margens e se deslocar pelo módulo. Clique na caixa de seleção Uniforme para aplicar espaçamento igual em todos os quatro lados do módulo.
  • Personalize as outras cores, o deslocamento ou os estilos de fonte disponíveis para o módulo. 
  • Para desfazer qualquer alteração no estilo do módulo, clique no refresh ícone para reverter para redefinir todos os estilos.

edit-module-styles

Personalizar mais opções de estilo em um modelo starter ou modelo de tema

Se você estiver usando um modelo starter, algumas opções de estilo, como fontes ou cores padrão, são repetidas em várias partes da sua página. Dependendo de como o modelo foi codificado pelo desenvolvedor do site, você poderá substituir esses estilos padrão na guia Opções do painel esquerdo.

  • No editor de página, clique no módulo para selecioná-lo.
  • No painel esquerdo, clique na guia Opções.
  • Veja abaixo as opções de conteúdo do módulo padrão, clique para ativar a opção Substituir estilo padrão.
  • Aqui você pode selecionar estilos adicionais com base nas opções que foram incluídas no modelo da sua página. A maioria dos modelos starter tem opções de substituição disponíveis aqui.

override-default-styles

  • Depois de fazer suas alterações, clique em Aplicar alterações no canto inferior esquerdo. Para voltar a todas as opções de conteúdo no painel esquerdo, clique em Voltar no canto superior esquerdo.
/pt/cos-pages-editor/how-do-i-customize-the-css-of-my-hubspot-pages