Como adicionar cor de fundo a um cronômetro de contagem regressiva

Este artigo mostra como adicionar uma cor de fundo a um elemento de cronômetro de contagem regressiva no GemPages.

Existem dois métodos que você pode usar, dependendo da sua configuração e necessidades de personalização:

• Opção 1: Adicione o cronômetro de contagem regressiva dentro de um elemento de linha e use as configurações de plano de fundo da linha.
• Opção 2: Adicione um código CSS personalizado diretamente ao cronômetro de contagem regressiva.

Opção 1: Adicionar cor de fundo usando um elemento de linha

Este é o método mais fácil e recomendado se você quiser estilizar visualmente toda a seção de contagem regressiva sem usar código.

Passo 1: Coloque o cronômetro de contagem regressiva dentro de uma linha.

• Abra o editor GemPages.
• Arraste um Linha elemento em seu layout.
• Arraste o Temporizador dentro da fileira.

Isso permite que o contêiner Row controle o estilo do plano de fundo.

Passo 2: Defina a cor de fundo para a linha

• Clique no Linha elemento.
• Abra o Configurações painel.
• Acesse: Configurações → Plano de fundo
• Escolha a cor de fundo que preferir.

Você também pode adicionar:

• Cores sólidas
• Fundos com gradiente
• Imagens de fundo

Para obter mais detalhes, consulte este guia: Como definir a cor da imagem ou do fundo no GemPages

Opção 2: Adicionar cor de fundo usando CSS personalizado

Se você quiser aplicar o fundo diretamente ao elemento do cronômetro de contagem regressiva, pode usar CSS personalizado.

Passo 1: Abra a área de código personalizado do cronômetro de contagem regressiva.

• Clique no elemento Cronômetro de contagem regressiva.
• Clique com o botão direito do mouse no elemento.
• Selecionar Código personalizado.

Isso abre o editor de código personalizado para esse elemento.

Passo 2: Adicione o código CSS

Cole o seguinte código na área de Código Personalizado:

.ElementClass {

fundo: #DFC4C4 !importante;

}

Em seguida, substitua:

• .ElementClass com a sua classe de elemento real
• #DFC4C4 com o seu código de cores preferido

Dica: Como obter um código de cores

O GemPages suporta códigos de cores HEX padrão.

Exemplo:

#000000 → Preto

#FFFFFF → Branco

#FF0000 → Vermelho

#DFC4C4 → Rosa claro

Você pode usar esses sites para selecionar e gerar códigos de cores:

• Códigos de cores HTML
• Gerador de paleta de cores Coolers
• Adobe Color
• Caça de cores

Essas ferramentas te ajudam a:

• Selecionar cores visualmente
• Gerar paletas correspondentes
• Copie códigos de cores HEX facilmente

Etapa 3: salvar e publicar

• Clique Economize.
• Publique ou atualize sua página.
• Visualize a página para verificar o estilo do plano de fundo.

Seu cronômetro de contagem regressiva agora deve ser exibido com a cor de fundo selecionada.