Qué vas a lograr
- Insertar un Hero Banner como portada o bloque principal.
- Configurar imagen, textos y botones del Hero.
- Crear un Banner promocional con enlace, colores y comportamiento.
Paso a paso en Flobu
Cómo funciona la interfaz de Flobu en este tutorial
- Menú lateral: ya debes estar dentro del editor visual de una página.
- Panel central: verás la vista previa de los bloques y podrás seleccionar cada uno.
- Panel derecho: editarás Contenido, Enlaces, Imagen, Presentación, Comportamiento y Colores.
- Acciones clave: usarás Agregar bloque, Hero Banner, Banner, Seleccionar imagen y las opciones de vista Escritorio, Tablet y Móvil.
1) Insertar Hero Banner y Banner
- Abre una página en el editor visual de Flobu.
- Elige la sección donde quieres agregar la portada o promoción.
- Haz clic en Agregar bloque.
- Selecciona Hero Banner.
- Repite el proceso y selecciona Banner.
- Si la sección tiene varias columnas, elige la columna donde debe quedar cada bloque.
- Haz clic en cada bloque para abrir su configuración en el panel derecho.
Resultado esperado: El Hero Banner y el Banner quedaron insertados y listos para editar.
2) Configurar el Hero Banner
- Selecciona el bloque Hero Banner.
- En Contenido, edita Título, Subtítulo, Texto CTA principal y Texto CTA secundario.
- En Enlaces, completa URL CTA principal y, si corresponde, URL CTA secundario.
- Activa Abrir principal en nueva pestaña o Abrir secundario en nueva pestaña solo si el enlace debe abrirse fuera de la tienda.
- En Imagen, usa Seleccionar imagen para cargar la imagen de escritorio.
- Si necesitas una versión para celular, carga también la imagen móvil.
- Si la imagen aporta información, desactiva Imagen decorativa y completa el Texto alternativo.
- En Presentación, ajusta Altura, Alineación horizontal, Alineación vertical, Ancho del contenido, Recorte de imagen, Posición de imagen, Color overlay y Opacidad overlay.
Resultado esperado: El Hero tiene mensaje, imagen, botones y presentación correcta para la portada.
3) Configurar el Banner
- Selecciona el bloque Banner.
- En Contenido, completa Texto, Ícono y Texto del enlace.
- En Enlace, completa la URL del enlace.
- Activa Abrir en nueva pestaña solo si el enlace debe abrirse fuera de la tienda.
- En Comportamiento, decide si activar Permitir cerrar o Fijar arriba.
- En Presentación, ajusta Alineación, Layout, Tamaño, Variante y Radio.
- En Colores, revisa las opciones de Fondo y Texto.
- Cambia entre Escritorio, Tablet y Móvil para verificar que el mensaje se lea correctamente en todos los dispositivos.
Resultado esperado: El Banner queda visible, legible y listo para anunciar una promoción o aviso importante.
Checklist final rápido
- Inserté el bloque Hero Banner.
- Inserté el bloque Banner.
- Edité el Título y el Subtítulo del Hero.
- Completé al menos un CTA del Hero con texto y URL.
- Cargué la imagen de escritorio y, si era necesario, la imagen móvil.
- Revisé el Texto alternativo o marqué la imagen como decorativa.
- Configuré Texto, Texto del enlace y URL del enlace en el Banner.
- Revisé las opciones Permitir cerrar, Fijar arriba, colores y presentación.
- Validé la vista en escritorio, tablet y móvil.
Errores comunes
- Buscar Banner strip en la biblioteca; en Flobu este bloque aparece simplemente como Banner.
- Completar el texto de un CTA sin agregar la URL correspondiente; el botón o enlace no funcionará correctamente.
- Usar una imagen de Hero sin revisar cómo se ve en dispositivos móviles.
- Dejar el Texto alternativo vacío cuando la imagen comunica información importante.
- Activar Fijar arriba en varios banners al mismo tiempo, lo que puede saturar la parte superior de la página.
- Publicar la página sin revisar la vista móvil.