Les visites 360 sont un excellent moyen d'augmenter l'engagement sur votre site web, en particulier pour les annonces immobilières, les blogs de voyage ou les services d'agences de photographie ou de visualisation 3D.
Et avec Webflow qui a conquis le monde, de nombreuses entreprises investissent dans de nouveaux sites pour rafraîchir leur marque et leur expérience en ligne.
Nous adorons Webflow (vous lisez ceci sur un site Webflow) et nous voulons partager comment créer, intégrer et styliser une visite en moins de 5 minutes — la seule condition est que vous ayez déjà les images !
Cet article décrit les étapes par écrit, mais si vous préférez regarder la vidéo, nous l'avons aussi pour vous !
Voici un aperçu rapide des étapes :
Très bien, allons-y.
La première étape consiste à préparer vos images 360 — elles peuvent être des photos d'appareils photo 360 ou de drones, ou des rendus 3D de Blender, Unity ou d'autres logiciels 3D populaires.
Vous saurez si l'image est une image 360 si elle ressemble à ceci👇
Assurez-vous que les images ont un ratio 2:1 et une taille maximale de 25 Mo chacune. Plus la taille du fichier est petite, plus votre visite se chargera rapidement.
Si vous êtes totalement nouveau dans le monde des images 360, vous pouvez consulter ce guide pour un aperçu complet des différentes configurations. Si vous avez un téléphone Android, vous pouvez utiliser le mode photosphère de l'appareil photo.
Vous avez maintenant besoin d'un endroit pour télécharger vos images à 360° et créer une visite. Nous utiliserons Koala360. Si vous avez déjà un compte, vous pouvez accéder directement au tableau de bord, sinon vous pouvez créer un compte gratuitement. Une fois sur le tableau de bord, vous pouvez remplir le formulaire « CRÉER UNE VISITE » pour créer la visite.
Une fois la visite créée et les images préparées, glissez-déposez simplement toutes vos images dans le créateur de visites. Les images seront téléchargées et vous pourrez modifier le nom de chaque image dans le créateur.
Créez le parcours de votre visite en reliant chaque image entre elles. Glissez simplement une miniature de l'image que vous souhaitez relier dans l'image 360 actuelle. Et voilà, un point d'accès est créé ! Vous pouvez maintenant naviguer entre les images en cliquant sur les points d'accès. Ajoutez autant de points d'accès que nécessaire.
Donnez un peu de personnalité à votre visite en cliquant sur le bouton ⚙️ et en activant les fonctionnalités souhaitées. Vous pouvez ajouter la rotation automatique, le mode plein écran, masquer les miniatures ou utiliser bien d'autres fonctionnalités PRO, de nouvelles étant ajoutées chaque semaine. Ajustez selon vos préférences et préparez-vous à publier !
Une fois votre visite créée, il est temps de la publier. Appuyez simplement sur le bouton « PUBLIER » en haut à droite en mode édition et voilà, votre visite est en ligne et accessible directement via le lien ou le code d'intégration.
Cliquez sur le bouton 🚀 pour afficher le code d'intégration contenant un iframe. Cliquez dessus pour le copier et collez le code directement dans un élément d'intégration sur votre site Webflow.
Par défaut, la largeur et la hauteur sont définies en pixels, mais nous suggérons de régler l'iframe de la visite sur width=100% et height=100% et de styliser l'élément d'intégration pour contrôler la taille de la visite.
En suivant ces étapes, vous aurez réussi à créer et intégrer votre visite 360 sur votre site Webflow. Vos utilisateurs peuvent maintenant explorer votre expérience 360 sur tous leurs appareils.
Quelques conseils généraux :
Comme vous pouvez le constater, intégrer une visite 360 sur votre site Webflow n'a jamais été aussi simple. Koala360 est un outil puissant qui peut vous aider à enrichir votre site web et offrir à votre audience une expérience mémorable et immersive.
Voici un élément d'intégration Webflow avec le code d'intégration de la visite Koala360.
Importez vos images 360°, ajoutez des hotspots et partagez.Rejoignez des milliers d'agents, architectes, photographes et studios qui utilisent déjà Koala.