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