Tutorial paso a paso para colocar un flipbook con efecto de paso de página en cualquier página de Squarespace usando un bloque de código. Explica los requisitos del plan, el código para incrustar, el tamaño adaptable, la protección con contraseña, las pruebas en dispositivos móviles y las soluciones a los problemas de visualización más comunes.
Tienes un catálogo, un menú o un portafolio en un PDF, y tu sitio de Squarespace lo muestra como un enlace de descarga simple que nadie abre. Un flipbook soluciona eso. Los visitantes leen directamente en la página, pasan las hojas con un deslizamiento y nunca salen de tu sitio. La herramienta que lo hace posible es el Bloque de código de Squarespace, y con un flipbook creado en Flipbooks AI, todo el proceso toma unos diez minutos.
Este tutorial recorre cada paso: qué necesitas, dónde va el código, cómo ajustar el tamaño y cómo resolver los problemas que más complican las cosas.
Un bloque de código es un bloque de contenido que acepta HTML sin procesar. En lugar de escribir texto o insertar una imagen, pegas un fragmento, y Squarespace lo muestra exactamente como está escrito. El código para incrustar de una plataforma de flipbooks es uno de esos fragmentos. Le indica al navegador que cargue tu flipbook dentro de un marco en tu página.
Un PDF enlazado se abre en una pestaña nueva o se descarga en el dispositivo. En un teléfono, eso suele significar acercar y alejar con los dedos una página minúscula. Un flipbook incrustado se queda dentro de tu diseño, se ajusta a la pantalla y mantiene a la gente más tiempo en tu sitio.
| Método | Experiencia de lectura | Se queda en tu sitio | Apto para móviles |
|---|---|---|---|
| Enlace de descarga de PDF | Abre un archivo aparte | No | Deficiente |
| Galería de imágenes de páginas | Desplazamiento manual | Sí | Regular |
| Flipbook incrustado | Vista con paso de página | Sí | Excelente |
Los bloques de código están disponibles en el plan Business y superiores. Los planes Personal no pueden ejecutar código personalizado. Revísalo antes de construir nada, porque es la razón número uno por la que el bloque parece no existir.
⚠️ Si solo ves el bloque de Markdown y no la opción de código, es probable que tu plan no incluya código personalizado. Mejora el plan en Configuración y luego en Facturación.
Reúne tres cosas primero. Así te ahorras volver atrás más adelante.
Exporta con una resolución razonable. Para la mayoría de los catálogos, un archivo de entre 5 y 25 MB se ve nítido y carga rápido. Mantén las páginas del mismo tamaño, porque las páginas de tamaños mezclados hacen que la animación de paso se vea irregular.
Decide si el flipbook ocupará todo el ancho de la página o irá junto a un texto. El ancho completo es ideal para catálogos y revistas. Una colocación a medio ancho funciona bien para una vista previa de muestra junto a un formulario de registro.
El código para incrustar no existe hasta que existe el flipbook. El proceso es corto.
💡 Haz que el color de fondo del flipbook coincida con el color de la sección de Squarespace. Así el marco desaparece y el flipbook parece parte nativa de la página.
Los cambios que hagas después de incrustarlo se actualizan automáticamente, así que puedes corregir erratas más adelante. Aun así, configura lo básico ahora: logotipo, color y la página de inicio. Si tu PDF tiene enlaces o videos, la plataforma los mantiene activos, y también puedes añadir audio y video dentro de las páginas.
Este es el corazón del proceso. Sigue los pasos en orden.
La herramienta Incrustar flipbook en un sitio web explica las opciones si quieres verlas antes de elegir.
✅ Buena práctica: deja desactivado Mostrar fuente. Si queda activado, los visitantes verán el código sin procesar en lugar de tu flipbook.
Esta es una vista rápida de solución de problemas de lo que hace cada ajuste.
| Ajuste | Qué hace | Valor recomendado |
|---|---|---|
| Mostrar fuente | Muestra el código como texto | Desactivado |
| Ancho del bloque | Define qué tan ancho es el marco | 100% |
| Alto del bloque | Define qué tan alto es el marco | 600 a 800 px en equipo de escritorio |
| Fondo de la sección | Colorea el área alrededor del marco | Igual al color del flipbook |
Un marco demasiado bajo recorta las páginas. Uno demasiado alto deja un espacio vacío. Ambos se ven descuidados.
Squarespace no ajusta automáticamente el tamaño de los iframes. Define un alto fijo en el código para incrustar, por ejemplo height="700". Una buena regla es tomar el ancho de tu área de contenido y multiplicarlo por 0,65 para una vista de doble página.
Envuelve el iframe en un contenedor con un ancho en porcentaje, para que se reduzca en los teléfonos. Muchas personas también añaden un alto mayor para móviles usando un bloque corto de estilos en CSS personalizado.
💡 Abre tu página en un teléfono real, no solo en el modo de vista previa del navegador. Los dispositivos reales revelan superposiciones de la barra de herramientas que la vista previa no muestra.
| Caso de uso | Colocación | Altura sugerida |
|---|---|---|
| Catálogo de productos | Sección de ancho completo | 750 px |
| Menú de restaurante | Centrado, 80% de ancho | 650 px |
| Portafolio de fotografía | Sección a sangre completa | 800 px |
Ver casos de uso reales facilita la decisión.
Un restaurante puede incrustar un menú de temporada creado con el Creador de flipbooks de menús de restaurante. Cuando el menú cambia, edita el flipbook una vez y la página de Squarespace se actualiza sola, sin código nuevo.
Un agente inmobiliario puede colocar un folleto de propiedad creado con el Creador de folletos inmobiliarios en cada página de inmueble. Los compradores revisan planos y fotos sin descargar nada.
Un fotógrafo puede crear una galería con la herramienta Portafolio de fotografía y luego incluirla en una página de portafolio. Una tienda boutique puede usar el creador de Catálogo de productos para un lookbook mayorista.
No todos los flipbooks deben ser públicos. Las listas de precios mayoristas, las propuestas para clientes y los manuales internos necesitan protección.
En Flipbooks AI, activa la protección con contraseña en la configuración de compartir. Los visitantes ingresan la contraseña antes de que se carguen las páginas. Combínalo con un área de miembros de Squarespace o una página oculta para más privacidad.
En el plan Professional puedes recopilar correos antes de que los lectores abran el flipbook, y ver qué páginas reciben más atención. Revisa los planes y precios para comparar lo que incluye cada nivel.
| Función | Standard | Professional |
|---|---|---|
| Flipbooks ilimitados | Sí | Sí |
| Sin marca de agua | Sí | Sí |
| Protección con contraseña | Sí | Sí |
| Analítica | Básica | Detallada |
| Generación de contactos | No | Sí |
| Descarga sin conexión | Sí | Sí |
Incluso una incrustación sencilla puede fallar. Estos son los sospechosos habituales.
Mostrar fuente está activado. Abre el bloque, desactívalo y guarda.
Comprueba que copiaste el fragmento completo, incluida la etiqueta de cierre. Un pegado incompleto produce un marco vacío. Confirma también que el flipbook está publicado y no configurado como privado sin contraseña.
Aumenta el valor de alto o reduce la cantidad de botones de la barra de herramientas en la configuración de tu flipbook. Menos botones dejan más espacio para la página.
Squarespace a veces oculta las incrustaciones mientras editas. Previsualiza la página o visita la URL publicada. Ahí el flipbook sí se carga.
Un marco incrustado no se lee igual que el texto de una página, así que rodéalo de palabras reales. Añade un encabezado sobre el flipbook, dos o tres oraciones que describan el contenido y un enlace de texto al PDF para los lectores que lo prefieran.
💡 Un flipbook sin texto alrededor da muy poco material para que los buscadores indexen. Un párrafo introductorio corto soluciona eso en menos de un minuto.
La mejor parte de esta configuración es el mantenimiento. Como el bloque de código carga tu flipbook desde un enlace activo, nunca tienes que volver a tocar Squarespace cuando cambia el contenido. Reemplaza el PDF en Flipbooks AI y la página lo refleja de inmediato. Los menús de temporada, los catálogos trimestrales y las listas de precios actualizadas se mantienen al día con una sola subida.
¿Listo para poner tu primer flipbook en tu sitio? Crea una cuenta gratis en Flipbooks AI, sube tu PDF y pega el código para incrustar en un bloque de código de Squarespace. Explora la lista completa de herramientas de flipbook para encontrar la plantilla adecuada para tu contenido, y compara los planes y precios cuando quieras analítica y captación de contactos.
Elige tu idioma
