Добавление виджета на сайт Tilda

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

В этой инструкции мы подготовим виджет в MapFolio, установим его через HTML-блок Tilda и настроим отображение на компьютере и телефоне. Для подключения понадобится готовый код из личного кабинета — писать его самостоятельно не нужно.

Откройте личный кабинет MapFolio и перейдите в раздел «Виджеты». Нажмите на карточку со знаком «+», чтобы перейти к созданию нового виджета.

Если подходящий виджет уже создан, откройте его настройки и перейдите к копированию кода установки.

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

Укажите понятное название, например «Карта объектов на главной», или оставьте предложенное. Название помогает отличать виджеты в личном кабинете.

Нажмите «Подтвердить выбор», чтобы перейти к дальнейшей настройке.

Откройте раздел «Код для установки» и нажмите кнопку копирования справа от кода.

Скопируйте код целиком. В нём уже указан ваш виджет и подключён необходимый скрипт. Изменять идентификатор или другие части кода не требуется.

Перейдите в личный кабинет Tilda, выберите сайт и откройте страницу для редактирования.

Определите место для карты. Например, её можно разместить после описания услуг, рядом с примерами выполненных работ или на отдельной странице с объектами.

В нужном месте страницы нажмите кнопку добавления блока. Откройте библиотеку, перейдите в категорию «Другое» и выберите T123 «HTML-код». Также блок можно найти по запросу T123.

Он предназначен для подключения собственного кода и сторонних сервисов. Подробнее в справке Tilda.

Нажмите «Контент» у добавленного блока T123, чтобы открыть редактор кода.

Если поле содержит демонстрационный пример, замените его кодом вашего виджета.

Вставьте весь код, скопированный из MapFolio, в поле HTML. Сохраните изменения и закройте окно редактирования.

Для обычной установки достаточно готового кода из личного кабинета MapFolio.

Нажмите «Опубликовать» в верхней части редактора Tilda. После завершения публикации откройте страницу по публичной ссылке из появившегося окна.

Именно по этому адресу страницу видят посетители сайта. Если она уже была открыта в соседней вкладке, обновите её. Инструкция по публикации страницы.

На опубликованной странице должен появиться виджет MapFolio с вашими объектами и выбранным оформлением.

Проверьте его так, как им будет пользоваться посетитель: выберите точку на карте, откройте карточку объекта, просмотрите фотографии и попробуйте настроенные фильтры.

• Карта загружается и показывает ваши объекты
• Нажатие на точку открывает нужную карточку
• Фотографии и описание отображаются корректно
• Поиск и фильтры работают, если они включены
• Виджет помещается в отведённую область и не перекрывает соседние блоки

Убедитесь, что открыли опубликованную страницу, а не редактор или предпросмотр Tilda.

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

После исправления содержимого блока сохраните изменения и снова опубликуйте страницу.

Откройте настройки виджета в MapFolio и убедитесь, что он включён и для него выбран API-ключ Яндекс Карт.

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

Собственный домен и технический адрес Tilda вида project123.tilda.ws — разные адреса. Учитывайте это, если сначала проверяете страницу на техническом домене, а затем подключаете собственный. Подробнее об ограничениях API-ключа.

После установки настройте размеры карты, чтобы она сочеталась с остальным содержимым страницы.

Ширину области для виджета зададим в настройках блока Tilda, а высоту самой карты — в MapFolio. Затем добавим тень, скругление углов и расстояние до соседних блоков.

Вернитесь в редактор страницы и найдите блок T123, в который вы вставили код MapFolio. Нажмите «Настройки» в левой части панели блока.

Откроется меню с параметрами ширины, расположения и отступов.

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

Найдите параметр «Ширина блока» и откройте выпадающий список. Для размещения карты в пределах основной сетки страницы выберите «12 колонок», как показано в примере.

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

Доступные варианты позволяют подобрать размещение под вашу страницу:

• 100% — использовать всю доступную ширину блока.
• 12 колонок — разместить виджет по ширине основной сетки сайта.
• Меньшее количество колонок — сделать область виджета уже.

Для примера оставим 12 колонок: этого пространства достаточно для карты и списка объектов, а по краям страницы сохраняются свободные поля.

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

Откройте страницу сайта и обновите её. Виджет должен отображаться в пределах выбранной ширины.

Оцените, как карта сочетается с другими разделами: её края желательно согласовать с шириной основного содержимого страницы.

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

Перейдите в личный кабинет MapFolio и откройте виджет, установленный на странице Tilda.

Выберите вкладку «Параметры». В ней находятся настройки отображения для мобильных и десктопных устройств.

Параметры для компьютеров и телефонов задаются отдельно. Сейчас настроим высоту для компьютеров — для этого прокрутите страницу до раздела «Десктопные устройства».

В разделе «Десктопные устройства» найдите поле «Высота» и введите 70vh.

Единица vh задаёт размер относительно высоты окна браузера. Значение 70vh означает, что карта будет занимать примерно 70% его высоты.

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

Нажмите «Сохранить» в MapFolio и обновите страницу сайта.

Значение 70vh — отправная точка для настройки. Если карта кажется слишком высокой или низкой, измените его с учётом оформления страницы и размера соседних блоков.

После обновления страницы карта станет компактнее по вертикали, сохранив выбранную ширину.

Проверьте, удобно ли просматривать объекты и пользоваться картой при таком размере. Обратите внимание на доступность поиска, фильтров и кнопок управления.

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

Вернитесь к настройкам этого же виджета в MapFolio.

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

Прокрутите страницу до раздела «Глобальные параметры». Здесь можно изменить внешний вид границ виджета и добавить тень вокруг него.

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

Чтобы повторить оформление на скриншоте, установите следующие значения:

• Цвет тени: #000000
• Непрозрачность: 15%
• Размытие: 15 px
• Смещение X: 0
• Смещение Y: 0

При таких настройках вокруг виджета появляется мягкая тень без смещения в сторону. Она помогает отделить карту от светлого фона страницы.

Оцените оформление в предпросмотре и нажмите «Сохранить».

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

Обновите опубликованную страницу Tilda. У виджета появятся скруглённые углы и тень по внешнему контуру.

Повторно вставлять код не нужно: настройки применяются к уже установленному виджету.

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

Вернитесь в редактор Tilda и снова откройте «Настройки» блока T123.

Найдите поля «Отступ сверху» и «Отступ снизу». Для оформления, показанного в примере, выберите в обоих полях: 1.5 line (45px)


Так над картой и под ней появится по 45 пикселей свободного пространства.

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

Нажмите «Сохранить и закрыть» и опубликуйте страницу повторно.

Откройте опубликованную страницу и обновите её. Теперь виджет размещён в пределах 12 колонок, имеет высоту 70vh, мягкую тень, скруглённые углы и свободное пространство сверху и снизу.

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