Tours 360 são uma ótima maneira de aumentar o engajamento no seu site, especialmente quando se trata de listagens de imóveis, blogs de viagem ou serviços de fotógrafos ou agências de visualização 3D.
E com o Webflow tendo conquistado o mundo, muitas empresas estão investindo em novos sites para renovar sua marca e experiência online.
Adoramos o Webflow (você está lendo isso em um site Webflow) e queremos compartilhar como criar, incorporar e estilizar um tour em menos de 5 minutos - a única premissa é que você já tenha as imagens!
Este post descreve os passos por escrito, mas se preferir assistir ao vídeo, temos isso para você também!
Aqui está uma visão geral rápida dos passos:
Certo, vamos lá.
O primeiro passo é preparar suas imagens 360 - podem ser fotos de câmeras 360 ou drones, ou renderizações 3D do Blender, Unity ou outros softwares 3D populares.
Você saberá se a imagem é 360 se ela se parecer com isto👇
Certifique-se de que as imagens tenham proporção 2:1 e até 25MB cada. Quanto menor o tamanho do arquivo, mais rápido seu tour carregará.
Se você é completamente novo no mundo das imagens 360, pode conferir este guia para uma visão completa de diferentes configurações. Se tiver um celular Android, pode usar o modo fotosfera na câmera.
Agora você precisa de um lugar para enviar suas imagens 360° e criar um tour. Usaremos o Koala360. Se você já tem uma conta, pode ir direto para o painel. Se não, pode criar uma conta gratuitamente. Uma vez no painel, complete o formulário "CRIAR UM TOUR" para criar o tour.
Com o tour criado e as imagens preparadas, simplesmente arraste e solte todas as suas imagens no construtor de tours. As imagens serão enviadas e você pode editar os nomes de cada imagem dentro do construtor.
Crie o percurso do seu tour conectando cada imagem. Simplesmente arraste uma miniatura da imagem que deseja vincular para dentro da imagem 360 atual. Pronto, um hotspot foi criado! Agora você pode navegar pelas imagens clicando nos hotspots. Adicione quantos hotspots precisar.
Dê personalidade ao seu tour clicando no botão ⚙️ e habilitando os recursos que desejar. Você pode adicionar rotação automática, modo tela cheia, ocultar as miniaturas ou usar diversos recursos PRO, com mais sendo adicionados a cada semana. Ajuste ao seu gosto e prepare-se para publicar!
Depois de criar seu tour, é hora de publicá-lo. Basta pressionar o botão "PUBLICAR" no canto superior direito quando estiver no modo de edição e pronto, seu tour está no ar e pode ser acessado diretamente via link ou código de incorporação.
Clique no botão 🚀 para exibir o código de incorporação que contém um iframe. Clique nele para copiá-lo e cole o código diretamente em um elemento de incorporação no seu site Webflow.
Por padrão, a largura e a altura são definidas em pixels, mas sugerimos configurar o iframe do tour com width=100% e height=100% e estilizar o elemento de incorporação para controlar o tamanho do tour.
Seguindo estes passos, você terá criado e incorporado com sucesso seu tour 360 no seu site Webflow. Seus usuários agora podem explorar sua experiência 360 em todos os seus dispositivos.
Algumas dicas gerais:
Como você pode ver, incorporar um tour 360 no seu site Webflow nunca foi tão fácil. O Koala360 é uma ferramenta poderosa que pode ajudá-lo a melhorar seu site e oferecer ao seu público uma experiência memorável e imersiva.
Aqui está um elemento de incorporação Webflow com o código de incorporação do tour Koala360.
Envie suas imagens 360°, adicione hotspots e compartilhe.Junte-se a milhares de corretores, arquitetos, fotógrafos e estúdios que já usam o Koala.