Insertar en sitios web
Pon tu proyecto 3D interactivo dentro de cualquier sitio web que acepte iframes.
¿Qué es insertar?
Insertar coloca tu proyecto de i3Dify dentro de otro sitio web. Los visitantes usan tu proyecto sin salir de la página.
- Tu proyecto aparece dentro del diseño de la página
- Los visitantes pueden arrastrarlo, hacer zoom y hacer clic, igual que en su propia página
- Sin pestañas nuevas ni ventanas emergentes
- Funciona en cualquier sitio que acepte iframes
Obtener el código de inserción
- Abre tu proyecto en el editor
- Ve a la pestaña Compartir
- Pon la visibilidad en No listado o Público y guarda el proyecto
- Abre la sección Código de inserción
- Pulsa Copiar código de inserción
- Pega el código en tu sitio web
Entender el código
El código que copias se ve así:
<iframe src="https://i3dify.com/view/your-project-id" width="100%" height="600" frameborder="0" allowfullscreen></iframe>
src: La dirección de tu proyecto
width: El ancho de la inserción, en píxeles o en porcentaje
height: El alto, en píxeles
frameborder: Quita el borde que el iframe trae por defecto
allowfullscreen: Permite a los visitantes verlo a pantalla completa
Ajustar el tamaño
Cambia el tamaño para que encaje en tu sitio:
Ancho completo
Con width="100%" la inserción ocupa todo su contenedor:
<iframe src="..." width="100%" height="600" frameborder="0" allowfullscreen></iframe>
Tamaño fijo
Usa valores en píxeles para un tamaño exacto:
<iframe src="..." width="800" height="600" frameborder="0" allowfullscreen></iframe>
Mantener una proporción
Para mantener una proporción como 16:9 con cualquier ancho, envuelve el iframe en un contenedor:
<div style="position: relative; padding-bottom: 56.25%; height: 0;">
<iframe
src="..."
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
allowfullscreen
></iframe>
</div>Guías por plataforma
WordPress
- Edita tu página o entrada
- Agrega un bloque HTML personalizado
- Pega el código de inserción
- Revisa la vista previa y publica
Wix
- Abre el editor
- Haz clic en Agregar (+), luego Insertar, luego Insertar código personalizado, luego Insertar un widget
- Pega el código de inserción
- Ajusta el tamaño como necesites
Squarespace
- Edita tu página
- Agrega un bloque de código
- Pega el código de inserción
- Guarda y revisa la vista previa
Shopify
- Ve a Tienda online, luego Páginas
- Edita tu página y cambia a la vista HTML
- Pega el código de inserción
- Guarda
Webflow
- Agrega un elemento Embed
- Pega el código de inserción
- Ajusta el tamaño en la configuración del elemento
- Publica
Notion
- Escribe /embed en tu página
- Pega el enlace del proyecto, no el código del iframe completo
- Ajusta el tamaño del bloque como necesites
Insertar una pieza de Studio
Una pieza de Studio compartida como No listada o Pública se inserta igual: copia su enlace, que empieza con /studio/, y úsalo como src del iframe.
Solución de problemas
La inserción no carga
- Comprueba que la visibilidad sea No listado o Público y que guardaste el proyecto
- Comprueba que la dirección del proyecto sea correcta
- Asegúrate de que tu sitio permita iframes de otros sitios
Tamaño incorrecto
- Cambia los valores de ancho y alto en el código
- Usa CSS para dar tamaño al contenedor
- Prueba el contenedor que mantiene la proporción
La plataforma bloquea los iframes
- Algunas plataformas limitan las inserciones externas
- Revisa la documentación de tu plataforma
- Comparte el enlace en lugar de insertarlo
La marca de i3Dify en el plan Gratis
En el plan Gratis, un proyecto insertado muestra la marca "Hecho con i3Dify" y una barra fina en la parte inferior. Pro y Business quitan las dos.
En el móvil
Una inserción puede verse distinta en una pantalla pequeña. Pruébala en varios tamaños antes de publicar.