Cómo Mostrar El Texto Y El Número Del Temporizador De Cuenta Regresiva En Una Sola Línea

El elemento Temporizador de Cuenta Regresiva es uno de los elementos más populares de GemPages para generar urgencia e impulsar las conversiones en páginas de aterrizaje, páginas de producto y campañas promocionales de Shopify.

De forma predeterminada, cuando arrastra y suelta el elemento Temporizador de Cuenta Regresiva en su página, el número y el texto se muestran en dos líneas separadas:

• El número aparece arriba
• La etiqueta de texto aparece debajo

En algunos casos, es posible que desee que el texto y el número aparezcan en una sola línea, especialmente para lograr diseños más limpios, barras de anuncios o secciones promocionales compactas.

Este artículo le muestra cómo mostrar el texto y el número del temporizador de cuenta regresiva en una sola línea utilizando Código Personalizado en GemPages.

Acerca del elemento Temporizador de Cuenta Regresiva en GemPages

El elemento Temporizador de Cuenta Regresiva de GemPages ayuda a los comerciantes a crear campañas con límite de tiempo para aumentar la urgencia y animar a los clientes a actuar con mayor rapidez.

Puedes usarlo para:

• Ventas flash
• Lanzamientos de productos
• Ofertas por tiempo limitado
• Campañas de temporada
• Promociones de pedidos anticipados (pre-order)

Cómo mostrar el texto y el número en una sola línea

Paso 1: Abra el editor de Código Personalizado

En el editor de GemPages:

• Seleccione el elemento Temporizador de Cuenta Regresiva
• Haga clic derecho sobre el elemento
• Elija Código Personalizado

Esto le permite añadir CSS personalizado específicamente para ese elemento sin afectar al resto de su página.

Paso 2: Añada el código CSS personalizado

Pegue el siguiente código en la sección de Código Personalizado:

classID div#section-countdown > div{

display: flex;

align-items: center;

gap: 5px;

}

Paso 3: Reemplace el classID

Antes de guardar, asegúrese de reemplazar:

classID

por el Class ID real de su elemento Temporizador de Cuenta Regresiva.

Paso 4: Guarde y publique

Después de aplicar el código, el número y la etiqueta de texto de la cuenta regresiva aparecerán en una sola línea horizontal en lugar de apilarse verticalmente.