360-Touren sind eine großartige Möglichkeit, das Engagement auf Ihrer Website zu steigern, insbesondere bei Immobilienangeboten, Reiseblogs oder Dienstleistungen von Fotografen oder 3D-Visualisierungsagenturen.
Und da Webflow die Welt im Sturm erobert hat, investieren viele Unternehmen in neue Websites, um ihre Marke und ihr Online-Erlebnis aufzufrischen.
Wir lieben Webflow (Sie lesen dies auf einer Webflow-Seite) und möchten zeigen, wie Sie eine Tour in unter 5 Minuten erstellen, einbetten und gestalten können – die einzige Voraussetzung ist, dass Sie bereits die Bilder haben!
Dieser Beitrag beschreibt die Schritte in Textform, aber wenn Sie lieber das Video ansehen möchten, haben wir das auch für Sie!
Hier ist ein kurzer Überblick über die Schritte:
Also gut, legen wir los.
Der erste Schritt besteht darin, Ihre 360-Bilder vorzubereiten – es können Fotos von 360-Kameras oder Drohnen oder 3D-Renderings aus Blender, Unity oder anderer populärer 3D-Software sein.
Sie erkennen, ob das Bild ein 360-Bild ist, wenn es so aussieht👇
Stellen Sie sicher, dass die Bilder ein Seitenverhältnis von 2:1 haben und jeweils bis zu 25 MB groß sind. Je kleiner die Dateigröße, desto schneller lädt Ihre Tour.
Wenn Sie völlig neu in der Welt der 360-Bilder sind, können Sie sich diesen Leitfaden für einen vollständigen Überblick über verschiedene Setups ansehen. Wenn Sie ein Android-Telefon haben, können Sie den Fotosphären-Modus der Kamera verwenden.
Jetzt brauchen Sie einen Ort, um Ihre 360°-Bilder hochzuladen und eine Tour zu erstellen. Wir werden Koala360 verwenden. Wenn Sie bereits ein Konto haben, können Sie direkt zum Dashboard gehen, und wenn nicht, können Sie kostenlos ein Konto erstellen. Sobald Sie im Dashboard sind, können Sie das Formular „TOUR ERSTELLEN" ausfüllen, um die Tour zu erstellen.
Mit der erstellten Tour und den vorbereiteten Bildern ziehen Sie einfach alle Ihre Bilder per Drag-and-Drop in den Tour-Builder. Die Bilder werden hochgeladen und Sie können die Namen jedes Bildes im Builder bearbeiten.
Erstellen Sie Ihren Tour-Rundgang, indem Sie jedes Bild miteinander verknüpfen. Ziehen Sie einfach ein Vorschaubild des Bildes, das Sie verknüpfen möchten, in das aktuelle 360-Bild. Zack, ein Hotspot ist erstellt! Jetzt können Sie durch die Bilder navigieren, indem Sie auf die Hotspots klicken. Fügen Sie so viele Hotspots hinzu, wie Sie benötigen.
Verleihen Sie Ihrer Tour etwas Persönlichkeit, indem Sie auf die ⚙️-Schaltfläche klicken und die gewünschten Funktionen aktivieren. Sie können automatische Drehung, Vollbildmodus, Ausblenden der Vorschaubilder oder viele weitere PRO-Funktionen nutzen, wobei wöchentlich neue hinzukommen. Passen Sie nach Ihren Wünschen an und machen Sie sich bereit zum Veröffentlichen!
Sobald Sie Ihre Tour erstellt haben, ist es Zeit, sie zu veröffentlichen. Drücken Sie einfach die Schaltfläche „VERÖFFENTLICHEN" oben rechts im Bearbeitungsmodus und voilà – Ihre Tour ist live und kann direkt über den Link oder den Einbettungscode aufgerufen werden.
Klicken Sie auf die 🚀-Schaltfläche, um den Einbettungscode mit einem iFrame aufzurufen. Klicken Sie darauf, um ihn zu kopieren, und fügen Sie den Code direkt in ein Embed-Element auf Ihrer Webflow-Website ein.
Standardmäßig sind Breite und Höhe in Pixeln festgelegt, aber wir empfehlen, den Tour-iFrame auf width=100% und height=100% zu setzen und das Embed-Element zur Steuerung der Tourgröße zu verwenden.
Indem Sie diesen Schritten folgen, haben Sie Ihre 360-Tour erfolgreich auf Ihrer Webflow-Website erstellt und eingebettet. Ihre Benutzer können nun Ihr 360-Erlebnis auf allen ihren Geräten erkunden.
Einige allgemeine Tipps:
Wie Sie sehen, war das Einbetten einer 360-Tour auf Ihrer Webflow-Website noch nie so einfach. Koala360 ist ein leistungsstarkes Tool, das Ihnen helfen kann, Ihre Website aufzuwerten und Ihrem Publikum ein unvergessliches und immersives Erlebnis zu bieten.
Hier ist ein Webflow-Embed-Element mit dem Koala360 Tour-Einbettungscode.
Lade deine 360°-Bilder hoch, füge Hotspots hinzu und teile sie.Schließe dich Tausenden von Maklern, Architekten, Fotografen und Studios an, die Koala bereits nutzen.