Usar HTML y CSS personalizado con cuidado

Qué vas a lograr

• Insertar un bloque HTML solo cuando sea necesario.
• Revisar su seguridad, presentación y vista previa.
• Confirmar si la página usa CSS personalizado antes de publicar.

---

Paso a paso en Flobu

Cómo funciona la interfaz de Flobu en este tutorial

• Menú lateral: entra desde Tienda online > Páginas o Tienda online > Editar sitio.
• Panel central: trabajarás en el canvas del editor visual.
• Panel izquierdo: usarás Añadir y Estructura.
• Panel derecho: configurarás el bloque HTML.
• Acciones clave: usarás HTML, Código HTML, Insertar ejemplo, Limpiar, Vista previa, Contenido avanzado, Permitir CSS personalizado y Publicar cambios.

---

1) Decidir si realmente necesitas HTML

1. Abre la página en el editor visual.
2. Revisa si puedes resolver lo que necesitas con bloques nativos como Texto, Imagen, Botón, Video, Tabs o Acordeón.
3. Usa HTML solo para un widget, embed o código entregado por un proveedor confiable.
4. Evita usar HTML para construir páginas completas, menús, footers o layouts que el editor ya puede crear.
5. Si vas a pegar código externo, confirma de dónde viene y qué hace.

Resultado esperado:

• Tienes claro por qué usarás HTML y no un bloque normal del editor.

---

2) Insertar y configurar el bloque HTML

1. Abre Añadir.
2. Busca o selecciona el bloque HTML dentro de Contenido.
3. Insértalo en la sección donde lo necesitas.
4. Haz clic en el bloque para abrir su configuración.
5. En Seguridad, lee el aviso: el HTML se muestra aislado del resto del sitio.
6. Mantén Mostrar aviso en canvas activo si quieres recordar que ese bloque usa código especial.
7. En Código HTML, pega tu código.
8. Usa Insertar ejemplo solo si necesitas partir desde una base.
9. Usa Limpiar si quieres borrar el contenido del bloque.
10. En Texto auxiliar, completa Caption opcional si necesitas una nota bajo el embed.
11. En Presentación, ajusta Altura, Ancho, Alineación, Radio y Estilo.
12. Revisa Vista previa antes de continuar.

Resultado esperado:

• El bloque HTML se ve correctamente en el canvas y no desordena la página.

---

3) Revisar CSS personalizado y publicar

1. Abre Estructura.
2. Entra a Preferencias de página.
3. Busca la sección Contenido avanzado.
4. Lee el aviso sobre HTML y CSS personalizado.
5. Si la página ya contiene CSS personalizado, Flobu mostrará el mensaje correspondiente.
6. Activa Permitir CSS personalizado solo si sabes que esa página debe usarlo.
7. Si está Inactivo y la página usa CSS personalizado, Flobu puede bloquear la publicación.
8. Usa Vista previa para revisar el resultado completo.
9. Si todo se ve bien, haz clic en Publicar cambios.

Resultado esperado:

• Publicaste una página revisada, sin dejar contenido avanzado bloqueado.

---

Checklist final rápido

• Revisé si podía usar bloques nativos antes de usar HTML.
• Inserté el bloque HTML desde Añadir.
• Pegué el código en Código HTML.
• Revisé Seguridad y Vista previa.
• Ajusté Altura, Ancho, Alineación, Radio y Estilo.
• Revisé Preferencias de página > Contenido avanzado.
• Activé Permitir CSS personalizado solo si era necesario.
• Validé con Vista previa antes de publicar.
• Publiqué con Publicar cambios.

---

Errores comunes

• Pegar código de una fuente desconocida.
• Usar HTML para algo que ya existe como bloque nativo.
• No revisar la versión móvil después de pegar un embed.
• Creer que CSS personalizado siempre está permitido. Debe estar activo si la página lo usa.
• Publicar sin revisar los mensajes de Contenido avanzado.
• Esperar que el CSS de la página controle todo dentro del bloque HTML. Ese contenido se muestra de forma aislada.