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.
Tooltips
Why Weglot?
No Code developers around the world are discovering the easiest way to translate client websites and applications.
1960s
The first workable prototype of the Internet was invented.
Why Weglot?
No Code developers around the world are discovering the easiest way to translate client websites and applications.
Why Weglot?
The first message in history was transmitted on May 24, 1844 at 8:45 a.m. Morse in Washington telegraphed to Vail in Baltimore, "What Hath God Wrought."
Canada
4700
Webflow websites
250 million years ago
The supercontinent called Pangea forms. Conifer-like forests, reptiles, and synapsids (the ancestors of mammals) are common.
Montserrat
Aa
800 Extra Bold
3000 BCE
First written languages are developed by the Sumerian people of southern Mesopotamia.
APOLLO 11
Buzz Aldrin, July 21, 1969
Land on moon
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!
