Agregar bloques de texto, imagen y botón

Qué vas a lograr

• Insertar bloques de Texto, Imagen y Botón en una página.
• Editar el contenido del texto y cargar una imagen.
• Configurar el texto, enlace, estilo y alineación del botón.

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: trabajarás en el canvas, usando los botones Agregar bloque.
• Acciones clave: usarás Añadir, Texto, Imagen, Botón, Seleccionar, URL, Estilo y Alineación.

1) Insertar los tres bloques

1. Abre una página en el editor visual de Flobu.
2. Ubica la sección y la columna donde quieres agregar contenido.
3. Haz clic en Agregar bloque.
4. En la pestaña Añadir, busca o selecciona Texto.
5. Repite el proceso para agregar Imagen.
6. Repite el proceso para agregar Botón.
7. Si prefieres, también puedes arrastrar cada bloque desde Añadir hacia el canvas.

Resultado esperado: La página tiene un bloque de Texto, uno de Imagen y uno de Botón en el orden que elegiste.

2) Editar el texto y cargar la imagen

1. Haz clic en el bloque Texto.
2. Escribe directamente sobre el texto en el canvas o usa el panel Contenido.
3. Ajusta la alineación, ancho de lectura o color base si lo necesitas.
4. Haz clic en el bloque Imagen.
5. Usa Seleccionar para abrir el gestor de imágenes.
6. Elige una imagen existente o sube una nueva.
7. Completa el campo Texto alternativo si la imagen entrega información importante.
8. Si la imagen solo es decorativa, activa la opción Imagen decorativa.

Resultado esperado: El texto muestra el contenido correcto y la imagen quedó cargada con su configuración básica.

3) Configurar el botón

1. Haz clic en el bloque Botón.
2. En Texto del botón, escribe el llamado a la acción, por ejemplo Comprar ahora o Ver productos.
3. En URL, selecciona una página, producto, categoría, marca o ingresa una URL personalizada.
4. Activa Abrir en nueva pestaña solo si el enlace lleva fuera de tu tienda.
5. En Estilo, elige la apariencia del botón.
6. En Tamaño y Alineación, ajusta cómo se verá dentro de la sección.
7. Revisa el resultado en el canvas.

Resultado esperado: El botón tiene texto, destino, estilo y posición definidos.

---

Checklist final rápido

• Inserté un bloque de Texto.
• Inserté un bloque de Imagen.
• Inserté un bloque de Botón.
• Edité el texto desde el canvas o desde Contenido.
• Seleccioné o subí una imagen.
• Revisé el Texto alternativo o marqué la imagen como decorativa.
• Configuré el Texto del botón.
• Definí una URL real para el botón.
• Revisé el resultado en el canvas.

---

Errores comunes

• Insertar el bloque en la columna equivocada. Usa Agregar bloque en el punto exacto donde quieres colocarlo.
• Dejar una imagen importante sin Texto alternativo. Siempre completa este campo cuando la imagen transmite información relevante.
• Usar el bloque Texto para insertar una imagen que debería ser un bloque independiente.
• Dejar el botón sin una URL real. Asegúrate de definir el destino antes de publicar.
• Probar el enlace del botón dentro del editor. El canvas muestra una vista previa; valida el enlace en la vista previa o en el sitio publicado.