Agregar bloques de texto, imagen y boton

Qué vas a lograr

• Insertar bloques de Texto, Imagen y Botón en la columna correcta de una página.
• Editar el contenido del bloque de texto directamente en el canvas y cargar una imagen real desde el gestor multimedia.
• Configurar un botón con texto, enlace, estilo y alineación usando los controles actuales del inspector.

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 que tenga al menos una sección y una columna disponible.
• Panel central: usarás el canvas con botones Agregar bloque y el panel izquierdo Añadir, donde Flobu muestra la biblioteca de bloques.
• Acciones clave: insertarás bloques desde Añadir o desde Agregar bloque, editarás Texto directamente en el canvas y configurarás Imagen y Botón desde el inspector derecho.
• Alcance de este tutorial: aquí trabajarás solo con los tres bloques base. No entrarás todavía a bloques más avanzados como Hero, Tarjetas, Productos o Formulario.

1) Insertar los bloques en la columna correcta

1. Abre una página que ya tenga una sección con al menos una columna.
2. Si la columna está vacía, Flobu mostrará una caja punteada con Agregar bloque.
3. Si la columna ya tiene contenido, verás botones Agregar bloque entre bloques y al final de la columna.
4. Haz clic en uno de esos puntos de inserción para fijar el destino exacto.
5. También puedes abrir la pestaña Añadir en el panel izquierdo.
6. Cuando el destino está bien definido, Flobu muestra el bloque Destino y te indica dónde se insertará el nuevo componente.
7. Si la sección tiene más de una columna y el destino aún no está resuelto, el panel te pedirá elegir Columna 1, Columna 2 o la que corresponda.
8. En la biblioteca, busca Texto.
9. Haz clic sobre Texto para insertarlo.
10. Repite el mismo proceso con Imagen.
11. Luego repítelo con Botón.
12. Otra forma válida es arrastrar los bloques desde Añadir hacia el canvas, pero para este tutorial el flujo más claro es usar el destino fijo con Agregar bloque.
13. Si intentas insertar desde Añadir sin destino, Flobu no adivina la posición: te mostrará un mensaje como "Arrastra al canvas o usa un botón + para fijar el destino exacto."
14. Cuando la inserción se realiza bien, cada bloque aparece dentro de la columna en el orden elegido.

Resultado esperado:

• Insertaste un bloque de Texto, uno de Imagen y uno de Botón.
• Entendiste que en Flobu primero se define el destino de inserción y luego se elige el bloque.

2) Editar el bloque de texto y cargar la imagen

1. Haz clic dentro del bloque Texto que acabas de insertar.
2. A diferencia de otros bloques, aquí el contenido se edita directamente sobre el canvas.
3. Flobu abrirá el editor enriquecido en el mismo lugar del texto.
4. Encima del bloque verás un menú flotante con controles como:
   • Tipos de párrafo y encabezados: P, H1, H2, H3, H4, H5, H6.
   • Formato: negrita, cursiva, subrayado y tachado.
   • Alineación.
   • Inserción de imagen.
   • Color de texto.
5. Escribe el contenido que necesitas y aplica el formato desde ese menú flotante.
6. Si seleccionas el bloque Texto desde el inspector, Flobu solo te recordará la regla real del producto: "Haz clic sobre el bloque de texto en el canvas para editar su contenido directamente."
7. Ahora pasa al bloque Imagen.
8. Haz clic sobre la imagen o sobre su placeholder. Si aún no tiene una imagen cargada, verás un cuadro de imagen vacío en el canvas.
9. Al hacer clic, Flobu abrirá el gestor multimedia.
10. Dentro de ese modal puedes trabajar con imágenes existentes o usar Subir imagen.
11. Cuando selecciones una imagen, Flobu la insertará dentro del bloque.
12. Luego, con el bloque Imagen seleccionado, usa el inspector derecho para ajustar:
    • URL de destino.
    • Abrir en nueva pestaña.
    • Texto alternativo (SEO).
    • Alineación.
    • Ancho máximo.
13. Este detalle es importante: si insertas una imagen desde el menú flotante del bloque Texto, esa imagen queda dentro del texto enriquecido. Si quieres una imagen independiente con su propio enlace, alt y ancho máximo, debes usar el bloque Imagen.

Resultado esperado:

• Editaste el bloque Texto directamente en el canvas.
• Cargaste una imagen real y entendiste la diferencia entre una imagen dentro del texto y el bloque Imagen como componente separado.

3) Configurar el bloque de botón y dejar el conjunto listo

1. Haz clic en el bloque Botón.
2. En el inspector derecho verás el panel Contenido.
3. En Texto del botón, escribe el CTA real que quieres mostrar, por ejemplo: Ver catálogo, Comprar ahora o Contactar.
4. En URL, usa el selector de enlaces de Flobu. Ese selector permite enlazar:
   • Páginas del sitio.
   • Productos.
   • Categorías.
   • Marcas.
   • URL personalizada / externa.
5. Si el enlace va a otro sitio web, activa Abrir en nueva pestaña.
6. Luego baja al panel Estilo. Ahí puedes elegir el tipo visual del botón:
   • Primario.
   • Secundario.
   • Contorno.
   • Fantasma.
7. Después ajusta Tamaño:
   • Pequeño.
   • Mediano.
   • Grande.
8. Finalmente elige Alineación: Izquierda, Centro o Derecha.
9. Revisa el resultado en el canvas. En el editor, el botón se muestra como vista previa visual del CTA; no esperes navegar desde ahí como si ya estuvieras en la tienda publicada.
10. Si quieres validar cómo se verá junto al texto y la imagen, cambia también entre Escritorio, Tablet y Móvil.
11. Cuando el conjunto se vea bien, ya tendrás una base real para seguir construyendo la sección con bloques simples.

Resultado esperado:

• Dejaste el bloque Botón con texto, enlace, estilo y alineación configurados.
• Entendiste que dentro del editor el botón funciona como preview visual y que la validación final del enlace se hace en vista previa o en el sitio publicado.

---

Checklist final rápido

• Inserté un bloque de Texto.
• Inserté un bloque de Imagen.
• Inserté un bloque de Botón.
• Usé Agregar bloque o el panel Añadir con un destino correcto.
• Edité el contenido del bloque Texto directamente en el canvas.
• Usé el gestor multimedia para seleccionar o subir una imagen.
• Configuré el Texto alternativo (SEO) y, si hacía falta, un enlace para la imagen.
• Configuré el Texto del botón y su URL.
• Ajusté estilo, tamaño y alineación del botón.
• Entendí la diferencia entre editar dentro del canvas y configurar desde el inspector.

---

Errores comunes

• Intentar insertar bloques desde Añadir sin haber fijado un destino. En Flobu primero debes usar un botón Agregar bloque o arrastrar al canvas.
• Buscar un campo de texto lateral para el bloque Texto. Ese bloque se edita directamente en el canvas con su menú flotante.
• Cargar una imagen dentro del bloque Texto pensando que es lo mismo que usar el bloque Imagen. Son dos usos distintos y no comparten la misma configuración.
• Dejar el botón con la URL por defecto # y creer que ya está listo para producción. Debes asignarle un destino real.
• Pensar que el botón debería abrir el enlace dentro del propio editor. En el canvas se muestra únicamente como vista previa del bloque.
• No completar el Texto alternativo (SEO) de la imagen cuando esa imagen es importante para accesibilidad y contexto.