Debido a la facilidad de generar contadores atrás que vimos en el tutorial de los countdown evergreen, muchos miembros me han estado pidiendo hacer un generador, pero de contadores atrás «clásicos». Aquellos que apuntan a una futura fecha objetivo. Así que…
Hoy les traigo un generador de countdowns personalizados, con el código listo para copiar y pegar
Si te interesa nuestro anterior artículo sobre countdowns evergreen, puedes verlo desde aquí:
Cómo usar la herramienta
La herramienta genera el código de contadores atrás evergreen, listo para copiar y pegar.
SELECCIONAR FECHA OBJETIVO: Fecha futura hasta la que se contará. Para elegir la fecha, simplemente deben hacer click al campo, y aparecerá un selector de fecha y hora.
MENSAJE DEL COUNTDOWN (OPCIONAL): Pueden poner un mensaje que se mostrará junto al contador. Si no desean mostrar ningún mensaje, dejen éste campo en blanco.
ESTILOS PARA EL MENSAJE: En caso hayan agregado un mensaje para mostrar, aquí podrán elegir el color y tamaño de la letra.
DISPLAY: Aquí pueden elegir cómo se mostrará el contador. Si será como un bloque, es decir que el contenedor ocupará todo el ancho y no podrá tener otros elementos a su lado. (Como ejemplo el contador naranja que aparece al empezar el artículo); o si será inline, lo cual significa que se podrá integrar dentro de un párrafo, o junto a otros elementos dentro de una línea o fila. (Como por ejemplo el contador negro que se ve más arriba).
ALINEACIÓN: Pueden elegir la alineación del contador. Ésto sólo funciona si se muestra como bloque, ya que el contenedor ocupa todo el ancho, podemos elegir si el contador se mostará a la izquierda, centro o derecha
ESTILOS PARA LOS VALORES NUMÉRICOS: Pueden elegir el color de fondo, el color de letra y el atamaño de letra de los números del contador.
ESTILOS PARA LAS ETIQUETAS: Se puede elegir el color de letra y el tamaño de letra de las etiquetas: dias, hrs, min y seg.
MENSAJE CUANDO FINALICE EL COUNTDOWN: Mensaje que aparecerá y reemplazará al countdown, una vez éste llegue a cero.
¿Deseas agregar a tus formularios de Divi un selector de fecha y hora como el que aparece en la herramienta?
Entonces el siguiente artículo te encantará:
Herramienta generadora de Contadores atrás Evergreen
Genera todos los contadores atrás evergreen que quieras:
Más ejemplos
Mira todos los contadores que creamos en menos de 5 segundos, gracias a la herramienta:
Seguro que éstos otros artículos también te encantarán:
¿Dónde agregar el código generado?
En cualquier parte de tu diseño que te permita agregar HTML personalizado. Por ejemplo si usas Divi, en el módulo Código. Si utilizas Elementor o Gutenberg, en el módulo HTML personalizado.
0 comentarios