configurar su globo
Cinco pasos para mostrar su mundo
con globos 3D
Paso 1.
Crear un contenedor de globos en 3D
Añada un <div> a la página. Asígnele una clase de fs-3dglobe-container para la organización
Asigne al <div> el atributo de contenedor fs-3dglobe-element = container
Asigne al <div> el atributo de imagen globe.jpg fs-3dglobe-img = https://urlofyourjpg.com
Puede cargar su imagen .jpg del globo al panel de activos de Webflow y copiar la url de la imagen alojada.
El fs-3dglobe-container div contendrá su globo.
Añada alto y ancho a esta clase para determinar las dimensiones de su globo.
Añada alto y ancho a esta clase para determinar las dimensiones de su globo.
Para obtener los mejores resultados y un rendimiento óptimo recomendamos cargar imágenes .jpg con una resolución de 8192x4096 píxeles y con un tamaño de archivo inferior a 4 MB. La imagen debe seguir el patrón de proyección equirrectangular.
¿No sabe cómo hacerlo? Tenemos ejemplos de globos que puede descargar en la página Recursos.
Paso 2.
Configurar el pin y la ayuda de herramientas
Añada un CMS Dynamic List. Asígnele el atributo fs-3dglobe-element=list
Añada un <div> para el pin del globo. Asígnele fs-3dglobe-element = pin
Añada un <div> para la ayuda de herramientas del globo. Asígnele fs-3dglobe-element = tooltip
Añada un Bloque de texto para la latitud. Asígnele fs-3dglobe-element = lat (se puede ocultar)
Añada un Bloque de texto para la longitud. Asígnele fs-3dglobe-element = lon (se puede ocultar)
Paso 3.
Conectar campos de CMS
Conecte cada elemento con su campo CMS correspondiente
Campos obligatorios:
Latitud
Longitud
Personalización del pin:
Añada cualquier campo CMS para personalizar dinámicamente el contenido de su pin (por ejemplo, texto, imagen, etc.)
Personalización de la ayuda de herramientas:
Añada cualquier campo CMS para personalizar dinámicamente el contenido de su ayuda de herramientas (por ejemplo, texto, imagen, etc.)
Latitud
Longitud
Personalización del pin:
Añada cualquier campo CMS para personalizar dinámicamente el contenido de su pin (por ejemplo, texto, imagen, etc.)
Personalización de la ayuda de herramientas:
Añada cualquier campo CMS para personalizar dinámicamente el contenido de su ayuda de herramientas (por ejemplo, texto, imagen, etc.)
Paso 4.
Estilo y personalización
De el estilo que prefiera a su pin y su ayuda de herramientas. Los pines y la ayuda de herramientas son 100 % compatibles con Webflow Designer. Puede diseñar los pines y la ayuda de herramientas para que tengan formas, tamaños, colores y efectos únicos.
Coloque cualquier contenido dinámico o estático dentro del pin y de la ayuda de herramientas. Añada imágenes, fotos, iconos, títulos, texto, enlaces, vídeos, div art, Lottie y mucho más dentro de los pines y las ayudas de herramientas.
Ayuda de herramientas
¿Por qué Weglot?
Los desarrolladores que no quieren tocar el código de todo el mundo están descubriendo la forma más sencilla de traducir los sitios web y las aplicaciones de los clientes.
1960s
Se inventa el primer prototipo viable de Internet.
¿Por qué Weglot?
Los desarrolladores que no quieren tocar el código de todo el mundo están descubriendo la forma más sencilla de traducir los sitios web y las aplicaciones de los clientes.
¿Por qué Weglot?
El primer mensaje de la historia se transmitió el 24 de mayo de 1844 a las 8:45. Morse, que se encontraba en Washington, telegrafió a Vail, en Baltimore, "What Hath God Wrought".
Canadá
4700
Sitios web de Webflow
Hace 250 millones de años
Se forma el supercontinente llamado Pangea. Son comunes los bosques de coníferas, los reptiles y los sinápsidos (los ancestros de los mamíferos).
Montserrat
Aa
800 Extra Bold
3000 BCE
Las primeras lenguas escritas son desarrolladas por el pueblo sumerio del sur de Mesopotamia.
APOLLO 11
Buzz Aldrin, 21 de julio de 1969
Aterrizaje en la Luna
Paso 5.
Copiar y pegar los scripts
Pegue el archivo css en el <head> de Configuración de la página.
Pegue los tres archivos javascript en el <body> de Configuración de la página.
Page Settings
Inside<head> tag
<link async rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@finsweet/3dglobes@1/styles.min.css">
Page Settings
Before </body> tag
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r125/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@finsweet/3dglobes@1/OrbitControls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@finsweet/3dglobes@1/FsGlobe.min.js"></script>
Listo.
¡Publique su proyecto y vea
cómo su globo 3D cobra vida!
cómo su globo 3D cobra vida!
¿Se siente perezoso? ✌
Clone este proyecto Webflow con todos los pasos implementados.
CLONAR EN WEBFLOW