As cores são o que dá personalidade ao seu site e fazem ele ter a cara da sua marca. Neste tutorial, você vai aprender a gerenciar toda a paleta de cores do site. Dá pra mudar tudo de uma vez pelos grupos de cores, ou ajustar partes específicas com precisão. Vamos ver cada forma.
Onde ficam as cores do site
A opção fica no grupo Criador de Site, no menu à esquerda, com o nome Cores do Site. Lá dentro você encontra três formas de trabalhar, organizadas em abas: Editar Cores em Grupos, Editar Cores Individuais e Cadastrar Cor. Vamos ver cada uma.
Editar Cores em Grupos, a forma rápida
Esta é a maneira mais rápida de mudar a aparência do site. Aqui você edita as cores principais, e a alteração se aplica no site inteiro de uma vez. As cores ficam organizadas em grupos, cada um com um nível.
Entender o papel de cada cor ajuda muito na hora de editar:
Pra mudar uma cor, é só clicar em Editar no grupo desejado. Como essas cores valem pro site todo, uma pequena mudança aqui já transforma a aparência geral rapidamente.
Editar Cores Individuais, para ajustes específicos
Quando você quer trocar a cor de uma parte específica do site, sem mexer em tudo, usa esta aba. Cada cor é identificada pelo nome da classe, que indica o local exato onde ela se aplica.
Cada linha da lista traz as informações da cor:
- Nome. Uma identificação da cor, pra você reconhecer, como Menu, Categorias ou Créditos.
- Classe. O seletor CSS que define onde aquela cor se aplica no site.
- Nível. O grupo ao qual a cor está vinculada.
- Tipo. Se a cor é de fundo, de texto ou de borda.
- Cor. O código da cor em si.
Você pode arrastar os itens pra reordenar, e cada um tem os botões Editar e Excluir. É aqui que você faz aqueles ajustes finos, tipo mudar a cor de um menu específico ou de um bloco.
Cadastrar Cor, criar uma cor nova
Nesta aba você cria uma cor nova pra paleta do site. Vale saber que este é o mesmo painel que abre quando você edita uma cor que já existe, então aprender ele serve pras duas coisas.
Veja o que cada campo faz:
- Tipo Estilo. Define o que a cor vai colorir: o fundo (background), o texto ou a borda de um elemento.
- Nome da Cor. Uma identificação pra você reconhecer a cor depois na lista.
- @Media. Permite aplicar a cor só em determinados tamanhos de tela. É assim que você controla se aquela cor vale apenas no computador ou apenas no mobile.
- Classe. O nome da classe CSS onde a cor será aplicada, ou seja, o local que ela vai afetar.
- Tipo de Cor. Escolha entre cor sólida, uma cor única, ou degradê, uma transição suave entre cores.
- Cor. O código da cor que você quer usar.
- Nível. Vincula a cor a um grupo. Assim, quando você trocar a cor primária ou secundária pelos grupos, essa cor pode mudar junto, se você quiser.
- Important. Quando ligado, adiciona o !important à regra, garantindo que a cor sobrescreva o que já existe no site.
Depois de preencher, clique em Salvar. A cor entra na paleta e passa a valer no site.