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

• Евгений Галанин
• 15 октября 2020
• 3D тур, виртуальный тур, Tilda

В этой статье я по шагам распишу, как самостоятельно опубликовать тур на примере использования хостинга Beget. Также вы можете опубликовать ваш 3D тур на моем хостинге, для расчета стоимости напишите на почту в контактах или в форму обратной связи

Содержание

1. Про хостинг Beget
2. Особенности конструктора Tilda 
3. Особенности 3D туров как формата
4. Основные варианты публикации
5. Тур встраивается в контент страницы
6. Тур открывается в новой вкладке
7. Заключение

Про хостинг 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. Адрес исполняемого файла

• Ваш домен: subdomain.domain.com
• Папка, в которой размещается тур: 360
• Адрес папки: https://subdomain.domain.com/360
• Ссылка на исполняемый файл: https://subdomain.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://subdomain.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://subdomain.domain.com/360/tour.htm>">
		</iframe>
  </div>
 </body>

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

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

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

Заключение

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

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