Cómo Añadir Dos Puntos Entre Los Números De La Cuenta Regresiva

De forma predeterminada, el elemento Cuenta Regresiva en GemPages muestra cada unidad de tiempo (Días, Horas, Minutos, Segundos) por separado, sin separadores entre ellas.

Si desea que su temporizador de cuenta regresiva luzca más limpio y profesional, puede añadir dos puntos (:) entre cada número utilizando un pequeño fragmento de CSS personalizado. Esta guía le mostrará cómo hacerlo en solo unos pocos pasos.

Antes de empezar

Asegúrese de tener ya un elemento Cuenta Regresiva añadido a su página en GemPages.

Esta personalización funciona con el elemento Cuenta Regresiva de GemPages y requiere añadir un fragmento de CSS personalizado.

Paso 1: Abra el área de Código Personalizado del elemento Cuenta Regresiva

• Abra el editor de páginas en GemPages.
• Haga clic en su Cuenta Regresiva .
• Haga clic con el botón derecho en el elemento.
• Seleccione Código Personalizado.

Esto abrirá el panel de código personalizado donde podrá añadir su CSS.

Paso 2: Añada el CSS personalizado

Pegue el siguiente código en el área de Código Personalizado:

.ElementClass #section-countdown > div {

position: relative;

}

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

content: ':';

position: absolute;

right: -2.5px;

top: 50%;

transform: translateY(-50%);

line-height: 1;

font-size: 16px;

font-weight: bold;

padding-bottom: 3px;

color: #121212;

}

Después de pegar el código, reemplace .ElementClass con la clase real de su elemento. 

Nota importante sobre el espaciado

Según el diseño de su cuenta regresiva, el tamaño de fuente, el espaciado o la configuración del diseño, es posible que deba ajustar el valor correcto para posicionar perfectamente los dos puntos.

Por ejemplo:

right: -2.5px;

Puedes probar con valores como:

right: -1px;

right: -4px;

right: -6px;

hasta que el espaciado se vea correcto en su diseño.

Puede seguir estas instrucciones en video para obtener más detalles: Video tutorial de Loom

Paso 3: Guardar y publicar

• Haga clic en Guardar.
• Publique o actualice su página.
• Previsualice la página para comprobar el estilo de la cuenta regresiva.

Su temporizador de cuenta regresiva debería mostrar ahora dos puntos entre cada sección de números.