configuration de votre globe
Cinq étapes pour créer
un globe 3D
Étape 1.
Créer un conteneur pour le globe 3D
Ajouter une <div> à la page. Donnez-lui la classe suivante fs-3dglobe-container pour bien organiser
Ajoutez à la <div> l'attribut du conteneur fs-3dglobe-element = container
Ajoutez à la <div> un autre attribut pour lier l'image .jpg du globe : fs-3dglobe-img = https://urlofyourjpg.com
Vous pouvez télécharger votre image .jpg dans le panneau des assets Webflow et copier l'url de l'image hébergée !
La div fs-3dglobe-container sera là où se trouvera votre globe.
Ajoutez hauteur et largeur à cette classe pour définir les dimensions de votre globe.
Ajoutez hauteur et largeur à cette classe pour définir les dimensions de votre globe.
Pour des résultats et des performances optimaux, nous vous recommandons de télécharger des images au format .jpg d'une résolution de 8192x4096 pixels et d'une taille de fichier inférieure à 4 Mo. L'image doit suivre le modèle de projection équirectangulaire.
Vous êtes perdu ? Nous avons des exemples de globe que vous pouvez télécharger sur la page Ressources
Étape 2.
Configurer vos pins et tooltips
Ajouter une CMS Dynamic List. Et donnez-lui l'attribut fs-3dglobe-element=list
Ajouter une <div> pour l'épingle du globe. Donnez-lui l'attribut fs-3dglobe-element = pin
Ajouter une <div> pour l'infobulle (tooltip) du globe. Donnez-lui l'attribut fs-3dglobe-element = tooltip
Ajouter une Bloc de texte (Text Block) pour la latitude. Donnez-lui l'attribut fs-3dglobe-element = lat (vous pourrez le cacher)
Ajouter une Bloc de texte (Text Block) pour la longitude. Donnez-lui l'attribut fs-3dglobe-element = lon (vous pourrez le cacher)
Étape 3.
Liez les champs du Connect CMS
Connectez chaque élément à son champ CMS correspondant
Champs obligatoires :
Latitude
Longitude
Personnalisation de l'épingle :
Ajoutez des champs CMS pour personnaliser dynamiquement le contenu de votre épingle (texte, image, etc.)
Personnalisation de la tooltip :
Ajoutez des champs CMS pour personnaliser dynamiquement le contenu de votre tooltip (texte, image, etc.)
Latitude
Longitude
Personnalisation de l'épingle :
Ajoutez des champs CMS pour personnaliser dynamiquement le contenu de votre épingle (texte, image, etc.)
Personnalisation de la tooltip :
Ajoutez des champs CMS pour personnaliser dynamiquement le contenu de votre tooltip (texte, image, etc.)
Étape 4.
Adaptez à votre style !
Donnez à vos épingles et à vos tooltips le style que vous souhaitez. Les épingles et les tooltips sont 100% compatibles avec le Webflow Designer. Vous pouvez concevoir des épingles et des tooltips aux formes, tailles, couleurs et effets que vous souhaitez.
Placez n'importe quel contenu dynamique ou statique dans l'épingle et la tooltip. Ajoutez des images, des portraits, des icônes, des titres, du texte, des liens, des vidéos, des div art, Lottie et bien plus encore dans les épingles et les tooltips.
Infobulles / tooltips
Pourquoi Weglot ?
Les développeurs No Code du monde entier aiment cette solution simple pour traduire les sites web de leurs clients.
1960s
Le premier prototype exploitable d'internet est inventé.
Pourquoi Weglot ?
Les développeurs No Code du monde entier aiment cette solution simple pour traduire les sites web de leurs clients.
Pourquoi Weglot ?
Le premier message de l'histoire a été transmis le 24 mai 1844 à 8 h 45. C'était un code morse envoyé depuis Washington, télégraphié vers Vail, Baltimore : "What Hath God Wrought".
Canada
4700
Sites web Webflow
Il y a 250 millions d'années
Le supercontinent appelé Pangée se forme. Les forêts de conifères, les reptiles et les synapsides (les ancêtres des mammifères) prolifèrent.
Montserrat
Aa
800 Extra Bold
3000 BCE
Les premières langues écrites sont développées par le peuple sumérien du sud de la Mésopotamie.
APOLLO 11
Buzz Aldrin, le 21 juillet 1969
a atterri sur la lune
Étape 5.
Copier et coller les scripts
Copiez/collez le fichier css dans la balise <head> des Page Settings.
Copiez/collez les trois fichiers javascript dans la balise <body> des 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>
Vous avez terminé !
Publiez votre projet et vous verrez
votre globe 3D apparaître !
votre globe 3D apparaître !
Vous vous sentez paresseux ? ✌
Clonez ce projet Webflow avec toutes les étapes mises en place.
CLONEZ DANS WEBFLOW