360 тури — це чудовий спосіб збільшити залученість на вашому вебсайті, особливо коли йдеться про оголошення з нерухомості, блоги про подорожі або послуги фотографів чи агентств 3D-візуалізації.
А з тим, як Webflow завоював світ, багато компаній інвестують у нові сайти, щоб оновити свій бренд та онлайн-досвід.
Ми обожнюємо Webflow (ви читаєте це на сайті Webflow) і хочемо поділитися, як створити, вбудувати та стилізувати тур менш ніж за 5 хвилин — єдина умова — у вас вже є зображення!
Ця стаття описує кроки текстом, але якщо ви хочете переглянути відео, ми підготували його для вас також!
Ось короткий огляд кроків:
Гаразд, почнемо.
Перший крок — підготувати ваші 360 зображення — це можуть бути фото з 360 камер або дронів, або 3D-рендери з Blender, Unity чи іншого популярного 3D-програмного забезпечення.
Ви зрозумієте, що зображення є панорамним 360, якщо воно виглядає так👇
Переконайтеся, що зображення мають співвідношення 2:1 та розмір до 25 МБ кожне. Чим менший розмір файлу, тим швидше завантажиться ваш тур.
Якщо ви абсолютний новачок у світі 360 зображень, ви можете переглянути цей посібник з повним оглядом різних налаштувань. Якщо у вас є телефон на Android, ви можете використати режим фотосфери в камері.
Тепер вам потрібне місце для завантаження 360° зображень та створення туру. Ми будемо використовувати Koala360. Якщо у вас вже є акаунт, ви можете перейти до панелі керування, а якщо ні — можете створити акаунт безкоштовно. На панелі керування ви можете заповнити форму «СТВОРИТИ ТУР» для створення туру.
Після створення туру та підготовки зображень просто перетягніть усі зображення в конструктор турів. Зображення будуть завантажені, і ви зможете редагувати назви кожного зображення в конструкторі.
Створіть маршрут туру, з'єднавши кожне зображення. Просто перетягніть мініатюру зображення, яке хочете з'єднати, у поточне 360 зображення. Готово — точка переходу створена! Тепер ви можете переміщатися між зображеннями, натискаючи на точки переходу. Додайте стільки точок переходу, скільки потрібно.
Додайте вашому туру індивідуальності, натиснувши кнопку ⚙️ та увімкнувши потрібні функції. Ви можете додати автоповорот, повноекранний режим, приховати мініатюри або скористатися безліччю інших функцій PRO, нові з'являються щотижня. Налаштуйте на свій смак і готуйтеся до публікації!
Після створення туру настав час його опублікувати. Просто натисніть кнопку «ОПУБЛІКУВАТИ» у верхньому правому куті в режимі редагування, і ваш тур працює — до нього можна отримати доступ безпосередньо за посиланням або через код вбудовування.
Натисніть кнопку 🚀, щоб відкрити код вбудовування, що містить iframe. Натисніть на нього, щоб скопіювати, та вставте код безпосередньо в елемент вбудовування на вашому вебсайті Webflow.
За замовчуванням ширина та висота задані в пікселях, але ми рекомендуємо встановити для iframe туру width=100% та height=100% і стилізувати елемент вбудовування для контролю розміру туру.
Виконавши ці кроки, ви успішно створили та вбудували ваш 360 тур на вебсайт Webflow. Ваші користувачі тепер можуть досліджувати ваш 360-досвід на всіх своїх пристроях.
Кілька загальних порад:
Як бачите, вбудувати 360 тур на ваш вебсайт Webflow ніколи не було простіше. Koala360 — це потужний інструмент, який допоможе покращити ваш вебсайт та забезпечити аудиторію незабутнім імерсивним досвідом.
Ось елемент вбудовування Webflow з кодом вбудовування туру Koala360.
Завантажте 360°-зображення, додайте хотспоти та поділіться.Приєднуйтесь до тисяч агентів, архітекторів, фотографів і студій, які вже використовують Koala.