Contenido y elementos de la barra
Los seis elementos que puede contener una barra, cómo ordenarlos y cómo los grupos permiten que un banner diga dos cosas.
El panel Content es el primer icono de la barra lateral del editor. Contiene todo lo que dice la barra.
Los elementos se disponen de izquierda a derecha en la barra, en el orden en que aparecen en esta lista.
Añadir y ordenar
Sección titulada «Añadir y ordenar»- Add element abre un menú con los seis tipos. El nuevo se coloca al final de la lista.
- Arrastra el tirador situado a la izquierda de una fila para moverla. La barra sigue el orden de esta lista.
- Pasa el puntero sobre una fila para ver los botones de duplicar y eliminar.
- Haz clic en una fila para abrir sus ajustes en la columna de la derecha.
Los seis elementos
Sección titulada «Los seis elementos»El mensaje. Define las palabras, el tamaño, la negrita, la cursiva, el subrayado y un color propio.
Si dejas el color vacío, el texto sigue el color de texto de la propia barra, así que al cambiar el estilo de la barra el mensaje lo acompaña.
Countdown
Sección titulada «Countdown»Un temporizador en vivo dentro de la barra. Tiene tres modos:
| Modo | Qué ve quien visita la tienda |
|---|---|
| Count down to a date | Todas las personas ven el mismo tiempo restante |
| Fixed minutes per visitor | Cada persona recibe su propio reloj al llegar |
| Daily recurring | Se ejecuta en los días de la semana elegidos entre dos horas |
También eliges qué unidades se muestran (días, horas, minutos, segundos), si los rótulos de las unidades aparecen bajo los números y qué dicen. Deja un rótulo en blanco para usar el texto predeterminado en inglés.
When the timer ends decide qué ocurre al llegar a cero: ocultar el banner, mantenerlo en cero o reiniciarlo.
Una etiqueta más una acción:
| On click | Qué hace |
|---|---|
| Open a link | Lleva a quien hace clic a una URL |
| Scroll to a section | Salta a una parte de la página actual, mediante un selector CSS |
| Apply a discount code | Aplica el código al carrito de la persona |
En un enlace también puedes activar Open in a new tab, que deja tu tienda abierta detrás.
El resto es estilo: forma (cuadrada, redondeada, píldora), tamaño de fuente, tamaño predefinido, negrita/cursiva/subrayado, fondo, color de la etiqueta y borde.
Discount code
Sección titulada «Discount code»El código en sí, mostrado con un contorno discontinuo. Activa Copy on click y la persona lo copia con solo hacer clic: sin seleccionar y sin escribir.
Dale estilo con un estilo de borde, un radio de esquina y su propio color.
Un logotipo o una insignia. Pega una URL o sube un archivo y el campo se rellena solo. Define la altura y el texto alternativo.
El texto alternativo es lo que anuncian los lectores de pantalla y lo que se muestra si la imagen no se carga.
Line break
Sección titulada «Line break»Nada que ver. Todo lo que va después empieza en una línea nueva, de modo que una barra larga puede mostrarse en dos filas en lugar de una sola apretada.
Arrástralo entre dos elementos para dividir la barra donde quieras.
Un elemento, dos pantallas
Sección titulada «Un elemento, dos pantallas»Abre cualquier elemento excepto un salto de línea y su sección Style empieza con Device settings: tres iconos, un ojo, un ordenador y un móvil.
Device settings está en la parte superior de Style, y todo lo que hay debajo sigue el icono que elijas.
El ojo es el caso normal: lo que configures se aplica a ambas pantallas.
Los iconos de ordenador y móvil limitan los ajustes que hay debajo a esa pantalla. Elige el móvil, baja el tamaño de fuente a 12 y solo los móviles tendrán 12; los ordenadores conservan lo que definió el ojo. Todo en Style se divide así: tamaños de fuente, los tamaños de número y etiqueta de una cuenta regresiva, sus colores y qué unidades muestra, la altura de una imagen, la forma y el tamaño de un botón, el borde y el color de un código de descuento.
Al elegir una pantalla también aparece un interruptor Hide on desktop o Hide on mobile. Así puedes quitar un elemento que no encaja en un móvil (una frase larga, una imagen) sin crear un segundo banner. Se mantiene en la otra pantalla.
Un salto de línea no tiene sección Style, así que conserva un control Show on sencillo: Both screens, Desktop only o Mobile only.
Grupos: un banner, dos mensajes
Sección titulada «Grupos: un banner, dos mensajes»Bajo la lista de elementos está Add group.
Un solo grupo es el caso normal. Añade un segundo y la barra alterna entre ellos: se muestra el primer grupo, luego el segundo y vuelta a empezar. Cada grupo contiene sus propios elementos, así que un banner puede alternar entre “Free shipping over $50” y “Sale ends tonight”.
La velocidad del cambio y si se produce con un fundido cruzado o con un deslizamiento se explican en Animación y grupos.