Виджет можно показывать на сайте двумя способами:
- Сразу разместить карту внутри страницы и указать её ширину и высоту.
- Показать компактный блок-превью, после нажатия на который карта откроется на весь экран.
Способ отображения настраивается отдельно для мобильных и десктопных устройств.
Где настраиваются размеры виджета
- Откройте раздел «Виджеты».
- Нажмите на карточку нужного виджета.
- Найдите блок «3. Параметры».
- Выберите нужный раздел:
- «Мобильные устройства»;
- «Десктопные устройства».
- Найдите поля «Ширина» и «Высота».
Размеры можно изменить только при выключенной настройке «Выводить блок-превью и открывать карту на весь экран».
Что такое ширина виджета
Ширина определяет, сколько места карта займёт по горизонтали — от левого края до правого.
Слишком широкая карта может выйти за границы страницы. Слишком узкой картой будет неудобно пользоваться: посетителю станет сложнее рассматривать точки, открывать карточки и работать с фильтрами.
Если вы не знаете точную ширину блока на сайте, начните со значения auto.
Что такое высота виджета
Высота определяет размер карты по вертикали — от верхнего края до нижнего.
При маленькой высоте посетителю будет видно только узкую часть карты. Слишком большая высота может занять почти всю страницу и заставить посетителя долго прокручивать сайт.
Пример подходящей начальной высоты для компьютера — 600px. Это только пример: окончательное значение зависит от дизайна вашего сайта.
Какие значения можно использовать
| Значение | Что означает | Пример |
|---|---|---|
| auto | Размер определяется автоматически | auto |
| px | Фиксированный размер в пикселях | 600px |
| vw | Процент от ширины окна браузера | 80vw |
| vh | Процент от высоты окна браузера | 70vh |
Автоматический размер — auto
Значение auto позволяет автоматически подобрать размер с учётом доступного места.
Этот вариант подходит, если вы не знаете точные размеры страницы или не хотите устанавливать фиксированное значение.
В поле необходимо написать только:
auto
Фиксированный размер — px
Пиксели используются, когда нужен точный размер.
Например:
- 400px — 400 пикселей;
- 600px — 600 пикселей;
- 800px — 800 пикселей.
Число и обозначение px нужно писать вместе, без пробела.
Правильно: 600px
Неправильно: 600 px
Размер относительно ширины экрана — vw
Обозначение vw позволяет задать размер относительно ширины окна браузера.
Одна единица vw равна одному проценту ширины окна:
- 50vw — половина ширины окна;
- 80vw — 80% ширины окна;
- 100vw — вся ширина окна.
Такой размер зависит от окна браузера, а не только от блока сайта, в котором установлен виджет.
Размер относительно высоты экрана — vh
Обозначение vh задаёт размер относительно высоты окна браузера.
Например:
- 50vh — половина высоты окна;
- 70vh — 70% высоты окна;
- 100vh — вся высота окна.
Этот формат удобно использовать для высоты карты. При изменении размера окна высота виджета также будет изменяться.
Как правильно записывать размер
В каждом поле указывается одно значение. Оно должно состоять из числа и допустимого обозначения.
Примеры правильных значений:
- auto;
- 500px;
- 80vw;
- 70vh.
Не добавляйте в поле пояснения или лишние символы.
| Правильно | Неправильно |
|---|---|
| 600px | 600 пикселей |
| 600px | 600px |
| 80vw | 80% ширины |
| 70vh | высота 70vh |
| auto | автоматически |
Что такое блок-превью
Блок-превью — это обложка виджета, которая занимает меньше места, чем полноценная карта.
На обложке могут отображаться:
- фоновая фотография или видео;
- короткий текст;
- кнопка для открытия карты.
Посетитель нажимает на обложку или кнопку, после чего карта открывается поверх страницы на весь экран.
Как включить блок-превью
- Откройте редактор нужного виджета.
- Перейдите к блоку «3. Параметры».
- Найдите настройки нужного типа устройства.
- Включите параметр «Выводить блок-превью и открывать карту на весь экран».
- Укажите текст обложки.
- Укажите текст кнопки.
- Выберите фотографию или видео для фона.
- Настройте затемнение фона.
- Проверьте результат в блоке «5. Предпросмотр».
- Нажмите «Сохранить».
Что происходит после включения блока-превью
После включения блока-превью поля «Ширина» и «Высота» перестают использоваться. Их значения возвращаются к auto.
На сайте вместо встроенной карты появляется обложка. Полная карта загружается и открывается после действия посетителя.
Когда лучше использовать блок-превью
Блок-превью подходит в следующих случаях:
- на странице мало свободного места;
- карта является дополнительной, а не основной информацией;
- виджет устанавливается на мобильную версию сайта;
- посетителю удобнее работать с картой на весь экран;
- вы хотите сначала показать красивую обложку с призывом открыть карту.
Для мобильных устройств блок-превью включён по умолчанию.
Когда лучше сразу показывать карту
Встроенную карту лучше использовать, если:
- карта является главным содержимым страницы;
- посетителю нужно сразу увидеть расположение точек;
- на странице достаточно свободного места;
- виджет устанавливается на отдельную страницу с объектами;
- посетитель должен сразу работать с поиском и фильтрами.
На десктопных устройствах карта отображается сразу по умолчанию.
Отдельные настройки для телефона и компьютера
Для мобильных и десктопных устройств можно выбрать разные способы отображения.
Например:
- на телефоне показывать блок-превью;
- на компьютере сразу показывать карту размером auto на 600px.
Это остаётся одним виджетом. Создавать дополнительный виджет и устанавливать второй код на сайт не нужно.
| Вариант | Телефон | Компьютер |
|---|---|---|
| Рекомендуемый начальный вариант | Блок-превью | Встроенная карта |
| Страница полностью посвящена карте | Встроенная карта | Встроенная карта |
| На странице мало места | Блок-превью | Блок-превью |
| Нужен точный размер карты | auto или адаптивный размер | Размер в px, vw или vh |
Проверка результата
- Найдите блок «5. Предпросмотр».
- Включите отображение для компьютера.
- Проверьте размер встроенной карты или внешний вид обложки.
- Переключитесь на отображение для телефона.
- Убедитесь, что виджет помещается на узком экране.
- Если используется блок-превью, проверьте читаемость текста и кнопки.
- Сохраните настройки.
- После сохранения откройте страницу сайта, на которой установлен виджет.
- Проверьте страницу и на компьютере, и на телефоне.
Частые проблемы
| Проблема | Возможная причина | Что сделать |
|---|---|---|
| Поля ширины и высоты не отображаются | Включён блок-превью | Выключить полноэкранный блок-превью |
| Карта выходит за границы страницы | Указана слишком большая ширина | Установить ширину auto |
| Карта выглядит слишком низкой | Указана маленькая высота | Увеличить значение высоты |
| Размер не сохраняется | Значение записано неправильно | Проверить формат, например 600px |
| На сайте видна обложка вместо карты | Включён блок-превью | Выключить его для нужного типа устройства |
| Настройка изменилась только на телефоне | Изменён мобильный раздел | Повторить настройку в разделе для десктопных устройств |
Что проверить перед сохранением
- Выбран подходящий способ отображения для телефона.
- Выбран подходящий способ отображения для компьютера.
- Размеры записаны без пробелов и лишних слов.
- Ширина карты не выходит за границы страницы.
- Высоты достаточно для удобной работы с картой.
- Блок-превью содержит понятный текст.
- Кнопка сообщает, что после нажатия откроется карта.
- Оба варианта проверены в блоке «5. Предпросмотр».
- После проверки нажата кнопка «Сохранить».