Универсальный конструктор Удоба. Часть 6. Виртуальный тур

от Марина | Май 3, 2026 | виртуальная экскурсия

Создавать виртуальные туры можно не только с помощью карты. А если взять за основу изображение? И не простое, а панорамное, желательно в 360 градусов.

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

С помощью Удоба сделать такую экскурсию не так уж и сложно. Итак, приступим…

Регистрация

Для начала давайте зарегистрируемся. Заходим на стартовую страницу сервиса и нажимаем «Создать пользователя».

Заполняем предложенную форму: имя пользователя, адрес электронной почты, пароль, капча… В заключение нажимаем кнопку «Регистрация».

На указанный адрес электронной почты придёт письмо с одноразовой ссылкой для входа на сайт. Переходим по ней.

Осталось нажать «Войти», чтобы перейти к созданию собственной библиотеки на сайте.

Нажимаем на кнопку «Создать библиотеку».

В открывшейся библиотеке нажимаем на кнопку «Добавить», а потом выбираем опцию «Интерактивный контент» и переходим к созданию виртуальной экскурсии.

Загружаем изображение

Из списка шаблонов выбираем тот, который называется «360-градусное окружение».

Вписываем заголовок. Добавляем первую панорамную сцену — нажимаем на синюю кнопку «+ New scene» (Новая сцена), чтобы загрузить широкоформатную фотографию достопримечательности, помещения или улицы.

Во всплывающем окне выбираем, какую фотографию будем загружать: «360 image» (панорамное фото) или «Static image» (обычное фото).

Вписываем название сцены в поле «Scene Title».

Чтобы загрузить фотографию, нажимаем на кнопку «Добавить» под надписью «Scene Background» (фон сцены).

В поле «Scene Description» вписываем описание сцены.

В разделе «Button style» указываем, какие интерактивные кнопки будут размещаться поверх фотографии. Если предполагается несколько панорамных сцен, связанных между собой, то выбираем вариант «New scene (arrow)». А если нужно прикрепить к фотографии «горячие точки» с дополнительной информацией, выбираем «More information (plus)».

В разделе «Audio Track» можно загрузить фоновое музыкальное сопровождение виртуальной экскурсии.

В заключение нажимаем в правом верхнем углу синюю кнопку «Done».

Интерактивные метки

Панорамная фотография отобразится в большом окне в центре экрана. Над ней расположена редакторская панель, которая позволяет добавлять на изображение интерактивные метки (слева направо): переход на другую сцену (1), текст (2), изображение (3), аудио (4), видео (5), викторина «выбери правильное утверждение» (6), вопрос с выбором ответа (7).

Нажимаем на значок и во всплывающем окне добавляем нужную информацию. Чтобы метка с дополнительным материалом появилась на изображении, нажимаем в правом верхнем углу синюю кнопку «Done».

Текст можно редактировать: менять размер, начертание букв (полужирное, наклонное). К словам можно прикреплять ссылки (выделяем нужное слово или словосочетание и нажимаем на значок с цепочкой).

У картинки указываем название и альтернативный текст, по желанию — текст при наведении курсора.

Аудио загружается с ПК. Не забываем нажать «Done».

Видеоролики загружаются с ПК. У них настройки побогаче.

В разделе “Визуализация” выбираем опции видеоплеера и добавляем постер к видеоролику, а в разделе «Воспроизведение» устанавливаем автоматическое воспроизведение видео и воспроизведение “по кругу”.

Это окошко для добавления викторины с выбором верного утверждения.

В графу “Вводный текст” вписываем задание, например: “Выберите из предложенных утверждений верное”.

В графы “Определение утверждений” вносим утверждения, первое из них — верное. Чтобы добавить новое утверждение, нажимаем “Добавить утверждение”. Если необходимо, в разделе “Подсказка” добавляем подсказку.

Чтобы добавить новый набор утверждений, нажимаем на кнопку внизу “Добавить утверждения”.

В разделе «Общий отзыв» можно настроить обратную связь. Нажимаем «Добавить диапазон» и добавляем оценки в зависимости от количества правильных ответов.

Например, если правильных ответов всего 20%, выбираем оценку «неплохо», если от 20 до 80% — «хороший результат», от 80 до 100% — «отлично».

Кстати, сервис может распределить оценки автоматически: достаточно нажать «Distribute Evenly».

А это конструктор для добавления викторины с выбором верного ответа.

Вписываем в соответствующие графы вопрос и варианты ответов. Первый из вариантов — правильный. Чтобы добавить новый вариант, нажимаем “Добавить ответ”. А новый вопрос добавляет кнопка “Добавить вопрос”.

Кстати, сервис может распределить оценки автоматически: достаточно нажать «Распределять равномерно».

В разделе «Настройки поведения» тоже есть несколько дополнительных опций для показа викторины.

Чтобы вернуться к редактированию интерактивных меток, нажимаем на значок с «карандашом» (Edit). Рядом — кнопка для удаления метки (Delete).

Переходы между сценами

Можно зафиксировать стартовую позицию для показа сцены. Для этого выбираем «мышкой» нужный фрагмент фото и нажимаем на кнопку «Set starting position».

Чтобы добавить несколько сцен и связать их друг с другом, сначала под основным изображением нажимаем на синюю кнопку «+ New scene» (новая сцена).

Выбираем, какую фотографию будем загружать: панорамную или обычную. Вписываем заголовок и загружаем изображение.

Чтобы связать сцены между собой, после загрузки изображения в верхней панели нажимаем на стрелочку «Go To Scene» (переход на сцену).

Во всплывающем окне выбираем, на какую именно сцену мы перенаправляем пользователя.

Настройки

В разделе «Behavioral settings» находятся настройки для виртуального тура. Можно загрузить общий для всех сцен музыкальный трек и настроить показ названий интерактивных меток.

Публикация

Когда все сцены и информация к ним будет добавлена, прокручиваем страницу «мышкой» ниже, загружаем обложку виртуального тура (необязательно) и нажимаем на зеленую кнопку «Сохранить».

После обработки сервис откроет полученный результат.

Для того чтобы получить код для встраивания на страницу сайта или блога, нажимаем внизу “Вставить”.

Копируем код из открывшегося окошечка.

Код будет выглядеть примерно вот так:

Кстати, из этого кода можно извлечь ссылку для красивого полноэкранного просмотра плаката. Эту ссылку я выделила красным.

Чтобы вновь вернуться к редактированию проекта, нажимаем на вкладку «Редактировать» вверху.

Прокладываем маршруты на Яндекс Карте

от Марина | Апр 22, 2026 | виртуальная экскурсия

Чтобы создать интерактивную карту или виртуальную экскурсию, можно воспользоваться Конструктором карт от Яндекс.

С помощью этого сервиса можно наносить на карту метки (для обозначения объектов), линии (для рисования маршрутов) и многоугольники (для выделения областей и районов).

Готовую карту можно вставить на сайт, в блог или мобильное приложение, ей можно поделиться с друзьями с помощью ссылки. Также её можно распечатать и сохранить в форме рисунка.

Сервис бесплатный, но для работы необходим аккаунт Яндекс.

Вот пример карты, созданной с помощью этого сервиса — «Памятники Мурманска».

Как создать карту?

Заходим на сайт Конструктора карт и нажимаем на кнопку «Создать карту».

Если мы уже создали одну или несколько своих карт, то вы увидим список этих работ и сможем выбрать нужную для редактирования.

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

Выбор пунктов меню позволяет создать копию карты, удалить ее или поделиться ею (для этого надо выбрать пункт «Поделиться», и в открывшейся форме — скопировать ссылку на карту).

Для создания карты нужно авторизироваться: либо войти в свой аккаунт Яндекс, либо создать его — по номеру телефона.

Чтобы приступить к работе, нажимаем на кнопку «Создать карту».

В открывшемся окне Конструктора карт мы будем создавать объекты: метки, линии, многоугольники.

Существуют определенные ограничения на создание объектов. На карту может быть добавлено не более 10 000 объектов (включая и метки, и линии, и многоугольники).

Одна линия или многоугольник могут включать не более 1 000 вершин. Если число вершин объекта превышает эту величину, объект можно автоматически упростить: удалить некоторые вершины таким образом, чтобы максимально сохранить общий вид объекта.

Для начала выбираем вид карты. Для этого нажимаем на кнопку «Слои» и в открывшемся меню выбираем из нескольких вариантов:

Схема — схематическое изображение картографических объектов: дорог, домов и т. д.
Спутник — снимок местности, сделанный из космоса,
Гибрид — снимок местности, сделанный из космоса, дополненный информацией карты: названиями улиц, адресами.

На панели слева, в области «Новая карта» указываем название карты и её описание. Список созданных нами объектов будет отображаться в области «Список объектов».

Как размещать на карте объекты?

Чтобы добавить на карту маркер для обозначения объекта, нажимаем на кнопку «Метки» и выставляем маркер вручную, кликая «мышкой» по нужному месту на карте.

Для поиска объектов можно воспользоваться поисковой строкой вверху: вписываем в неё название достопримечательности или адрес объекта и нажимаем «Найти».

Для метки на карте можно установить цвет, тип (форму). Можно оставить метку пустой или добавить к ней номер (от 1 до 999). Добавляем подпись, которая будет отображаться на карте, и текст, который будет показываться при нажатии на объект.

Нажимаем на кнопку «Готово», и метка сохраняется на карте.

В тексте описания можно использовать html-разметку для добавления ссылок на веб-ресурсы.

Это разметка для добавления гиперссылки — вместо слова «Ссылка» вставляем свой URL, а вместо «Название ссылки» — слово или предложение, при нажатии на которое это ссылка будет открываться:

<a href=»Ссылка»>Название ссылки</a>

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

Чтобы проложить маршрут между несколькими объектами на карте, нажимаем на кнопку «Линии» и с помощью «мышки» рисуем линию маршрута, кликая по точкам на карте.

Когда линия нарисована, нажимаем левой клавишей «мыши» на последнюю вершину линии и в открывшемся контекстном меню выбираем пункт «Завершить». Маршрут построен!

Для маршрута можно задать текст описания, цвет, прозрачность и толщину линии. Чтобы сохранить созданную линию маршрута, нажимаем на кнопку «Готово».

Чтобы выделить область на карте, нажимаем на кнопку «Многоугольники» и рисуем нужную фигуру, щёлкая «мышкой» в нужных местах на карте. Когда многоугольник будет нарисован, нажимаем левой клавишей «мыши» на последнюю вершину линии и в открывшемся контекстном меню выбираем пункт «Завершить».

Можно добавить к многоугольнику внутренний контур: ещё один многоугольник, находящийся в пределах первого. Для этого нажимаем левой клавишей «мыши» на любую вершину многоугольника и в открывшемся контекстном меню выбираем пункт «Добавить внутренний контур».

Для многоугольников задаются описание, цвета контура и заливки, прозрачность контура и заливки и толщина линии контура.

Все объекты, добавленные на карту, отображается слева, в панели «Редактирование карты», в виде списка. Каждая строка включает название и превью объекта; для линейных объектов показывается также их длина (она рассчитывается автоматически).

Объекты в списке расположены в порядке Метки → Линии → Многоугольники.

В этом же порядке объекты отображаются на карте: метки отображаются «выше» линий и могут перекрывать их изображение, а линии — «выше» многоугольников.

Этот порядок изменить нельзя. Но при необходимости можно изменить порядок отображения объектов внутри каждой категории, перемещая нужную метку (или линию, или многоугольник) на первый или, наоборот, на задний план.

Для того, чтобы изменить порядок отображения объектов, переносим нужную строку списка на другую позицию с помощью «мышки».

Как опубликовать и распечатать карту?

Чтобы опубликовать получившуюся работу, нажимаем на кнопку «Сохранить и продолжить».

Далее выбираем нужный тип карты:

Интерактивная карта. Карту этого типа можно двигать, а объекты отзываются на действия пользователя.

Статическая карта. Это картинка в формате PNG. На статической карте можно разместить ограниченное число объектов.

Печатная карта (Распечатать). Это изображение карты в высоком разрешении, которое можно распечатать.

Чтобы получить код для вставки на сайт, в блог или мобильное приложение своей карты таким образом, что с ней можно будет взаимодействовать (двигать, менять масштаб, строить маршруты, просматривать описания и т. п.), выбираем тип карты «Интерактивная».

Задаём размеры карты — в px (пикселях). Если включить опцию «Растянуть по ширине», то для нашей карты будет задано значение параметра width = 100%. В этом случае встроенная на сайт карта займет всю ширину (100%) блока.

Нажимаем на кнопку «Получить код карты». В открывшейся форме можно скопировать код в виде JavaScript или iframe.

Ссылку на карту копируем из одноимённого поля внизу.

Чтобы получить код для вставки своей карты в виде статического изображения, выбираем тип карты «Статическая».

Задаём размеры карты — в px (пикселях). Через кнопку «Получить код карты» копируем нужный код для размещения проекта на сайте или в блоге.

Чтобы распечатать карту или скачать её в виде картинки на ПК, выбираем опцию «Распечатать».

Задаём размеры карты для печати — в пикселях (px), дюймах (in) или сантиметрах (cm). Выбираем формат файла (PNG или JPG) и разрешение растрового изображения карты: 96 DPI (для просмотра в WEB) или 300 DPI — для печати.

Если разрешение карты не важно, нажимаем на кнопку «Воспользоваться стандартной печатью».

Можно скачать карту в виде картинки на ПК (Скачать) или на Яндекс Диск (Сохранить на Яндекс Диск).