setup your globe
Five steps to show your
world with 3D globes
Step 1.
Create 3D globe container
Add a <div> to the page. Give it a class of fs-3dglobe-container for organization
Give the <div> the container attribute fs-3dglobe-element = container
Give the <div> the globe .jpg image attribute fs-3dglobe-img = https://urlofyourjpg.com
You can upload your globe .jpg image to Webflow asset panel and copy the hosted image url!
The fs-3dglobe-container div will hold your globe.
Add height and width to this class to establish dimensions for your globe.
Add height and width to this class to establish dimensions for your globe.
For best results and performance we recommend uploading .jpg images with a resolution of 8192x4096 pixels with a file size less than 4mb. The image must follow the equirectangular projection pattern.
WTF confused about this? We have globe examples you can download on the Resources page.
Step 2.
Configure pin and tooltip
Add a CMS Dynamic List. Give it the attribute fs-3dglobe-element=list
Add a <div> for the globe pin. Give it fs-3dglobe-element = pin
Add a <div> for the globe tooltip. Give it fs-3dglobe-element = tooltip
Add a Text Block for latitude. Give it fs-3dglobe-element = lat (this can be hidden)
Add a Text Block for longitude. Give it fs-3dglobe-element = lon (this can be hidden)
Step 3.
Connect CMS fields
Connect each element to its matching CMS field
Required fields:
Latitude
Longitude
Pin customization:
Add any CMS fields to dynamically customize content inside your pin (ie. text, image, etc.)
Tooltip customization:
Add any CMS fields to dynamically customize content inside your tooltip (ie. text, image, etc.)
Latitude
Longitude
Pin customization:
Add any CMS fields to dynamically customize content inside your pin (ie. text, image, etc.)
Tooltip customization:
Add any CMS fields to dynamically customize content inside your tooltip (ie. text, image, etc.)
Step 4.
Style and customize
Style your pin and tooltip however you'd like. Pins and tooltips are 100% Webflow Designer friendly. You can design pins and tooltips to take unique shapes, sizes, colors, and effects.
Put any dynamic or static content inside the pin and tooltip. Add images, headshots, icons, titles, text, links, videos, div art, Lottie, and more inside pins and tooltips.
Dicas de contexto
Por que o Weglot?
Desenvolvedores No Code em todo o mundo estão descobrindo a maneira mais fácil de traduzir sites e aplicativos de clientes.
1960s
O primeiro protótipo viável da Internet foi inventado.
Por que o Weglot?
Desenvolvedores No Code em todo o mundo estão descobrindo a maneira mais fácil de traduzir sites e aplicativos de clientes.
Por que o Weglot?
A primeira mensagem da história foi transmitida no dia 24 de maio de 1844, às 8h45 da manhã. Morse, em Washington, telegrafou para Vail, em Baltimore: "O que Deus possibilitou!".
Canadá
4700
Sites do Webflow
Há 250 milhões de anos
O supercontinente chamado Pangea se formava. As florestas de coníferas, os répteis e os synapsidas (antepassados dos mamíferos) eram comuns.
Montserrat
Aa
800 Extra Bold
3000 BCE
Os primeiros idiomas escritos são desenvolvidos pelo povo sumério do sul da Mesopotâmia.
APOLLO 11
Buzz Aldrin, 21 de julho de 1969
Pouso na Lua
Step 5.
Copy and paste the scripts
Paste the css file in the <head> of Page Settings.
Paste the three javascript files in the <body> of Page Settings.
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>
You're done.
Publish your project and see
your 3D globe come to life!
your 3D globe come to life!
