Cómo insertar un flipbook en WordPress

¿Por qué insertar un flipbook en tu sitio WordPress?

Los PDF estáticos enterrados detrás de enlaces de descarga no le hacen justicia a tu contenido. Los visitantes hacen clic, esperan a que se descargue el archivo, lo abren en una aplicación separada y — la mayoría de las veces — nunca regresan a tu sitio. Insertar un flipbook interactivo directamente en tu página de WordPress cambia las reglas del juego.

Con un flipbook insertado, tus visitantes obtienen una experiencia rica de paso de página sin abandonar tu sitio web. Eso significa sesiones más largas, menor tasa de rebote y una impresión mucho más profesional. Ya sea que muestres un catálogo de productos, folleto corporativo, revista o manual de capacitación, un flipbook insertado mantiene a los lectores enganchados justo donde los quieres.

FlipLink lo hace sin esfuerzo. Una vez que creas un flipbook desde tu PDF, obtienes un código de inserción listo para usar que funciona con cualquier tema, page builder o editor de WordPress. No se necesitan plugins.

Si eres nuevo en la conversión de PDF a flipbooks, empieza con nuestra guía sobre cómo convertir un PDF a flipbook en línea primero, y luego regresa aquí para insertarlo.

Cómo obtener tu código de inserción de FlipLink

Antes de tocar WordPress, necesitas tu código de inserción. Así lo obtienes:

1. Inicia sesión en tu panel de FlipLink en go.fliplink.me
2. Abre el flipbook que quieres insertar
3. Haz clic en el botón Compartir
4. Selecciona la pestaña Insertar
5. Copia el código iframe proporcionado

Tu código de inserción se verá así:

<iframe
  src="https://go.fliplink.me/view/your-flipbook-id"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
></iframe>

Eso es todo lo que necesitas. FlipLink se encarga de la parte de compartir y distribución — tu trabajo es simplemente pegar este código en WordPress.

Método 1: Editor de Bloques de WordPress (Gutenberg)

El Editor de Bloques es el editor predeterminado de WordPress, y es la forma más simple de insertar tu flipbook.

Paso a paso

1. Abre la página o entrada donde quieres el flipbook
2. Haz clic en el botón + para agregar un nuevo bloque
3. Busca HTML personalizado y selecciónalo
4. Pega tu código iframe de inserción de FlipLink en el bloque
5. Haz clic en Vista previa para verificar que se ve correctamente
6. Presiona Publicar o Actualizar

Eso es todo. El flipbook se renderizará directamente en tu página con interactividad completa — paso de página, zoom, pantalla completa y todo lo demás.

Consejo profesional

Si quieres centrar el flipbook con algo de espacio, envuélvelo en un div:

<div style="max-width: 900px; margin: 0 auto; padding: 20px 0;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    width="100%"
    height="600"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

Método 2: Elementor

Elementor es uno de los page builders más populares de WordPress, e insertar un flipbook toma solo unos clics.

Paso a paso

1. Abre la página en el editor visual de Elementor
2. Busca el widget HTML en el panel de widgets
3. Arrastra el widget HTML a la sección deseada
4. Pega tu código iframe de FlipLink en el campo HTML
5. Ajusta el margen y el relleno del widget en la pestaña Avanzado
6. Haz clic en Actualizar para guardar

Elementor renderiza el iframe en vivo en el editor, así que puedes ver exactamente cómo se verá tu flipbook antes de publicar. Usa los controles responsivos de Elementor para ajustar la altura en los puntos de quiebre de tableta y móvil si es necesario.

Método 3: Editor Clásico

¿Aún usas el Editor Clásico? No hay problema. El proceso es igual de sencillo.

Paso a paso

1. Abre tu página o entrada en el Editor Clásico
2. Cambia a la pestaña Texto (no Visual) en la barra de herramientas del editor
3. Coloca el cursor donde quieres el flipbook
4. Pega el código iframe de inserción
5. Cambia de vuelta a la pestaña Visual para confirmar que aparece
6. Haz clic en Publicar o Actualizar

Importante: Siempre pega los códigos de inserción en la pestaña Texto. La pestaña Visual puede eliminar o alterar tu HTML, lo que puede romper la inserción.

Consejos de tamaño responsivo

Tu flipbook debe verse bien en cada dispositivo. Aquí tienes algunos consejos prácticos para la inserción responsiva.

Usa ancho en porcentaje

Siempre configura width="100%" en tu iframe para que llene el contenedor. Esto asegura que el flipbook se adapte a cualquier tamaño de pantalla automáticamente.

Establece una altura razonable

Una altura fija en píxeles de 500 a 700 funciona bien para la mayoría de los flipbooks en escritorio. Para un enfoque más responsivo, usa la técnica de relación de aspecto:

<div style="position: relative; width: 100%; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

Esto mantiene una relación de aspecto 4:3 independientemente del ancho de pantalla. Ajusta padding-bottom para cambiar la relación — usa 56.25% para 16:9 o 100% para cuadrado.

Prueba en móvil

El visor de FlipLink es completamente responsivo, pero siempre previsualiza tu página de WordPress en un teléfono para asegurarte de que el diseño circundante no cree espacios incómodos. La mayoría de los problemas provienen del CSS de la página, no del flipbook en sí.

Alternativa: inserción con imagen clicable

No todas las páginas necesitan una inserción interactiva completa. A veces quieres un toque más ligero — una miniatura atractiva que abra el flipbook completo al hacer clic. Para eso existe la función de Inserción con Imagen Clicable de FlipLink.

En lugar de un iframe, obtienes una imagen con enlace. Esto es perfecto para:

• Barras laterales de blog donde un flipbook completo sería demasiado grande
• Landing pages donde quieres que los visitantes hagan clic intencionalmente
• Newsletters por email que enlazan de vuelta a tu página de WordPress
• Bibliotecas de recursos que listan múltiples publicaciones como miniaturas

Puedes obtener el código de Inserción con Imagen Clicable desde el mismo diálogo de Compartir en tu panel de FlipLink. Carga más rápido que un iframe y te da control total sobre la apariencia de la miniatura a través de las opciones de marca y diseño de FlipLink.

Solución de problemas comunes

El flipbook no aparece

• Asegúrate de pegar el código en el modo Texto/HTML, no en el editor Visual
• Verifica que tu tema de WordPress no filtre iframes (algunos plugins de seguridad los bloquean)
• Confirma que el flipbook esté publicado y no en modo borrador en FlipLink

El flipbook es demasiado pequeño o demasiado grande

• Ajusta el valor de height en el código iframe
• Usa el div contenedor responsivo mostrado arriba para un tamaño consistente
• Verifica si el área de contenido de tu tema tiene un ancho máximo que esté limitando la inserción

El flipbook funciona en escritorio pero no en móvil

• Asegúrate de que width="100%" esté configurado (no un ancho fijo en píxeles)
• Busca overflow: hidden en CSS de contenedores padres que pueda estar recortando el iframe
• El visor de FlipLink maneja los gestos móviles de forma nativa, así que el problema casi siempre está en el diseño de la página

WordPress elimina el código de inserción

Algunos plugins de seguridad (como Wordfence o iThemes Security) o configuraciones de tema pueden filtrar etiquetas iframe. Si tu código de inserción desaparece después de guardar:

• Revisa la configuración de tu plugin de seguridad para reglas de filtrado de iframes
• Agrega go.fliplink.me a tus fuentes de iframe permitidas
• Intenta usar un bloque HTML dedicado en lugar de pegar en línea

Consideraciones SEO

Los flipbooks insertados mejoran las métricas de interacción del usuario, lo que beneficia indirectamente tu SEO. Para máxima visibilidad, asegúrate de haber configurado las vistas previas SEO y sociales de tu flipbook en FlipLink para que los motores de búsqueda y las plataformas sociales muestren metadatos enriquecidos cuando tu página sea compartida.

Para una guía más profunda sobre opciones de inserción más allá de WordPress, consulta nuestra guía completa sobre cómo insertar un PDF en un sitio web.

Comienza a insertar flipbooks en WordPress hoy

Insertar un flipbook de FlipLink en tu sitio WordPress toma menos de cinco minutos. Sin plugins que instalar, sin configuración complicada — solo pega un código de inserción y tus visitantes obtendrán una experiencia interactiva impresionante.

¿Listo para empezar? Crea tu cuenta gratuita de FlipLink y convierte tu primer PDF en un flipbook insertable. Con nuestro lifetime deal desde $129 para 100 publicaciones activas, obtienes inserción ilimitada en todas tus páginas de WordPress y más.

Consulta nuestra página de precios para encontrar el plan adecuado para tus necesidades.