Tour 360 là cách tuyệt vời để tăng tương tác trên trang web của bạn, đặc biệt khi nói đến danh sách bất động sản, blog du lịch hoặc dịch vụ nhiếp ảnh hay studio trực quan hóa 3D.
Và với Webflow đã chinh phục thế giới, nhiều doanh nghiệp đang đầu tư vào trang web mới để làm mới thương hiệu và trải nghiệm trực tuyến.
Chúng tôi yêu thích Webflow (bạn đang đọc bài viết này trên trang Webflow) và muốn chia sẻ cách tạo, nhúng và tùy chỉnh tour trong chưa đầy 5 phút - điều kiện duy nhất là bạn đã có sẵn hình ảnh!
Bài viết này trình bày các bước bằng văn bản, nhưng nếu bạn muốn xem video thì chúng tôi cũng có sẵn!
Tổng quan nhanh các bước:
Được rồi, hãy bắt đầu.
Bước đầu tiên là chuẩn bị hình ảnh 360 - có thể là ảnh chụp từ máy ảnh 360 hoặc drone, hoặc bản dựng 3D từ Blender, Unity hoặc phần mềm 3D phổ biến khác.
Bạn có thể nhận biết hình ảnh 360 nếu nó trông như thế này👇
Đảm bảo hình ảnh có tỷ lệ 2:1 và dung lượng tối đa 25MB mỗi ảnh. Dung lượng tệp càng nhỏ thì tour tải càng nhanh.
Nếu bạn hoàn toàn mới với thế giới hình ảnh 360, bạn có thể xem hướng dẫn này để có tổng quan đầy đủ về các thiết lập khác nhau. Nếu bạn có điện thoại Android, bạn có thể sử dụng chế độ photosphere trong máy ảnh.
Bây giờ bạn cần một nơi để tải hình ảnh 360° lên và tạo tour. Chúng ta sẽ sử dụng Koala360. Nếu bạn đã có tài khoản, bạn có thể vào bảng điều khiển, nếu chưa, bạn có thể tạo tài khoản miễn phí. Sau khi vào bảng điều khiển, bạn có thể điền biểu mẫu "TẠO TOUR" để tạo tour.
Sau khi tour đã được tạo và hình ảnh đã chuẩn bị, chỉ cần kéo và thả tất cả hình ảnh vào công cụ tạo tour. Hình ảnh sẽ được tải lên và bạn có thể chỉnh sửa tên của từng hình ảnh trong công cụ.
Tạo hành trình tham quan tour bằng cách liên kết từng hình ảnh với nhau. Chỉ cần kéo hình thu nhỏ của ảnh bạn muốn liên kết vào hình ảnh 360 hiện tại. Xong, hotspot đã được tạo! Bây giờ bạn có thể di chuyển giữa các hình ảnh bằng cách nhấp vào hotspot. Thêm bao nhiêu hotspot tùy thích.
Tạo cá tính cho tour bằng cách nhấn nút ⚙️ và bật các tính năng bạn muốn. Bạn có thể thêm tự động xoay, chế độ toàn màn hình, ẩn hình thu nhỏ hoặc sử dụng nhiều tính năng PRO khác, với nhiều tính năng mới được thêm mỗi tuần. Điều chỉnh theo ý thích rồi sẵn sàng xuất bản!
Sau khi tạo xong tour, đến lúc xuất bản. Chỉ cần nhấn nút "XUẤT BẢN" ở góc trên bên phải khi đang ở chế độ chỉnh sửa và tour của bạn sẽ trực tuyến, có thể truy cập trực tiếp qua liên kết hoặc mã nhúng.
Nhấn nút 🚀 để hiển thị mã nhúng chứa iframe. Nhấp vào để sao chép và dán mã trực tiếp vào phần tử embed trên trang web Webflow của bạn.
Mặc định, chiều rộng và chiều cao được đặt bằng pixel, nhưng chúng tôi khuyên bạn nên đặt iframe tour với width=100% và height=100%, rồi tùy chỉnh phần tử embed để kiểm soát kích thước tour.
Bằng cách làm theo các bước này, bạn đã thành công tạo và nhúng tour 360 trên trang web Webflow. Người dùng của bạn giờ có thể khám phá trải nghiệm 360 trên tất cả các thiết bị.
Một số mẹo chung:
Như bạn thấy, nhúng tour 360 trên trang web Webflow chưa bao giờ dễ dàng đến vậy. Koala360 là công cụ mạnh mẽ giúp bạn nâng cao trang web và mang đến cho khán giả trải nghiệm đáng nhớ và sống động.
Đây là phần tử embed Webflow với mã nhúng tour Koala360.
Tải lên ảnh 360°, thêm hotspot và chia sẻ.Tham gia cùng hàng ngàn môi giới, kiến trúc sư, nhiếp ảnh gia và studio đang sử dụng Koala.