Como adicionar dois pontos entre números de contagem regressiva

Por padrão, o elemento Contagem Regressiva no GemPages exibe cada unidade de tempo (Dias, Horas, Minutos, Segundos) separadamente, sem separadores entre elas.

Se você quiser que seu cronômetro de contagem regressiva tenha uma aparência mais limpa e profissional, pode adicionar dois pontos ().:) entre cada número usando um pequeno trecho de CSS personalizado. Este guia mostrará como fazer isso em apenas alguns passos.

Antes que você comece

Certifique-se de que você já possui um Elemento de contagem regressiva Adicionado à sua página no GemPages.

Essa personalização funciona com o elemento Contagem Regressiva no GemPages e requer a adição de um trecho de CSS personalizado.

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

• Abra o editor de páginas no GemPages.
• Clique no seu Contagem regressiva elemento.
• Clique com o botão direito do mouse no elemento.
• Selecionar Código personalizado.

Isso abrirá o painel de código personalizado, onde você poderá adicionar seu CSS.

Passo 2: Adicione o CSS personalizado

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

.ElementClass #section-countdown > div {

position: relative;

}

.ElementClass #section-countdown > div:not(:last-child):after {

contente: ':';

posição: absoluta;

direita: -2.5px;

topo: 50%;

transform: traduzirY(-50%);

altura da linha: 1;

font-size: 16px;

font-weight: bold;

fundo do preenchimento: 3px;

color: #121212;

}

Após colar o código, substitua .ElementClass com a sua classe de elemento real. 

Nota importante sobre espaçamento

Dependendo do layout da sua contagem regressiva, tamanho da fonte, espaçamento ou configuração do design, você pode precisar ajustar o certo valor para posicionar o cólon perfeitamente.

Por exemplo:

direita: -2.5px;

Você pode experimentar valores como:

direita: -1px;

direita: -4px;

direita: -6px;

até que o espaçamento pareça correto no seu projeto.

Você pode seguir as instruções deste vídeo para obter mais detalhes: Vídeo tutorial de tear

Etapa 3: salvar e publicar

• Clique Economize.
• Publique ou atualize sua página.
• Visualize a página para verificar o estilo da contagem regressiva.

Seu cronômetro de contagem regressiva agora deve exibir dois pontos entre cada seção numérica.