Un tutorial paso a paso para colocar un flipbook con efecto de paso de página en tu sitio de Wix usando el elemento HTML incrustado. Explica cómo crear el flipbook, pegar el código para incrustar, ajustar su tamaño en equipo de escritorio y dispositivos móviles, y solucionar problemas comunes como los marcos en blanco.
Tienes un catálogo, menú o folleto en PDF y quieres que los visitantes lo hojeen directamente en tu página de Wix, en lugar de descargar un archivo pesado. La buena noticia: lleva unos diez minutos. Crea el flipbook con Flipbooks AI, copia su código para incrustar y colócalo en Wix con el elemento HTML incrustado. Este tutorial recorre cada clic, además de los detalles de tamaño y solución de problemas que la mayoría de los tutoriales omiten.
Wix maneja muy bien el texto, las galerías y las tiendas. Los PDF son su punto débil. Un visitante que hace clic en un enlace PDF sale de tu sitio, espera a que se descargue el archivo y, a menudo, nunca vuelve. Un flipbook lo mantiene en la página, con pasos de página realistas, zoom y carga rápida.
Esto es lo que ganas al incrustar en lugar de enlazar:
| Tipo de negocio | Qué incrustar | Dónde encaja en Wix |
|---|---|---|
| Restaurante o cafetería | Menú | Página de menú o sección de la página de inicio |
| Boutique o tienda en línea | Catálogo de productos | Página de destino de la tienda |
| Fotógrafo o diseñador | Portafolio | Página de portafolio |
| Agente inmobiliario | Folleto de la propiedad | Página de propiedades |
| Consultor o agencia | Perfil de la empresa | Página Acerca de |
| Profesor o formador | Material del curso | Página de miembros o recursos |
💡 Consejo profesional: Elige una página y un flipbook para tu primer intento. Cuando el proceso te resulte familiar, repetirlo en otras páginas tarda dos minutos.
Reúne primero estos elementos para no detenerte a mitad de camino:
Un archivo de origen limpio da un mejor flipbook. Revisa estos puntos antes de subirlo:
Esta parte ocurre fuera de Wix. Conviertes el PDF en un flipbook para compartir y copias el código para incrustar.
Antes de incrustar, ajusta los detalles que hacen que parezca parte de tu marca:
✅ Buena práctica: Haz que el fondo del flipbook coincida con el fondo de la sección de Wix. Así el incrustado se integra en lugar de parecer una caja puesta sobre la página.
Abre las opciones para compartir y busca el código para incrustar. Es un fragmento corto, normalmente una etiqueta iframe. Copia todo, desde el corchete de apertura hasta la etiqueta de cierre. La herramienta Incrustar flipbook en sitio web explica las opciones con más detalle.
Ahora cambia al editor de Wix. La redacción difiere un poco entre el Editor clásico de Wix y Wix Studio, así que se indican ambos caminos.
Wix te ofrece dos modos dentro del elemento. Elegir el correcto evita la mayoría de los errores.
| Modo | Ideal para | Qué pegas |
|---|---|---|
| Código | Fragmentos de incrustación con una etiqueta iframe | El código para incrustar completo |
| Dirección del sitio web | Un enlace simple a una página alojada | Solo la URL |
Si tienes el código para incrustar, usa Código. Si solo tienes un enlace, Dirección del sitio web también funciona, aunque tienes menos control sobre el marco.
Un flipbook demasiado pequeño se ve apretado, y uno demasiado grande saca el contenido de la pantalla. Wix te deja arrastrar los controladores del elemento, y el código para incrustar también incluye valores de ancho y alto.
| Dispositivo | Ancho sugerido | Alto sugerido |
|---|---|---|
| Equipo de escritorio, sección de ancho completo | 100% de la franja | 600 a 700 px |
| Equipo de escritorio, dentro de una columna | 700 a 900 px | 500 a 600 px |
| Tableta | 90% de la pantalla | 450 a 550 px |
| Teléfono | 100% de la pantalla | 400 a 500 px |
💡 Consejo profesional: Usa el editor móvil de Wix para definir una altura distinta para los teléfonos. Un flipbook que se ve perfecto en el equipo de escritorio puede resultar alto en una pantalla pequeña.
Hacer clic en Vista previa en el editor es la primera prueba. No te detengas ahí. Publica la página y luego abre el enlace publicado en un teléfono y en otro navegador.
Repasa esta breve lista de verificación:
Si respondiste que sí a las cinco, ya terminaste.
Incluso una configuración limpia puede tropezar con pequeños obstáculos. Estos son los problemas que más reporta la gente, con la solución de cada uno.
La razón más probable es que usaste Dirección del sitio web con un fragmento de código, o pegaste solo una parte del código. Vuelve a abrir el elemento, cambia a Código y pega de nuevo el fragmento completo. Confirma también que el flipbook esté publicado y no configurado como privado.
Aumenta la altura del elemento HTML incrustado en el lienzo. El iframe no puede ser más grande que su contenedor, así que un elemento bajo recorta la parte inferior del libro.
Publica el sitio después de guardar los cambios. La vista previa y la versión publicada pueden diferir hasta que publiques. Borra la caché de tu navegador si todavía ves el estado anterior.
Cambia al editor móvil y ajusta el tamaño del elemento por separado. Wix guarda los diseños móviles por su cuenta.
| Problema | Causa probable | Solución rápida |
|---|---|---|
| Marco en blanco | Modo incorrecto o código incompleto | Usa el modo Código y pega el fragmento completo |
| Páginas recortadas | Elemento demasiado bajo | Aumenta la altura del elemento |
| Se ve la versión anterior | Sitio no publicado | Publica y actualiza |
| Muy pequeño en teléfonos | Tamaño solo para escritorio | Ajusta en el editor móvil |
| Falta la solicitud de contraseña | Flipbook sin protección | Define una contraseña en la configuración del flipbook |
⚠️ Advertencia: No pegues el código para incrustar en un cuadro de texto simple ni en un elemento de texto. Aparecerá como código visible en lugar de mostrarse. Usa siempre el elemento HTML.
Ver cómo otros usan el mismo método facilita imaginar tu propia página.
Un fotógrafo de bodas exporta un portafolio de 30 páginas y lo crea con la herramienta Portafolio de fotografía. En Wix, el flipbook va en una franja de ancho completo de la página de portafolio. Los visitantes ven el trabajo en formato de libro, que se parece más a un álbum impreso que a una galería con desplazamiento.
Una dueña de cafetería sube el menú semanal con el Creador de flipbooks de menú de restaurante. Cuando cambian los precios, reemplaza el PDF en el panel del flipbook y la página de Wix se actualiza sola. No necesita editar el sitio.
Una pequeña tienda publica un lookbook de temporada con el Diseñador de lookbooks interactivos y lo coloca en la página de destino de la tienda, encima de la cuadrícula de productos. Los compradores primero hojean las páginas con estilo y luego hacen clic para comprar.
| Objetivo | Herramienta sugerida | Página de Wix |
|---|---|---|
| Mostrar productos | Catálogo de productos | Tienda o inicio |
| Compartir un menú | Diseñador de flipbooks de menú | Menú |
| Presentar una empresa | Creador de flipbooks de informes corporativos | Acerca de |
| Promocionar una propiedad | Folleto inmobiliario | Propiedades |
Una vez que funciona el incrustado básico, algunas opciones aportan un valor real a tu página de Wix:
Consulta los planes y precios para comparar lo que incluye cada nivel.
| Función | Uso básico | Uso Professional |
|---|---|---|
| Incrustar en Wix | Sí | Sí |
| Sin marcas de agua | Sí | Sí |
| Protección con contraseña | Sí | Sí |
| Estadísticas | Limitadas | Informes completos |
| Generación de contactos | No | Sí |
Un flipbook debe aportar valor, no peso. Algunos hábitos mantienen las cosas ágiles:
Ya tienes la rutina completa: prepara el PDF, crea el flipbook, copia el código para incrustar, añade el elemento HTML incrustado en Wix, pégalo en modo Código, ajusta el tamaño y prueba en un teléfono. Cada flipbook que hagas después repetirá los mismos pocos clics.
¿Listo para publicar el primero? Empieza gratis en Flipbooks AI, explora todas las herramientas y plantillas disponibles o compara los planes y precios para elegir lo que funcione para tu sitio.
Elige tu idioma
