Qué banner elegir y cómo salir de Añadir
Banner es una franja con mensaje, distintivo opcional y una acción opcional. Es diferente de Hero Banner, que presenta una composición principal con imagen, y de Slider Principal, que puede mostrar varias diapositivas. También es diferente de los anuncios del header: este componente pertenece a la página donde lo insertas, no a todas las páginas de la tienda.
Puedes colocarlo debajo del header, antes de productos o entre otros componentes. En modo Básico, los componentes se ordenan verticalmente; en Avanzado puedes insertarlo dentro de una sección y elegir una Columna de destino si hay varias. El modo se elige en Ajustes > Nivel de edición del panel izquierdo y ambos modos editan la misma página.
Si abriste Añadir por accidente, presiona Cancelar o selecciona un componente existente en el lienzo para abandonar la inserción y editarlo. Si abriste la biblioteca sin elegir una posición, selecciona Banner y confirma una zona Agregar aquí; en escritorio también puedes arrastrarlo al lienzo.
Un banner nuevo empieza con Descubre nuestras novedades, botón Ver productos hacia /products, colores de la tienda, alineación Centro, distribución En línea, tamaño Medio, esquinas Rectas y cierre desactivado. Cambia esos textos según tu tienda antes de publicar si buscas otro mensaje.
Opciones de Contenido
Mensaje y distintivo
- Mensaje: texto principal del anuncio; admite varias líneas y se ajusta al ancho disponible. Puedes escribirlo en el campo del inspector o directamente en el lienzo, y ambas vistas se actualizan con el mismo contenido.
- Distintivo (opcional): palabra corta o símbolo colocado antes del mensaje, por ejemplo
Nuevo, Oferta o Exclusivo; no es un selector de imágenes.
El mensaje y el texto de la acción se editan como texto plano. Si pegas contenido, utiliza su redacción y ajusta el aspecto desde Diseño; no necesitas escribir código ni dar formato HTML.
Si Mensaje queda vacío, el inspector avisa que debes escribirlo para mostrar el banner en la tienda. El componente sigue seleccionable y editable en el lienzo, pero no se publica una franja vacía aunque haya un distintivo o una acción configurados.
Tipo de acción
- Sin acción: deja únicamente el mensaje y el distintivo; conserva el texto y el destino guardados para que puedas recuperar la acción después.
- Enlace: muestra el texto de la acción subrayado, una opción discreta para ampliar información.
- Botón: presenta una acción más visible dentro del banner, útil cuando quieres dirigir al visitante a un catálogo o producto.
- Texto de la acción: nombre visible del enlace o botón, como
Ver productos o Conocer más; también puedes editarlo directamente en el lienzo cuando está visible.
- Destino: página o dirección a la que lleva la acción; tanto el texto como un destino válido son necesarios para mostrarla en la tienda.
- Abrir en nueva pestaña: abre el destino en otra pestaña y conserva la página actual; si está desactivado, se usa la misma pestaña. El control no está disponible mientras falte el destino ni para acciones de correo o teléfono.
Si falta el texto o el destino, verás el aviso junto al campo correspondiente y la acción no aparecerá en la tienda; el mensaje puede seguir mostrándose. En ese caso completa el dato pendiente desde el inspector, aunque todavía no exista un botón editable en el lienzo.
Seleccionar un destino
Al presionar Destino se abre el selector con Páginas del Sitio, Productos, Categorías, Marcas y URL Personalizada / Externa. Elige el tipo, busca el elemento cuando corresponda y selecciónalo; para el catálogo completo, usa Páginas del Sitio > Todos los productos, con ruta /products.
Para una URL manual, escribe una ruta interna como /contacto o la dirección completa de un sitio externo y presiona Aplicar. El selector también admite anclajes como #contacto, correo con mailto: y teléfono con tel:, hasta 180 caracteres; un anclaje solo desplaza al lugar esperado si ese destino existe en la página.
Comprueba que la página, categoría o producto de destino sea accesible para los clientes. Configurar el enlace no crea ese contenido ni lo publica automáticamente.
Permitir cerrar
Permitir cerrar añade la X Cerrar anuncio para que el visitante oculte el banner. Con el cierre desactivado, la X no aparece.
El cierre afecta al visitante que lo presiona, no al diseño guardado ni a los demás visitantes. Al recargar la página el banner vuelve a aparecer; no necesitas cambiar el mensaje ni volver a publicar para recuperarlo. En el lienzo, Cerrar anuncio (vista previa) es inerte para que puedas seguir seleccionando y editando el componente; prueba el cierre real en Vista previa o en la tienda.
Opciones de Diseño
Apariencia
- Estilo del banner > Destacado: usa el fondo principal de la tienda y su color de texto asociado; sirve para un anuncio que necesita visibilidad.
- Estilo del banner > Suave: usa el fondo secundario de la tienda y su texto asociado para una presencia más discreta.
- Estilo del banner > Con borde: usa el fondo general de la tienda, su texto y líneas de borde para separar el anuncio del resto del contenido.
- Tamaño > Pequeño / Medio / Grande: cambia el tamaño del texto y el relleno interior; la altura final se adapta al contenido y al número de líneas.
- Esquinas > Rectas / Suaves / Redondeadas / Cápsula: cambia la curva de las esquinas de la franja; Cápsula ofrece la curva más marcada.
Cambiar el estilo conserva el mensaje, la acción y las preferencias de cierre. Si ya personalizaste Fondo o Texto, esos colores propios siguen teniendo prioridad: recupera los colores de la tienda para ver los colores automáticos del nuevo estilo.
Disposición
- Alineación > Izquierda / Centro / Derecha: alinea el mensaje y la acción dentro de la franja.
- Distribución > En línea: coloca mensaje y acción en la misma fila cuando hay ancho suficiente; pueden ajustarse a más líneas si lo necesitan.
- Distribución > Apilado: coloca la acción debajo del mensaje también en pantallas grandes.
En móvil la acción se coloca debajo del mensaje aunque hayas elegido En línea. El texto puede ocupar varias líneas y el cierre tiene su propio espacio; revisa igualmente los anuncios largos en Móvil antes de publicarlos.
Colores
Fondo y Texto muestran el color efectivo que estás usando. Color de la tienda indica que sigue el tema y Personalizado que elegiste un valor propio para este banner; la acción acompaña la presentación del anuncio.
Presiona la muestra, utiliza el selector de color o escribe un Código de color de seis caracteres, como #2563EB. Los valores válidos se reflejan en el lienzo mientras los cambias; Listo cierra el selector. Si el código está incompleto, corrígelo siguiendo el aviso del campo.
Usar color de la tienda elimina la personalización de ese campo y recupera el color correspondiente a Destacado, Suave o Con borde. Cambiar un color aquí afecta solo a este banner; para modificar la paleta global utiliza Ajustes > Paleta de colores y revisa el resto de la tienda.
Elige una combinación donde se puedan leer tanto el mensaje como la acción. Comprueba también el resultado si cambias la paleta de la tienda más adelante.
Visibilidad y espacio alrededor del banner
En Visibilidad, Mostrar en escritorio, Mostrar en tablet y Mostrar en móvil controlan dónde aparece el componente completo. Desactivar uno no borra su contenido; volver a activarlo permite mostrarlo otra vez en ese tamaño cuando publiques el cambio.
El espaciado aparece al final de Diseño. En modo Básico tienes estas opciones:
- Separación superior y Separación inferior: distancia exterior respecto de los componentes vecinos.
- Aire vertical: relleno superior e inferior alrededor de la franja; es distinto del tamaño del texto y del relleno interior que define Tamaño.
- Aire lateral: relleno izquierdo y derecho alrededor de la franja.
- Aplicar a > Un valor: usa un mismo espaciado para todos los tamaños de pantalla.
- Aplicar a > Por dispositivo: permite ajustar el espaciado de la vista activa; cambia Escritorio, Tablet o Móvil en la barra del lienzo para editar cada uno.
- Restablecer espaciado recomendado: recupera los espacios iniciales alrededor del componente sin borrar el mensaje ni la acción.
Al volver de Por dispositivo a Un valor, se comparte el espaciado que estás viendo en la vista activa. Si dos lados tenían valores diferentes, el control puede mostrar valores mixtos hasta que elijas uno común.
En Avanzado también aparecen los ajustes generales del contenedor: Color de fondo, imagen de Fondo con Tamaño fondo, Color overlay y Opacidad overlay, Borde y sombra, Padding (espacio interno) y Margen (espacio externo) por lado. Para cambiar los colores de la propia franja, usa primero Colores > Fondo / Texto del banner; el fondo del contenedor y el fondo de la franja son ajustes distintos.
Usos habituales
- Novedades: usa un mensaje como
Descubre las novedades de esta semana y un botón hacia el catálogo o la categoría correspondiente.
- Aviso informativo: selecciona Sin acción para comunicar un cambio de horario o información que no necesite otra página.
- Información de envíos: utiliza Enlace hacia la política de envíos si quieres explicar condiciones que realmente se aplican en tu tienda.
- Promoción: escribe la oferta vigente y enlaza sus productos o condiciones; actualiza el anuncio cuando termine.
No necesitas un distintivo en todos los casos. Un mensaje breve, una acción clara y buenos colores suelen facilitar la lectura; cuando haga falta más detalle, utiliza el destino del enlace para explicarlo.
Cómo comprobar que quedó listo
- Selecciona el banner y comprueba que el mensaje del lienzo y el de Contenido coincidan, incluidos los saltos de línea.
- Revisa Escritorio, Tablet y Móvil; confirma el mensaje completo, contraste, ubicación de la acción y espacio del cierre, sin desbordamientos.
- En Vista previa, abre la acción y comprueba su destino y pestaña; si elegiste Sin acción, confirma que no haya enlace ni botón visibles.
- Con Permitir cerrar activado, pulsa la X: el banner debe ocultarse; recarga la página y comprueba que vuelva. Con el cierre desactivado no debe haber X.
- Después de Publicar cambios, revisa la página pública y los dispositivos habilitados; no basta con ver Guardado en Flobu en el editor.
Alcance y límites
El banner comunica información: escribir un descuento, una condición de envío o un cupón no configura esa condición comercial. Este componente no incorpora imágenes ni programación propia para campañas; cambia o elimina el mensaje cuando deje de ser vigente.
Los banners anteriores pueden tener colores, tamaños, enlaces y otras preferencias diferentes de los valores iniciales actuales. Seleccionarlos no los convierte automáticamente al diseño nuevo; modifica solo lo que necesitas y revisa la vista previa.
Tutoriales relacionados