Cómo Añadir Un Color De Fondo A Un Temporizador De Cuenta Regresiva

Este artículo le muestra cómo añadir un color de fondo a un elemento de Temporizador de Cuenta Regresiva (Countdown Timer) en GemPages.

Existen 2 métodos que puede utilizar según su configuración y sus necesidades de personalización:

• Opción 1: Añadir el Temporizador de Cuenta Regresiva dentro de un elemento de Fila y usar la configuración de fondo de la Fila
• Opción 2: Añadir un código CSS personalizado directamente al Temporizador de Cuenta Regresiva

Opción 1: Añadir el color de fondo usando un elemento de Fila

Este es el método más sencillo y recomendado si desea aplicar estilo visual a toda la sección de la cuenta regresiva sin utilizar código.

Paso 1: Coloque el Temporizador de Cuenta Regresiva dentro de una Fila

• Abra el editor de GemPages.
• Arrastre un elemento Fila a su diseño.
• Arrastre el Temporizador de Cuenta Regresiva dentro de la Fila.

Esto permite que el contenedor de la Fila controle el estilo del fondo.

Paso 2: Establezca el color de fondo de la Fila

• Haga clic en el elemento elemento Fila .
• Abra el panel de Configuración .
• Vaya a: Configuración → Fondo.
• Elija el color de fondo de su preferencia.

También puede añadir:

• Colores sólidos
• Fondos con degradado
• Imágenes de fondo

Para obtener más detalles, consulte esta guía: Cómo establecer una imagen o un color de fondo en GemPages

Opción 2: Añadir el color de fondo usando CSS personalizado

Si desea aplicar el fondo directamente al propio elemento del Temporizador de Cuenta Regresiva, puede utilizar CSS personalizado.

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

• Haga clic en el elemento del Temporizador de Cuenta Regresiva.
• Haga clic con el botón derecho en el elemento.
• Seleccione Código Personalizado.

Esto abre el editor de código personalizado de ese elemento.

Paso 2: Añadir el código CSS

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

.ElementClass {

fondo: #DFC4C4 !importante;

}

Luego, reemplace:

• .ElementClass con la clase real de su elemento
• #DFC4C4 con el código de color de su preferencia

Consejo: Cómo obtener un código de color

GemPages admite códigos de color HEX estándar.

Ejemplo:

#000000 → Negro

#FFFFFF → Blanco

#FF0000 → Rojo

#DFC4C4 → Rosa suave

Puede usar estos sitios web para elegir y generar códigos de color:

• HTML Color Codes
• Coolors Color Palette Generator
• Adobe Color
• Color Hunt

Estas herramientas le ayudan a:

• Elegir colores visualmente
• Generar paletas que combinen
• Copiar códigos de color HEX fácilmente

Paso 3: Guardar y publicar

• Haga clic en Guardar.
• Publique o actualice su página.
• Previsualice su página para comprobar el estilo del fondo.

Su Temporizador de Cuenta Regresiva debería mostrarse ahora con el color de fondo seleccionado.