Alterando a Cor de um Elemento por Editor CSS

Deseja altear a cor de um elemento? É muito simples, nesse manual vamos te ensinar passo a passo para alterar a cor de um elemento através do Editor CSS.

Nesse exemplo vamos alterar a cor do título da vitrine "TESTE NOVIDADES", como segue na imagem abaixo:

Lembrando que o processo é o mesmo ao alterar a cor de outros elementos.

1° passo:

Vamos clicar com o botão direito do mouse e selecionar a opção "inspecionar" (ou Ctrl + Shift + I):

Assim irá ser exibido um painel com os códigos do site:

Você pode trabalhar com o painel ao lado direito, esquerdo, abaixo ou até em outra tela separada, basta selecionar o modo de exibição:

Nesse exemplo vamos escolhes o modo abaixo da tela, mas fica de sua preferência.

2° passo:

Clique na opção de selecionar um elemento, assim é só selecionar um elemento desejado, onde nesse exemplo é o título da vitrine:

Repare que ao selecionar o elemento já exibe o nome e as características do mesmo, incluindo a cor:

E é essa cor que iremos alterar!

3° passo:

Ao selecionar o elemento exibira todos os dados do mesmo no menu "styles":

E é nesse campo que vamos alterar. Nesse caso vamos alterar a cor de Preto para Azul, então muito importante você possuir o código da cor ou selecioná-la na tabela de cores que é exibida.

Basta clicar na cor que está no momento e já irá aparecer a opção para alterar:

Simples até aqui não é? Mas ainda precisamos salvar essa alteração através do Editor CSS, pela plataforma.

4° passo:

Em seu painel administrativo selecione a opção Aparência Editor CSS;

5° passo:

Agora vamos copiar o código que editamos e colar no campo do editor:

Lembrando que sempre que for copiar algum código é de muita importância entender que a ordem é:

 I:  .nome-do-elemento

II: abrir colchetes { 

III: dados do elemento

IV: fechar colchetes }

Então quando for copiar o código é sempre até o final dos colchetes, onde determina o final do código:

COPIA O NOVO CÓDIGO:

COLE NO EDITOR CSS:

E clique em SALVAR.

Pronto! A cor foi alterada!.

**Lembrando que devido a cache de navegador as alterações podem demorar para serem exibidas no site.

Se deseja aprender como ocultar um elemento através do editor clique aqui.