Добавление виджета на сайт 1C Битрикс

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

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

Пример подходит для сайта на «1С-Битрикс: Управление сайтом», где у вас есть доступ к редактированию исходного кода страницы.

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

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

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

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

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

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

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

Если код ещё не появился, сначала сохраните созданный виджет.

Создайте новую страницу для карты или откройте существующую страницу, на которой хотите разместить виджет.

Перейдите к редактированию исходного кода файла. В 1С-Битрикс для этого предусмотрен режим «Редактировать как PHP». Он позволяет видеть содержимое страницы вместе с подключениями шаблона сайта. Подробнее о режимах редактирования.

В нашем примере подготовлена отдельная страница с заголовком «Карта».

В примере уже подключены шапка сайта через header.php, подвал через footer.phpи заголовок страницы.

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

Вставьте скопированный код установки в выбранное место страницы.

В нашем примере он расположен между подключением шапки и подключением подвала. HTML-код виджета находится вне PHP-блоков — после закрывающего ?> и перед следующим открывающим <?php.

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

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

После сохранения на странице должен появиться виджет с вашими объектами.

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

В нашем примере карта заняла всю доступную ширину области, в которую вставлен код. Такой вариант можно оставить, если он подходит оформлению сайта.

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

Контейнер — это дополнительная область вокруг кода MapFolio. Через её стили можно ограничить ширину карты, расположить её по центру и задать расстояние до краёв страницы.

Оберните уже установленный код в элемент с классом mapfolio-site-container, как в примере ниже.

Вместо комментария разместите скопированный код своего виджета: элемент с идентификатором MapFolio и скрипт загрузки.

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

Добавьте стили для созданного контейнера. В нашем примере на небольших экранах используются боковые отступы по 10 пикселей.

При ширине окна от 1300 пикселей боковые отступы увеличиваются до 40 пикселей, а максимальная ширина контейнера ограничивается 1440 пикселями.

Каждый параметр отвечает за свою часть размещения:

• width: 100% — контейнер занимает доступную ширину родительской области.
• margin: 20px auto 0 — задаёт внешний отступ сверху 20 пикселей и снизу 0; автоматические боковые отступы центрируют контейнер, когда его ширина ограничена.
• padding-inline: 10px — добавляет внутренние отступы слева и справа по 10 пикселей.
• min-width: 1300px — включает дополнительные правила при ширине окна от 1300 пикселей.
• max-width: 1440px — ограничивает максимальную ширину контейнера на широких экранах.
• padding-inline: 40px — увеличивает внутренние боковые отступы до 40 пикселей.
• box-sizing: border-box — включает внутренние отступы в заданную ширину контейнера.

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

В примере ниже ВАШ_ID_ВИДЖЕТА — обозначение вашего идентификатора. Для установки используйте две готовые строки из личного кабинета MapFolio внутри контейнера: так вы сохраните правильный идентификатор и актуальный адрес скрипта.

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

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

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

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

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

Проверьте, что его ширина сочетается с шириной основного содержимого сайта.

Если карта получилась слишком широкой или узкой, скорректируйте max-width и боковые отступы.

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

Откройте страницу на телефоне или сначала проверьте её в режиме мобильного просмотра браузера.

В нашем примере для мобильных устройств включён блок-превью: вместо встроенной карты посетитель видит обложку и кнопку «Открыть карту». Это поведение задаётся в настройках MapFolio.

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

Нажмите «Открыть карту» и проверьте работу объектов и карточек. Если блок-превью отключён, проверьте отображение самой карты внутри страницы.

Контейнер уже задаёт ширину и отступы. Высоту карты настроим в личном кабинете MapFolio.

Откройте установленный виджет, перейдите на вкладку «Параметры» и прокрутите страницу до раздела «Десктопные устройства».

В поле «Высота» введите 70vh. Это примерно 70% высоты окна браузера.

Так карта станет компактнее по вертикали, сохранив пространство для просмотра объектов. Нажмите «Сохранить» в MapFolio и обновите страницу сайта.

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

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

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

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

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

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

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

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

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

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

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

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

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