Bu aşamada bir turu yayınladıktan sonra ortaya çıkan en yaygın ve önemli üç soruyu ele alacağız.
1. Herhangi Bir Web Sitesine Hızlı Bir Şekilde Sanal Tur Nasıl Yerleştirilir
En basit ve en evrensel yöntem, iframe yerleştirme ‘tir.
Hemen hemen her web sitesiyle çalışır ve programlama becerisi gerektirmez.
Popüler CMS platformlarını kullanan örneklere bakacağız: WordPress, Tilda ve Bitrix .
Örnek: WordPress (Gutenberg / Elementor)
- Turunuzun iframe kodunu Space Pano yayınlama sayfasından kopyalayın.
- Web sitenize bir HTML bloğu ekleyin:
- Gutenberg ‘teki — Özel HTML bloğunu kullanın;
- Elementor ‘te — HTML widget’ını kullanın.
- Kopyalanan kodun tamamını HTML bloğuna yapıştırın.
- Sayfayı kaydedin.
Bitti — tur yerleştirildi ve çalışıyor.
Aynı yaklaşım Tilda, Bitrix ve HTML kodu eklemeyi destekleyen diğer tüm CMS’ler için de geçerlidir.
2. Abonelik Olmadan Kendi Web Sitenizde Tur Nasıl Düzenlenir
Aktif bir aboneliği olmadan ile çalışan tamamen otonom bir tur istiyorsanız bu seçenek uygundur.
⚠️ Önemli
Bu yöntem, , bir dosya sistemine erişim sağlamayan Tilda ve benzeri web sitesi oluşturucuları için uygun değildir.
Adımlar:
- Turun ZIP arşivi ‘i cihazınıza indirin.⚠️ Not: Tur, bilgisayarınızda yerel olarak açılmayacaktır. Yerel görüntüleme için bir sunucu ortamı (localhost) gereklidir. Yerel sunucularla çalışma deneyiminiz yoksa, tur oluşturucunun kapsamı dışında olduğundan bunu ayrı olarak ayarlamanızı önermiyoruz.
- Arşivi barındırma/sunucunuza yükleyin:
- , ISPmanager veya cPanel gibi bir dosya yöneticisi aracılığıyla;
- veya FTP aracılığıyla bağlanarak.
- Barındırma sisteminizde zaten etkin bir web sitesi varsa turu kök dizinine yüklemeyin. Aksi takdirde tur, sistem dosyalarının üzerine yazar ve siteyi bozar. Önerilen yaklaşım:
- bir klasör oluşturun, örneğin: sitem.com/tour
- arşivi bu klasöre yükleyin;
- arşivi çıkartın.
Bundan sonra tur ilgili adreste mevcut olacaktır, örneğin: https://mysite.com/tour
3. iframe aracılığıyla Tur Yerleştirme (Gelişmiş Seçenek)
Turu kendi sunucunuzda barındırıyorsanız veya özel yerleştirmeye ihtiyacınız varsa, bağlantıyı kendinizinkiyle değiştirerek standart bir iframe kodu kullanabilirsiniz.
Temel iframe örneği:
Parametreler:
- width=”100%” — blok genişliği;
- height=”600″ — blok yüksekliği (site tasarımınıza uyacak şekilde ayarlanabilir).
Poster ve Oynat Düğmesi ile Kullanıcı Dostu Yerleştirme Daha iyi bir kullanıcı deneyimi için geliştiricilerimiz tarafından sağlanan genişletilmiş yerleştirme kodunu kullanmanızı öneririz:
- tur başlatılana kadar sayfa normal şekilde kaydırılır;
- iframe kaydırma, kaydırma veya fare tekerleği olaylarını yakalamaz;
- tur yalnızca Oynat düğmesi tıklandıktan sonra etkinleştirilir.
Bu kod kullanılabilir:
- , Uzay Turu’nda düzenlenen turlarla ;
- veya kendi sunucunuz üzerinde barındırılan turlar ile.
/* Wrapper: turun görüntüleneceği alanı tanımlar */
.space-pano {
konum: göreceli;
genişlik: %100;
yükseklik: 600 piksel; /* Yüksekliği değiştirebilirsiniz, ör. 500px veya 80vh */
taşma: gizli;
}
/* iframe’in sarmalayıcının tamamını doldurmasını sağlayın */
.space-pano iframe {
genişlik: %100;
yükseklik: %100;
sınır: 0;
/* Anahtar nokta:
Tur başlatılmadığında iframe tıklamaları/kaydırmaları YAKALAMAZ
böylece sayfa normal şekilde kaydırılır */
işaretçi olayları: yok;
}
/* Yer paylaşımı (poster + Oynat düğmesi) */
.space-pano__overlay {
konum: mutlak;
ek: 0;
ekran: esnek;
hizalama öğeleri: merkez;
yasla-içerik: merkez;
taşma: gizli;
geçiş: opaklık 0,25 saniyelik kolaylık, görünürlük 0,25 saniyelik kolaylık;
}
/* Poster resmi */
.space-pano__overlay-img {
konum: mutlak;
ek: 0;
genişlik: %100;
yükseklik: %100;
nesne uyumu: kapak;
}
/* Posterin üst kısmındaki oynat butonu */
.space-pano__play {
konum: göreceli;
z-endeksi: 2;
arka plan: şeffaf;
sınır: yok;
dolgu: 0;
imleç: işaretçi;
}
/* Başlatma sonrasında kaplamayı gizle */
.space-pano__overlay.is-hidden {
opaklık: 0;
görünürlük: gizli;
işaretçi olayları: yok;
}
- /* Wrapper: turun görüntüleneceği alanı tanımlar */ .space-pano { konum: göreceli; genişlik: %100; yükseklik: 600 piksel; /* Yüksekliği değiştirebilirsiniz, ör. 500px veya 80vh */ taşma: gizli; } /* iframe’in sarmalayıcının tamamını doldurmasını sağlayın */ .space-pano iframe { genişlik: %100; yükseklik: %100; sınır: 0; /* Anahtar nokta: Tur başlatılmadığında iframe tıklamaları/kaydırmaları YAKALAMAZ böylece sayfa normal şekilde kaydırılır */ işaretçi olayları: yok; } /* Yer paylaşımı (poster + Oynat düğmesi) */ .space-pano__overlay { konum: mutlak; ek: 0; ekran: esnek; hizalama öğeleri: merkez; yasla-içerik: merkez; taşma: gizli; geçiş: opaklık 0,25 saniyelik kolaylık, görünürlük 0,25 saniyelik kolaylık; } /* Poster resmi */ .space-pano__overlay-img { konum: mutlak; ek: 0; genişlik: %100; yükseklik: %100; nesne uyumu: kapak; } /* Posterin üst kısmındaki oynat butonu */ .space-pano__play { konum: göreceli; z-endeksi: 2; arka plan: şeffaf; sınır: yok; dolgu: 0; imleç: işaretçi; } /* Başlatma sonrasında kaplamayı gizle */ .space-pano__overlay.is-hidden { opaklık: 0; görünürlük: gizli; işaretçi olayları: yok; }
- // Kullanıcı Oynat butonuna tıkladığında turu başlatın: // 1) iframe’i tıklanabilir hale getirin (işaretçi olaylarını etkinleştirin) // 2) poster kaplamasını kaldırın document.addEventListener(‘tıklama’, fonksiyon (olay) { const btn = event.target.closest(‘.space-pano__play’); if (!btn) geri dönerse; const sarmalayıcı = btn.closest(‘.space-pano’); if (!wrapper) geri döner; const iframe = sarmalayıcı.querySelector(‘iframe’); const overlay = sarmalayıcı.querySelector(‘.space-pano__overlay’); if (iframe) iframe.style.pointerEvents = ‘otomatik’;eğer (yer paylaşımı) { overlay.classList.add(‘gizlidir’); setTimeout(işlev () { overlay.remove(); }, 300); } }); // Poster eksikse veya yüklenemezse, kullanıcı arayüzünü engellememesi için görseli kaldırın document.addEventListener(‘DOMContentLoaded’, function () { document.querySelectorAll(‘.space-pano__overlay-img’).forEach(function (img) { const kaynak = img.getAttribute(‘kaynak’); eğer (!src) { img.remove(); dönüş; } img.addEventListener(‘hata’, function () { img.remove(); }); }); });
Özet
Bu aşamada artık şunu nasıl yapacağınızı biliyorsunuz:
herhangi bir web sitesine yalnızca birkaç dakika içinde bir tur yerleştirir;
, abonelik olmadan bağımsız olarak bir tur düzenler;
- , iframe yerleştirmeyi hem temel hem de gelişmiş formatlarda kullanır.
- ✅ Kılavuz eksiksizdir.
- Artık panoramaların yüklenmesinden yayınlanmasına ve sanal turunuzun kullanılmasına kadar tüm iş akışını anlıyorsunuz.
