Usar HTML y CSS personalizado con cuidado

Qué vas a lograr

• Habilitar de forma consciente las capacidades avanzadas Permitir HTML embebido y Permitir CSS personalizado a nivel de página.
• Insertar y editar un bloque Código HTML entendiendo cómo se comporta realmente dentro del editor y del sitio publicado.
• Distinguir cuándo conviene usar controles nativos del builder y cuándo tiene sentido recurrir a HTML o CSS personalizado, considerando los límites actuales de la interfaz.

---

Paso a paso en Flobu

Cómo funciona la interfaz de Flobu en este tutorial

• Menú lateral: usarás Estructura, luego Preferencias de página y Añadir para trabajar con contenido avanzado dentro del Page Builder v2.
• Panel central: en el canvas verás el bloque Código HTML, su placeholder de seguridad y la vista final cuando la capacidad esté habilitada.
• Acciones clave: usarás los switches de Contenido avanzado (unsafe), el editor de código del bloque HTML, Vista previa y Publicar cambios.
• Alcance de este tutorial: aquí te enseñaré el flujo real que hoy existe. Flobu sí soporta HTML y CSS personalizado a nivel de contenido, pero en esta interfaz principal actual no aparece un editor visible dedicado para escribir CSS personalizado manualmente.

---

1) Activar contenido avanzado solo para la página que realmente lo necesita

1. Abre la página correspondiente dentro del Page Builder v2.
2. En el lateral izquierdo, entra a Estructura.
3. Luego abre Preferencias de página.
4. Desplázate hasta la sección Contenido avanzado (unsafe).
5. Verás un aviso real del editor: "HTML embebido y CSS personalizado quedan bloqueados para publicar si el contenido los usa sin habilitación explícita".
6. Ahí tienes dos controles separados: Permitir HTML embebido y Permitir CSS personalizado.
7. Activa Permitir HTML embebido solo si esta página realmente va a usar un bloque Código HTML.
8. Activa Permitir CSS personalizado solo si sabes que la página necesita CSS personalizado.
9. Este punto es importante: la habilitación es por página, no para todo el sitio. Si una página usa HTML o CSS personalizado y el permiso correspondiente está inactivo, Flobu puede dejar el borrador en estado de advertencia y bloquear la publicación.
10. Si el contenido ya contiene algo avanzado no habilitado, verás mensajes en rojo dentro de esta misma sección.
11. Antes de seguir, deja claro para ti mismo por qué vas a usar estas capacidades. Si el objetivo se puede resolver con bloques nativos, colores, layouts o estilos del inspector, normalmente esa sigue siendo la ruta más segura.

Resultado esperado:

• Activaste solo los permisos avanzados que de verdad necesita la página.
• Entendiste que HTML y CSS personalizado no son capacidades globales del sitio, sino permisos explícitos por página.

---

2) Insertar y editar un bloque Código HTML sin perder control del resultado

1. Vuelve a la pestaña Añadir.
2. Busca el bloque Código HTML dentro de la categoría Avanzado.
3. Si Permitir HTML embebido sigue inactivo, ese bloque queda bloqueado en la biblioteca. Al intentar usarlo, Flobu te devuelve a Preferencias de página para que actives el permiso.
4. Una vez habilitado, inserta el bloque en la columna donde lo necesites.
5. Selecciona el bloque en el canvas.
6. En el lateral verás el editor Código HTML. Ahí puedes escribir o pegar tu snippet dentro del editor de código.
7. Flobu actualiza el bloque mientras editas. Si el permiso HTML embebido está activo, el bloque deja de mostrar el aviso y pasa a renderizar el contenido.
8. Aquí hay un matiz muy importante del producto: el bloque Código HTML no se mezcla directamente con el DOM principal de la página. Flobu lo renderiza dentro de un iframe aislado. Eso ayuda a contener el embed, pero también significa que no todo el estilo general del builder entra automáticamente en ese contenido.
9. Si el snippet tiene links, su comportamiento por defecto es abrir en una pestaña nueva.
10. Si dentro del HTML agregas imágenes, videos o iframes, Flobu limita su ancho para que no se desborden del bloque.
11. Usa este bloque para casos realmente puntuales: embeds de terceros confiables, widgets específicos o snippets avanzados que no existen como bloque nativo. Evita usarlo para construir páginas completas, menús, footers o layouts enteros que ya tienen soporte nativo.

Resultado esperado:

• Insertaste un bloque Código HTML real y entendiste cómo se edita desde el sidebar.
• Confirmaste que el embed se ejecuta dentro de un iframe aislado y no como contenido común del builder.

---

3) Entender el alcance real de CSS personalizado y validar antes de publicar

1. Vuelve a Preferencias de página y revisa el switch Permitir CSS personalizado.
2. En la interfaz actual, ese permiso sí existe y participa en la validación de publicación.
3. Pero hay que ser muy claro con el alcance real del producto hoy: en esta interfaz principal del editor no aparece un campo visible dedicado para escribir CSS personalizado manualmente.
4. Eso significa que el flujo visible para usuarios del dashboard hoy se concentra en:
   • habilitar o deshabilitar el permiso;
   • detectar cuándo la página ya contiene CSS personalizado;
   • y evitar publicar si ese contenido avanzado no fue autorizado.
5. Si una página ya trae CSS personalizado, Flobu lo aplica solo cuando Permitir CSS personalizado está activo.
6. Además, ese CSS no se inyecta libremente sobre todo el sitio. Flobu lo sanea y lo encierra dentro del root del builder. En la práctica, eso busca que las reglas afecten esta página renderizada y no el resto del storefront fuera de ese contenedor.
7. También elimina construcciones peligrosas como @import, @font-face, expression(...), behavior y URLs javascript: o data:.
8. Otro límite importante: el CSS personalizado de página no es la herramienta correcta para estilizar por dentro el bloque Código HTML. Ese bloque vive en un iframe, así que su contenido no hereda directamente ese CSS con alcance limitado del builder.
9. Si tu necesidad es ajustar un bloque nativo de la página, el CSS personalizado puede tener sentido en un flujo técnico controlado. Si tu necesidad es estilizar un embed HTML aislado, normalmente tendrás que resolverlo dentro del propio snippet.
10. Antes de publicar, usa Vista previa. Si hay contenido avanzado deshabilitado, Flobu te mostrará el problema y no te dejará cerrar el flujo como si estuviera listo.
11. Solo cuando el comportamiento visual y la seguridad estén claros, usa Publicar cambios.

Resultado esperado:

• Entendiste que CSS personalizado sí existe como capacidad soportada, pero no como editor visible dedicado en esta interfaz principal actual.
• Diferenciaste correctamente entre estilos de página con alcance limitado y contenido HTML embebido dentro de un iframe.

---

Checklist final rápido

• Revisé Preferencias de página > Contenido avanzado (unsafe) antes de insertar contenido técnico.
• Activé Permitir HTML embebido solo en la página que lo necesitaba.
• Entendí que el bloque disponible en la biblioteca se llama Código HTML.
• Verifiqué que el bloque deja de estar bloqueado solo después de habilitar el permiso correcto.
• Probé el resultado del bloque HTML dentro del canvas.
• Entendí que ese bloque se renderiza dentro de un iframe aislado.
• Revisé si la página usa o no CSS personalizado antes de publicar.
• Entendí que el CSS personalizado se limita al root del builder y no estiliza automáticamente el contenido interno del iframe.
• Usé Vista previa antes de Publicar cambios.
• Evité resolver con HTML o CSS personalizado algo que ya se podía hacer con bloques nativos del editor.

---

Errores comunes

• Insertar el bloque Código HTML sin haber activado antes Permitir HTML embebido. En ese caso el bloque queda bloqueado o muestra un placeholder en vez del contenido real.
• Pensar que HTML y CSS personalizado son permisos globales del sitio. En Flobu se habilitan por página.
• Suponer que el CSS personalizado se escribe desde una caja visible del editor principal. Hoy esa caja no aparece en la interfaz principal actual.
• Creer que el CSS personalizado de la página va a estilizar por dentro el bloque Código HTML. Ese embed vive dentro de un iframe aislado.
• Publicar sin revisar los mensajes de Contenido avanzado (unsafe). Si el contenido avanzado está presente pero no autorizado, Flobu bloquea la publicación.
• Usar HTML para construir elementos que el Page Builder v2 ya resuelve mejor con bloques nativos, lo que vuelve más frágil el mantenimiento futuro de la página.