Qué vas a lograr
- Insertar los bloques Hero Banner y Banner en una página del Page Builder v2.
- Configurar el Hero con título, subtítulo, CTAs, imagen de fondo, altura y overlay.
- Configurar un banner promocional con texto, enlace, colores y opción de cierre, entendiendo cómo se comporta en la tienda publicada.
Paso a paso en Flobu
Cómo funciona la interfaz de Flobu en este tutorial
- Menú lateral: para este tutorial ya debes estar dentro del Page Builder v2, trabajando sobre una página con al menos una sección disponible.
- Panel central: usarás el canvas para ver la vista previa del Hero Banner y del Banner, y el panel izquierdo Añadir para insertarlos.
- Acciones clave: insertarás los bloques desde Añadir o Agregar bloque, y luego configurarás sus campos desde el inspector derecho.
- Alcance de este tutorial: aquí te enfocarás en la configuración propia de Hero Banner y Banner. No entrarás todavía a estilos globales de la página ni a bloques de comercio más complejos.
1) Insertar el Hero Banner y el Banner en el lugar correcto
- Abre una página dentro del Page Builder v2.
- Si todavía no tienes una estructura base, crea primero una sección donde quieras ubicar estos bloques.
- Para un Hero Banner, lo más recomendable es trabajar en una sección ancha o de una sola columna para que el bloque respire mejor.
- Para el Banner, suele funcionar mejor en una fila propia o en una zona donde quieras destacar un anuncio corto.
- Usa Agregar bloque en el punto exacto donde quieras insertar el primer bloque.
- También puedes abrir la pestaña Añadir del panel izquierdo.
- Busca Hero Banner y haz clic para insertarlo.
- Luego repite el flujo y busca Banner.
- Si la sección tiene más de una columna, Flobu puede pedirte elegir la columna de destino antes de insertar.
- Cuando ambos bloques quedan insertados, ya los verás renderizados en el canvas.
- El Hero Banner aparece como un bloque grande de portada.
- El Banner aparece como una franja más compacta, pensada para mensajes promocionales o informativos.
Detalle importante de la interfaz: estás trabajando con los nombres reales de la biblioteca. El bloque del roadmap llamado banner strip se inserta en Flobu con la etiqueta Banner.
Resultado esperado:
- Insertaste un Hero Banner y un Banner en posiciones concretas de la página.
- Entendiste que ambos bloques se agregan desde la biblioteca visible del editor, pero cumplen funciones visuales distintas.
2) Configurar el Hero Banner con contenido, imagen y CTAs
- Haz clic sobre el bloque Hero Banner.
- En el inspector derecho aparecerá el panel Contenido.
- Ahí encontrarás los campos Título y Subtítulo.
- Esos dos campos usan edición enriquecida dentro del propio panel lateral.
- Esto es importante: a diferencia del bloque simple Texto, el Hero Banner no se redacta directamente en el canvas.
- Luego baja al bloque Botones.
- Configura Texto CTA principal y URL CTA principal.
- Si quieres un segundo llamado a la acción, completa Texto CTA secundario y URL CTA secundario.
- El comportamiento real del bloque es este: un CTA solo aparece en la vista previa si tiene texto y URL al mismo tiempo. Si dejas solo el texto o solo la URL, ese botón no se renderizará como CTA útil.
- Después ve a Imagen de fondo.
- Si el Hero aún no tiene fondo, verás el botón Seleccionar imagen.
- Al hacer clic, Flobu abrirá el gestor multimedia para elegir una imagen existente o usar Subir imagen.
- Cuando la imagen ya está cargada, el panel te mostrará una miniatura y un ícono para eliminarla.
- En la interfaz actual no hay un botón directo de Cambiar imagen dentro de este panel: si quieres reemplazarla, elimina la actual y vuelve a Seleccionar imagen.
- Luego abre Opciones. Ahí podrás ajustar:
- Altura
- Alineación contenido
- Color overlay
- Opacidad overlay
- El overlay solo se vuelve realmente relevante cuando el Hero tiene una imagen de fondo. Si el Hero no tiene imagen, el bloque sigue funcionando con los colores base del sitio.
- Otra limitación importante del producto: en este panel no verás toggles para Abrir en nueva pestaña ni estilos manuales por CTA como en el bloque simple Botón. Los CTAs del Hero heredan su estilo visual desde la implementación del bloque y la paleta del sitio.
Resultado esperado:
- Dejaste el Hero Banner con contenido, imagen y CTAs correctamente configurados.
- Entendiste que los botones del Hero solo aparecen cuando su texto y su URL están completos, y que el overlay depende de una imagen de fondo real.
3) Configurar el Banner y entender cómo se comporta en vivo
- Haz clic sobre el bloque Banner.
- En el inspector verás primero el bloque Contenido.
- Completa Texto con el mensaje principal del anuncio.
- Si quieres un enlace visible dentro del banner, completa Texto del enlace y URL del enlace.
- Igual que en el Hero, el enlace solo se renderiza si ambos datos están completos.
- Luego pasa al bloque Colores. Ahí puedes definir el color de Fondo y el color de Texto.
- Después revisa el switch Permitir cerrar.
- Si lo activas, el banner mostrará una X en la vista previa del editor.
- Esta opción no es solo decorativa: en la tienda publicada el cliente podrá cerrar ese banner durante la sesión actual del navegador.
- También es importante saber lo que este bloque no hace: el enlace del banner se muestra como texto subrayado, no como botón; y este panel no ofrece variantes avanzadas de estilo ni varios enlaces dentro de la misma franja.
- Revisa ahora el resultado en el canvas y luego cambia entre Escritorio, Tablet y Móvil.
- Como el banner es una franja compacta, conviene validar que el mensaje principal siga siendo legible en pantallas pequeñas.
- Un último matiz real del producto: en la tienda publicada, si el campo Texto principal del banner queda vacío, el bloque no se muestra. Por eso no conviene dejar esa parte sin contenido esperando usar solo el enlace.
- Cuando el Hero y el Banner ya se ven bien en el editor, tendrás una base clara para una portada promocional o una página de campaña.
Resultado esperado:
- Configuraste el Banner con mensaje, enlace, colores y opción de cierre.
- Entendiste cómo se comporta ese bloque en la tienda publicada y que su texto principal es obligatorio para que se vea.
Checklist final rápido
- Inserté un bloque Hero Banner.
- Inserté un bloque Banner.
- Configuré Título y Subtítulo del Hero.
- Completé al menos un CTA del Hero con texto y URL.
- Cargué una Imagen de fondo para el Hero o confirmé que quería usarlo sin imagen.
- Ajusté Altura, Alineación contenido u Overlay del Hero.
- Completé el Texto principal del Banner.
- Si hacía falta, configuré Texto del enlace y URL del enlace.
- Revisé Fondo, Texto y Permitir cerrar en el Banner.
- Validé el resultado en Escritorio, Tablet y Móvil.
Errores comunes
- Buscar "Hero" o "Banner Strip" con el nombre exacto del roadmap dentro de la biblioteca. En la UI real los verás como Hero Banner y Banner.
- Intentar redactar el Hero directamente en el canvas como si fuera el bloque Texto. En este caso el contenido principal se edita desde el inspector lateral.
- Completar el texto de un CTA del Hero o del Banner sin asignarle URL. Si falta uno de los dos datos, el enlace no aparece como debería.
- Esperar un botón "Cambiar imagen" dentro del panel del Hero cuando ya hay fondo cargado. En la interfaz actual debes eliminar la imagen y volver a seleccionarla.
- Pensar que "Permitir cerrar" solo agrega una X de adorno. En la tienda publicada el banner sí puede cerrarse durante la sesión actual.
- Dejar vacío el campo Texto principal del Banner esperando usar solo un enlace. Sin ese texto, el bloque no se renderiza en la tienda publicada.