Как опубликовать 3D тур
на платформе Tilda

  • Евгений Галанин
  • 15 октября 2020




В этой статье я по шагам распишу, как опубликовать тур на примере использования хостинга Beget.

Преимущество хостига Beget в том, что компания выступает и как хостер и как регистратор доменов - это позволяет нам управлять дисковым пространством и доменами в одном личном кабинете без необходимости переключаться на от дельный сервис.

Разумеется, можно использовать любой другой хостинг, просто настройки в админ панели будут в других местах, но я расскажу на примере того, чем пользуюсь сам.

Особенности платформы Tilda

Публикация 3D тура на платформу Tilda немного отличается от публикации на стандартный сайт, так как Tilda - это конструктор, из-за чего есть одно существенное ограничение - это отсутствие прямого доступа к хостингу, на котором размещен сам сайт и его графический контент (фотографии, анимация, видео и 3D туры).

Особенности 3D туров как формата

Раньше для создания 3D туров использовался Flash, но эта технология давно устарела, так что мы не будем ее рассматривать.

Современный 3D тур создается на основе HTML5 и представляет из себя папку с файлами.

Для нас главный из них - это исполняемый файл в корне каталога: обычно он называется tour.html или index.html - ссылку именно на него мы будем использовать в дальнейшем (обратите внимание, что в зависимости от настроек вашей операционной системы у вас может не отображаться расширение файла, тогда он будет назван просо "tour" или "index")

Основные варианты публикации

Есть два основных вида публикации, все остальные — это так или иначе их вариации:

  1. Тур встраивается в контент страницы
  2. Тур будет открываться в новой вкладке при клике на кнопку или гиперссылку

Тур встраивается в контент страницы

1. Создание аккаунта на сайте регистратора/хостера

Здесь нет ничего сложного, просто поэтапно введите информацию необходимую для регистрации.

2. Перенос домена

В данном пункте мы рассматриваем Beget как регистратор доменов, а не хостинг.

Большинство пользователей Тильда получили бесплатный домен при оплате платной подписки, так что для его переноса к другому регистратору (от Tilda к Beget) вам потребуется обратиться в поддержку платформы.

3. Создание поддомена

Именно на поддомене мы будем размещать наш тур, так как основной домен привязан к внутреннему хостингу Тильды, к которому у нас нет доступа.

4. Подключение SSL-сертификата к поддомену

Здесь мы рассматриваем вариант, что у вашего сайта (основной сайт, на который вы хотите встроить 3D тур) есть SSL-сертификат - он обеспечивает шифрование данных пользователя и для современного сайта это обязательный пункт.

Соответственно для поддомена для встраивания тура внутрь контента вам также нужно подключить SSL, так как встраивание осуществляется через iframe. При попытке опубликовать контент без шифрования в контент с шифрованием встраиваемый контент (3D тур в нашем случае) просто не будет отображаться.

К сожалению на Beget нельзя выпустить бесплатный сертификат отдельно для поддомена без привязки родительского домен и переноса сайта на хостинг Beget. Поэтому вам потребуется купить платный сертификат и доплатить за выделенный IP для его подключения.

5. Размещение тура на хостинге

Далее вам остается только выгрузить файлы тура на хостинг и скопировать ссылку на исполняемый файл.

6. Адрес исполняемого файла

  • Ваш домен: domain.com
  • Папка, в которой размещается тур: 360
  • Адрес папки: https://domain.com/360
  • Ссылка на исполняемый файл: https://domain.com/360/tour.htm

7. Код iframe для встраивания 3D тура

Для встраивания виртуального тура на Tilda используйте блок T123 в двух вариантах, первый для отображения на ПК, второй для отображения на мобильных устройствах.

Блок 1 - T123 - для ПК

Диапазон видимости на устройствах (внизу настроек блока) - от 980px до ∞

<head>
  <meta charset="utf-8">
  <style>
   .center {
    width: 900px; /* Ширина элемента в пикселах */
    padding: 10px; /* Поля вокруг текста */
    margin: auto; /* Выравниваем по центру */
    background: #FFFFFF; /* Цвет фона */
   }
  </style>
</head>
<body>
  <div class="center">
  <iframe seamless style="border:none"
   width="900"
   height="600"
   src="<https://domain.com/360/tour.htm>">
  </iframe>
  </div>
</body>

Блок 2 - T123 - для мобильных

Диапазон видимости на устройствах (внизу настроек блока) от 0px до 980px

<head>
  <meta charset="utf-8">
  <style>
   .center {
    width: 900px; /* Ширина элемента в пикселах */
    padding: 10px; /* Поля вокруг текста */
    margin: auto; /* Выравниваем по центру */
    background: #FFFFFF; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <div class="center">
		<iframe seamless style="border:none" 
			width="400" 
			height="500"
			src="<https://domain.com/360/tour.htm>">
		</iframe>
  </div>
 </body>

Тур открывается в новой вкладке

В этом случае все шаги аналогичны предыдущему за исключением подключения SSL-сертификата - этот пункт желателен но не обязателен.

  1. Создание аккаунта на сайте регистратора/хостера
  2. Перенос домена
  3. Создание поддомена
  4. Размещение тура на хостинге
  5. Копирование адреса на исполняемый файл

Заключение

Руководствуясь этой статьей, вы сможете опубликовать 3D тур на сайт, сделанный на платформе Tilda. Если же у вас возникли трудности с самостоятельно созданным проектом, то я рекомендую обратиться к web-мастерам, которые специализируются на разработке сайтов конкретно на вашей платформе.

Также вы можете разместить ваш 3D тур на моем хостинге за небольшую оплату.

Евгений Галанин

Фотограф интерьеров и архитектуры.
Делюсь личным и профессиональным опытом. Провожу фотосъемки интерьеров и архитектуры в Москве и других городах

comments powered by HyperComments