Ang 360 tours ay isang mahusay na paraan upang dagdagan ang engagement sa iyong website, lalo na pagdating sa mga real-estate listing, travel blog o serbisyo ng photographer o 3D visualisation agency.
At dahil binagsak ng Webflow ang mundo, maraming negosyo ang nag-iinvest sa mga bagong site upang pagandahin ang kanilang brand at online na karanasan.
Gustung-gusto namin ang Webflow (binabasa mo ito sa isang Webflow site) at gusto naming ibahagi kung paano gumawa, mag-embed at mag-style ng tour sa loob ng 5 minuto - ang tanging assumption ay mayroon ka nang mga imahe!
Isinasaad ng post na ito ang mga hakbang sa pagsulat, ngunit kung mas gusto mong panoorin ang video mayroon kaming para sa iyo rin!
Narito ang isang mabilisang pangkalahatang-ideya ng mga hakbang:
Sige, sumisid na tayo.
Ang unang hakbang ay ihanda ang iyong 360 na mga imahe - maaari silang mga larawan mula sa 360 camera o drone o 3D rendering mula sa Blender, Unity o iba pang popular na 3D software.
Malalaman mo kung ang imahe ay 360 kung ganito ang itsura nito👇
Siguraduhing ang mga imahe ay may 2:1 na ratio at hanggang 25MB bawat isa. Kung mas maliit ang laki ng file, mas mabilis mag-load ang iyong tour.
Kung ikaw ay ganap na bago sa mundo ng 360 na mga imahe maaari mong tingnan ang gabay na ito para sa kumpletong pangkalahatang-ideya ng iba't ibang setup. Kung mayroon kang Android phone maaari mong gamitin ang photosphere mode sa camera.
Ngayon kailangan mo ng lugar para i-upload ang iyong 360° na mga imahe at gumawa ng tour. Gagamitin natin ang Koala360. Kung mayroon ka nang account maaari kang dumiretso sa dashboard at kung wala pa, maaari kang gumawa ng account nang libre. Kapag nasa dashboard na maaari mong kumpletuhin ang "CREATE A TOUR" form upang gawin ang tour.
Kapag nagawa na ang tour at naihanda na ang mga imahe, i-drag at drop lang ang lahat ng iyong mga imahe sa tour builder. Maa-upload ang mga imahe at maaari mong i-edit ang mga pangalan ng bawat imahe sa loob ng builder.
Gawin ang iyong tour walkthrough sa pamamagitan ng pag-link ng bawat imahe. I-drag lang ang thumbnail ng imaheng gusto mong i-link sa kasalukuyang 360 na imahe. Bam, nagawa na ang hotspot! Ngayon ay maaari ka nang mag-navigate sa mga imahe sa pamamagitan ng pag-click sa mga hotspot. Magdagdag ng maraming hotspot kung kinakailangan.
Bigyan ng personalidad ang iyong tour sa pamamagitan ng pag-click sa ⚙️ button at i-enable ang mga tampok na gusto mo. Maaari kang magdagdag ng auto-rotate, fullscreen mode, itago ang mga thumbnail o gumamit ng marami pang PRO na tampok, na may mga idinaragdag bawat linggo. I-adjust ayon sa gusto mo at pagkatapos ay maghanda nang mag-publish!
Kapag nagawa mo na ang iyong tour, oras na para i-publish ito. Pindutin lang ang "PUBLISH" button sa kanang itaas kapag nasa edit mode at voila, live na ang iyong tour at maaaring ma-access nang direkta sa pamamagitan ng link o embed code.
Pindutin ang 🚀 button upang ilabas ang embed code na naglalaman ng iFrame. I-click ito upang kopyahin at i-paste ang code nang direkta sa isang embed element sa iyong Webflow website.
Bilang default, ang width at height ay nakatakda sa pixels, ngunit iminumungkahi naming itakda ang tour iFrame sa width=100% at height=100% at i-style ang embed element upang kontrolin ang laki ng tour.
Sa pagsunod sa mga hakbang na ito, matagumpay kang nakagawa at naka-embed ng iyong 360 tour sa iyong Webflow website. Maaari nang mag-explore ang iyong mga user ng iyong 360 na karanasan sa lahat ng kanilang device.
Ilang pangkalahatang tip:
Gaya ng nakikita mo, ang pag-embed ng 360 tour sa iyong Webflow website ay hindi kailanman naging ganito kadali. Ang Koala360 ay isang makapangyarihang tool na makakatulong sa iyo na palakasin ang iyong website at bigyan ang iyong audience ng isang di-malilimutang at immersive na karanasan.
Narito ang isang Webflow embed element na may Koala360 tour embed code.
I-upload ang iyong mga 360° na larawan, magdagdag ng mga hotspot, at ibahagi.Sumali sa libu-libong ahente, arkitekto, photographer, at studio na gumagamit na ng Koala.