Central de Ajuda›Landing Pages›Estilos & Cores

Estilos & Cores: padronize o visual de todas as páginas

Landing Pages Leitura de 5 minutos Nível iniciante

Os Estilos & Cores são os padrões visuais das suas landing pages. Em vez de configurar cor por cor em cada bloco de conteúdo, você cria estilos reutilizáveis, com cores, fundo, bordas e CSS, e aplica eles nos blocos. É o recurso que mantém o site inteiro padronizado e que torna qualquer mudança de visual rápida e produtiva.

Por que usar estilos em vez de editar bloco por bloco

Imagine que o seu site tem dezenas de páginas e você decide mudar a cor dos botões, que eram azul escuro e agora vão ser verdes. Sem os estilos, você teria que abrir bloco por bloco, página por página, trocando a cor em cada um. Demorado e fácil de esquecer algum. Com os estilos, a história é outra: você edita o estilo padrão uma vez e todas as páginas que usam aquele estilo mudam juntas, na hora. Rápido, padronizado e sem esquecer nada.

Onde fica

No menu Landing Pages, abra a aba Estilos & Cores. Ali você vê a lista dos estilos criados, cada um com os botões Editar, Duplicar e Excluir.

Lista de Estilos e Cores no Criador de Sites Malvis, com os estilos criados e os botões Editar, Duplicar e Excluir
A lista de estilos, com as ações de editar, duplicar e excluir cada um.

Dica de organização. Uma forma que funciona muito bem é nomear os estilos por cor e variação de borda. Por exemplo, BG 01 e BG 02 como as duas cores de fundo do site, cada uma com as variações Sem Borda, Borda Item e Borda Imagem. E um estilo próprio pro Parallax, que costuma ter visual diferente. Assim, na hora de montar os blocos, você alterna entre os estilos e a página ganha ritmo visual sem perder a identidade.

Criando um estilo

Ao cadastrar ou editar um estilo, você encontra um formulário organizado por seções. Veja o que cada uma controla:

Formulário Cadastrar Estilo e Cores, com o nome do estilo, cor da fonte, fundo, item, botão, bordas e o campo de CSS
O formulário do estilo, com todas as opções de cores, fundo, bordas e CSS.
  1. Nome do Estilo. Um nome curto pra identificar e reaproveitar depois, como BG 01 - Sem Borda.
  2. Cor da Fonte. A cor do texto dos blocos que usarem esse estilo.
  3. Background (cor de fundo da linha toda). O fundo da seção inteira, com três tipos: Cor Sólida, Degradê ou Imagem.
  4. Item. Uma chave pra usar uma cor de fundo própria na caixa do item, com a cor normal, a cor ao passar o mouse e a margem interna (padding).
  5. Botão. As quatro cores do botão: a cor do botão, a cor ao passar o mouse, a cor do texto e a cor do texto no hover.
  6. Borda do Item. Uma chave Exibir, com a cor, o arredondamento, a espessura e o estilo da borda.
  7. Borda da Imagem. Mesma estrutura, pra colocar borda nas imagens dos blocos.
  8. CSS. Um campo pra regras específicas do estilo, com o atalho Efeito de Sombra pronto pra usar.

Aplicando o estilo nos blocos

Com os estilos criados, é só aplicar. Na edição de cada bloco de conteúdo existe o campo Estilo e Cor, onde você escolhe qual estilo aquele bloco usa. Um bloco pode usar o BG 01, o próximo o BG 02, e assim a página vai ganhando forma. Se você ainda não conhece a edição de blocos, veja o tutorial de blocos de conteúdo.

O caminho recomendado. Sempre que quiser um visual novo, prefira criar ou editar um estilo padrão em vez de mexer nas cores de um bloco individual. A edição individual existe, mas quem usa os estilos ganha em velocidade e padronização, porque qualquer ajuste futuro acontece num lugar só e vale pro site inteiro.

Passo a passo: mudando o visual do site inteiro

1

Abra os Estilos & Cores

No menu Landing Pages, clique na aba Estilos & Cores.

2

Edite o estilo que quer mudar

Clique em Editar no estilo, por exemplo pra trocar a cor dos botões ou o fundo das seções.

3

Salve

Confirme no botão Salvar. Todas as páginas que usam esse estilo já passam a exibir o visual novo.

4

Confira no site

Abra algumas páginas e veja a mudança aplicada em todas de uma vez. É isso, sem editar bloco por bloco.

Ainda precisa de ajuda?

Fale com o nosso suporte pelo WhatsApp que a gente te orienta.

Falar com o suporte