Configurar logo cloud, video y redes sociales

Qué vas a lograr

• Insertar y configurar un bloque Logos con imágenes, nombres y enlaces opcionales.
• Configurar un bloque Video con proveedor, URL, miniatura y opciones de reproducción.
• Insertar embeds de Instagram, TikTok, YouTube o Spotify, entendiendo que cada bloque acepta solo su propia plataforma.

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 revisar la vista previa de Logos, Video y los embeds sociales mientras los ordenas dentro de la página.
• 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 tres familias de bloques del editor. No entrarás todavía en estilos globales, SEO de página ni integraciones externas.

1) Insertar y configurar el bloque Logos

1. Abre una página dentro del Page Builder v2.
2. Ubica la sección y la columna donde quieras mostrar marcas, aliados o medios en los que aparece tu tienda.
3. Haz clic en Agregar bloque o abre la pestaña Añadir.
4. Busca el bloque Logos y agrégalo.
5. Haz clic sobre el bloque para abrir su configuración en el inspector derecho.
6. En el panel Título, escribe el encabezado del bloque si quieres mostrar un texto sobre la grilla de logos.
7. Luego entra al bloque Logos (0) o al contador que corresponda.
8. Usa Agregar logo para crear el primer ítem. Cada ítem nuevo parte vacío y no exige imagen ni URL al crearlo.
9. En cada fila puedes hacer tres cosas principales: cargar una imagen, escribir el Nombre y completar la URL (opcional).
10. Para cargar la imagen, haz clic en el cuadro del ítem. Flobu abrirá el gestor multimedia para elegir una imagen existente o subir una nueva.
11. Si no cargas imagen, el bloque puede seguir funcionando. En la tienda publicada, ese ítem mostrará el Nombre como texto de respaldo.
12. Si agregas una URL (opcional), ese logo quedará enlazado y se abrirá en una nueva pestaña.
13. Puedes cambiar el orden arrastrando cada ítem desde el ícono de agarre, o eliminar un ítem con el ícono de papelera.
14. Un matiz importante de la interfaz real: aquí no eliges manualmente cuántas columnas tendrá la grilla. Flobu distribuye los logos automáticamente según el ancho de la pantalla.
15. Si dejas el bloque sin ítems, en el editor verás un mensaje como Agrega logos desde el panel lateral. En la tienda publicada, un bloque Logos vacío no se renderiza.

Resultado esperado:

• Insertaste un bloque Logos y agregaste al menos un ítem con imagen o nombre.
• Entendiste que los logos se administran uno por uno desde el inspector y que la grilla pública se adapta automáticamente.

2) Configurar el bloque Video con el proveedor correcto

1. Inserta un nuevo bloque desde Agregar bloque o Añadir.
2. Busca Video y agrégalo en la sección donde quieras mostrarlo.
3. Haz clic sobre el bloque para abrir su panel lateral.
4. En el bloque Video verás primero Miniatura (poster). Esa miniatura es opcional y se selecciona desde el gestor multimedia. Si luego ya no la quieres usar, puedes presionar Quitar miniatura.
5. Debajo completa URL del video. Este campo es el dato más importante del bloque. Si no hay URL, el editor mostrará un placeholder de Agrega una URL de video y la tienda publicada no mostrará el bloque.
6. Luego elige Proveedor. En la interfaz actual puedes seleccionar: YouTube, Vimeo o URL directa.
7. Aquí conviene ser muy preciso: el proveedor debe coincidir con el tipo real de enlace que vas a pegar. Si pegas una URL de Vimeo y dejas YouTube, el resultado puede no verse como esperas.
8. Después ajusta Relación de aspecto. Puedes elegir 16:9, 4:3, 1:1 o 21:9.
9. Luego revisa el bloque Opciones. Ahí puedes activar o desactivar: Reproducción automática, Repetir, Silenciado y Mostrar controles.
10. Cuando el proveedor es URL directa, Flobu usa un reproductor HTML5 y la miniatura tiene un rol más claro antes de reproducir. Cuando el proveedor es YouTube o Vimeo, Flobu construye un embed según ese servicio.
11. Este bloque no incluye título, descripción ni botón propio. Si quieres texto alrededor del video, debes combinarlo con otros bloques de la página.
12. Al final, revisa el resultado en Escritorio, Tablet y Móvil para confirmar que el formato elegido se vea bien.

Resultado esperado:

• Configuraste un bloque Video con URL, proveedor y formato coherentes.
• Entendiste que sin URL del video el bloque no se publica, y que el proveedor debe coincidir con el enlace real.

3) Insertar y validar bloques de redes sociales

1. Abre Agregar bloque o la pestaña Añadir.
2. Busca una de estas opciones reales de la biblioteca: Instagram, TikTok, YouTube o Spotify.
3. Inserta el bloque que corresponda a la publicación o al contenido que quieras mostrar.
4. Este punto es importante: aunque todos pertenecen a la misma familia técnica de redes sociales, en la interfaz se agregan como bloques separados por plataforma.
5. Haz clic sobre el bloque ya insertado. En el inspector verás un único campo: Link de la publicación.
6. Pega ahí la URL exacta del reel, video, pista, playlist o contenido compatible.
7. Flobu valida esa URL cuando sales del campo. Si el enlace no corresponde a la plataforma del bloque, verás el mensaje El link ingresado no es válido y la interfaz restaurará el valor anterior.
8. Por eso no conviene usar un bloque Instagram para pegar un link de TikTok, ni uno de Spotify para un video de YouTube.
9. Un bloque equivale a una sola plataforma por vez. Si quieres mostrar varias redes en una misma página, necesitas insertar varios bloques separados.
10. En el editor, si todavía no hay URL, verás un placeholder No URL provided.
11. En la tienda publicada, los embeds soportados son YouTube, Instagram, TikTok y Spotify. Cada uno usa un ancho máximo distinto según su formato visual, por lo que el bloque no siempre ocupa todo el ancho de la columna aunque esta sea amplia.
12. Revisa el resultado en Escritorio, Tablet y Móvil antes de publicar.
13. Un último límite real del producto: este bloque solo incrusta contenido de la red elegida; no convierte publicaciones en galerías, no mezcla varias redes dentro del mismo bloque y no reemplaza los botones sociales globales del sitio.

Resultado esperado:

• Insertaste al menos un bloque social compatible con la plataforma correcta.
• Entendiste que cada bloque acepta solo enlaces válidos de su propia red y que para varias plataformas debes usar varios bloques.

---

Checklist final rápido

• Inserté un bloque Logos.
• Agregué al menos un logo con imagen o nombre.
• Revisé si algún logo debía llevar URL (opcional).
• Inserté un bloque Video.
• Completé la URL del video.
• Verifiqué que el Proveedor coincida con el enlace real.
• Ajusté la Relación de aspecto y revisé las Opciones del video.
• Inserté al menos un bloque social entre Instagram, TikTok, YouTube o Spotify.
• Pegué una URL válida para la plataforma elegida.
• Revisé el resultado final en Escritorio, Tablet y Móvil.

---

Errores comunes

• Esperar que el bloque Logos obligue a subir una imagen en cada ítem. En Flobu la imagen es opcional y, si falta, puede mostrarse el Nombre como respaldo.
• Pensar que puedes definir manualmente el número de columnas del logo cloud. La grilla pública se organiza automáticamente según el ancho disponible.
• Dejar un bloque Logos vacío y asumir que igual aparecerá en la tienda. Si no tiene ítems, no se renderiza en vivo.
• Pegar una URL en el bloque Video sin revisar el Proveedor. Si el proveedor no coincide con el enlace, el embed puede fallar o comportarse de forma inesperada.
• Creer que la Miniatura (poster) reemplaza por completo la URL del video. Ese campo es opcional; sin URL del video, el bloque no se publica.
• Intentar usar un bloque Instagram con un link de TikTok, YouTube o Spotify. Cada bloque valida solo la red social que le corresponde.
• Querer mostrar varias redes dentro de un solo bloque social. En Flobu necesitas un bloque separado por plataforma o por embed.