Diseñar una cuenta regresiva
Cambia colores, fuentes, fondos, bordes y espaciado para que una cuenta regresiva encaje con tu tienda.
Una plantilla te da un aspecto inicial. La pestaña Design es donde lo haces tuyo, o donde lo reconstruyes por completo, ya que todo es editable.
Los temporizadores y las fechas de entrega estimadas tienen una pestaña Design completa. Las cuentas regresivas de stock y de carrito tienen menos opciones y las mantienen dentro de la pestaña Settings.
La pestaña Design, con la vista previa actualizándose a medida que cambias los ajustes.
Cambiar de plantilla
Sección titulada «Cambiar de plantilla»No estás atado al diseño que elegiste al principio. Abre el selector de plantillas desde el editor y elige otro; las temporadas aparecen en pestañas en la parte superior: Default, New year, Valentine, Summer Sale, Moon Festival, Halloween, Black Friday, Christmas y Winter Sales.
Cambiar de plantilla sustituye el diseño. Tu texto, la programación y las condiciones se conservan.
Diseño del temporizador de cuenta regresiva
Sección titulada «Diseño del temporizador de cuenta regresiva»La pestaña Design del temporizador tiene cuatro secciones más el CSS personalizado.
Design Main Section
Sección titulada «Design Main Section»El contenedor exterior de la cuenta regresiva: el panel dentro del que está todo lo demás.
| Grupo | Controles |
|---|---|
| Background | Un color sólido o una imagen subida. Con color obtienes un Main background color con valores Left y Right independientes: un relleno plano es el mismo color en ambos y un degradado son dos |
| Overlay image | Oscurece una imagen de fondo subida para que el texto siga siendo legible sobre ella |
| Text | La fuente de toda la cuenta regresiva. Activa Use custom font style para elegir una familia y un grosor de fuente |
| Padding | Espacio dentro del panel, definido como Top / Right y Bottom / Left |
| Border | Tamaño del borde, radio, estilo (Solid, Dotted o Dashed) y color |
| Shadow | Yes o No |
Element styling: Title and Subtitle
Sección titulada «Element styling: Title and Subtitle»El Title y el Subtitle tienen cada uno su propia fuente, tamaño de fuente, color y márgenes. Aquí consigues que el título domine y el subtítulo pase a un segundo plano, o que queden más cerca.
Design Timer Section
Sección titulada «Design Timer Section»Los propios dígitos.
| Grupo | Controles |
|---|---|
| Font | Timer font size para los números y Label font size para las palabras de debajo |
| Border | Tamaño y estilo del recuadro alrededor de cada unidad |
| Color | Number color, Data text color para las etiquetas, Background color para el recuadro de cada unidad, Dot color para los separadores y Border color |
| Padding | Espacio dentro del recuadro de cada unidad |
Si defines un fondo y un borde en las unidades, obtienes el aspecto de recuadros; si dejas ambos vacíos, obtienes números sencillos sobre el panel.
Si has activado el botón, tiene su propio borde (radio, tamaño, estilo), colores (fondo, texto, borde) y relleno.
Design Mobile Section
Sección titulada «Design Mobile Section»Tamaños de fuente independientes para móviles, descritos en la aplicación como “Optimize countdown appearance and layout for mobile devices to ensure a smooth and responsive user experience”.
Puedes definir tamaños específicos para móvil para Title, Subtitle, Timer number y Timer label, además del relleno para móvil.
Esta sección merece un minuto en cada cuenta regresiva. Un título que se lee bien a 25 px en ordenador suele ser demasiado grande en un móvil, y cuatro unidades de temporizador con el tamaño de escritorio a menudo se parten en varias líneas o se desbordan.
Diseño de la fecha de entrega estimada
Sección titulada «Diseño de la fecha de entrega estimada»La pestaña Design de una fecha de entrega se divide según sus dos partes:
- Design Main Widget: el mensaje, con fuentes, colores, tamaño, bordes y espaciado.
- Design Process Widget: la barra Ordered → Dispatched → Delivered, con iconos, colores y espaciado.
Si tu estructura es Message only o Progress bar only, solo importa la mitad correspondiente.
Diseño de las cuentas regresivas de stock y de carrito
Sección titulada «Diseño de las cuentas regresivas de stock y de carrito»Estas dos tienen sus controles de diseño dentro de la pestaña Settings.
Stock countdown ofrece Alignment, colores independientes para el mensaje, el control deslizante, la cifra de stock y el fondo, y una Animation: None, Flash o Pulse.
Cart countdown ofrece posición, colores para el mensaje, el temporizador y el fondo, bordes y fuentes.
CSS personalizado
Sección titulada «CSS personalizado»Todos los tipos terminan con un cuadro Custom CSS (Developer Zone) para lo que los controles no cubren. Consulta CSS personalizado.
Consejos prácticos
Sección titulada «Consejos prácticos»Toma prestado de tu tema. Una cuenta regresiva con los colores de tu marca parece parte de la tienda; una con los valores predeterminados de la plantilla parece añadida a la fuerza. El color de acento de tu tema suele ser el fondo adecuado.
El contraste importa más que el color. Lo importante son los números: asegúrate de que se lean bien sobre lo que haya detrás, también en el extremo pequeño del rango de tamaños.
Compruébalo en una página real. La vista previa muestra la cuenta regresiva sola, sobre su propio fondo. Tu página de producto tiene un precio, un botón e imágenes que compiten con ella.
Compruébalo en un móvil. Usa la Design Mobile Section en lugar de aceptar lo que hagan los tamaños de escritorio en una pantalla pequeña.