Настройка дизайна, цветов и маркеров

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

Настройки оформления находятся в блоке «4. Дизайн» редактора виджета.

1. Откройте раздел «Виджеты».
2. Найдите нужный виджет.
3. Нажмите на его карточку.
4. Прокрутите редактор до блока «4. Дизайн».
5. Выберите существующий дизайн или создайте новый.
6. Настройте дополнительные возможности, маркеры и цвета интерфейса.
7. Проверьте результат в блоке «5. Предпросмотр».
8. Нажмите «Сохранить».

В верхней части блока можно выбрать один из ранее созданных дизайнов.

Сохранённый дизайн объединяет:

• выбранную цветовую схему;
• отдельно изменённые цвета;
• стандартный и активный маркеры;
• дополнительные настройки оформления.

Это удобно, если несколько виджетов должны выглядеть одинаково.

1. Откройте список дизайнов.
2. Нажмите «Добавить новый дизайн».
3. Укажите понятное название.
4. Выберите цветовую схему.
5. При необходимости измените отдельные цвета.
6. Настройте маркеры.
7. Сохраните виджет.

Для названия можно использовать назначение или место установки, например:

• Дизайн для главной страницы;
• Светлый дизайн;
• Зелёные маркеры;
• Дизайн каталога объектов.

В разделе «Цвет интерфейса» находятся готовые цветовые схемы. Они показаны в виде небольших цветных образцов.

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

1. Найдите раздел «Цвет интерфейса».
2. Нажмите на подходящую цветовую схему.
3. Посмотрите, как изменился виджет в предпросмотре.
4. Попробуйте другие схемы и сравните результат.
5. Оставьте вариант, который лучше сочетается с вашим сайтом.

После выбора схемы можно отдельно изменить доступные элементы интерфейса.

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

1. Нажмите на название нужного элемента, например «Флажок».
2. В открывшейся палитре выберите цвет.
3. Если нужного цвета нет, укажите его код в специальном поле.
4. Нажмите «Готово».
5. Проверьте результат в предпросмотре.
6. Повторите действия для других элементов.

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

Такой способ подходит, если точное совпадение с фирменным цветом сайта не требуется.

Каждый цвет можно записать специальным кодом. Такой код состоит из знака # и шести символов.

Например:

• #1ABC9C — зелёно-бирюзовый;
• #111111 — почти чёрный;
• #FFFFFF — белый;
• #0F2940 — тёмно-синий.

Если знак # уже показан рядом с полем, введите только шесть символов после него.

Если после ручной настройки оформление перестало вам нравиться, нажмите «Цвета по умолчанию».

Цвета вернутся к значениям выбранной готовой схемы.

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

Цвета должны не только сочетаться с сайтом, но и оставаться хорошо заметными.

Обращайте внимание на контраст:

• тёмный текст лучше читается на светлой подложке;
• светлый текст лучше читается на тёмной подложке;
• маркеры должны отличаться от цветов карты;
• обычный и активный маркеры должны отличаться друг от друга;
• кнопки не должны сливаться с фоном;
• адрес и описание не должны быть слишком светлыми.

Маркер — это обозначение точки на карте.

В Mapfolio используются два состояния маркера:

• стандартный маркер показывает обычную точку;
• активный маркер показывает точку, которую выбрал посетитель.

Разные состояния помогают посетителю понять, какая точка сейчас открыта.

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

Собственные изображения загружаются отдельно для стандартного и активного маркеров.

1. Найдите подраздел «Свой маркер».
2. Откройте область «Стандартный маркер».
3. Нажмите «Загрузить маркер».
4. Выберите SVG-файл на компьютере.
5. Дождитесь появления изображения в области предпросмотра.
6. Проверьте, как маркер выглядит на карте.

1. В подразделе «Свой маркер» найдите область «Активный маркер».
2. Нажмите «Загрузить маркер».
3. Выберите второй SVG-файл.
4. Убедитесь, что активный маркер отличается от стандартного.
5. Откройте точку в предпросмотре и проверьте результат.

После загрузки надпись на кнопке изменится на «Заменить маркер».

Нажмите её и выберите другой SVG-файл. Новый маркер заменит предыдущий после сохранения изменений.

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

После сброса Mapfolio снова будет использовать стандартный флажок. Его цвет можно изменить в разделе «Цвет интерфейса».

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

Отличаться может:

• цвет;
• рамка;
• размер;
• внутренний значок;
• небольшое выделение активного состояния.

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

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

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

Цвет кластера настраивается с помощью элемента «Кластеры» в разделе «Цвет интерфейса».

В подразделе «Дополнительные возможности» находится настройка:

«Отображать вотермарку „Создано в Mapfolio“».

Когда она включена, внутри виджета отображается небольшая подпись Mapfolio. Чтобы убрать подпись, выключите эту настройку.

1. Перейдите к блоку «5. Предпросмотр».
2. Посмотрите, хорошо ли маркеры заметны на карте.
3. Откройте одну из точек.
4. Проверьте, изменилось ли состояние активного маркера.
5. Оцените цвет текста, описания и адреса.
6. Проверьте кнопки открытия и закрытия списка.
7. Посмотрите, читается ли количество точек внутри кластера.
8. Переключитесь между мобильным и десктопным отображением.
9. При необходимости вернитесь к блоку «4. Дизайн» и исправьте цвета.

• Выбрана подходящая цветовая схема.
• Текст хорошо читается на подложке.
• Адрес и описание не сливаются с фоном.
• Кнопки заметны и понятны.
• Обычный и активный маркеры отличаются.
• Кластеры хорошо видны на карте.
• Собственные маркеры загружены в формате SVG.
• Размеры SVG не превышают 100 × 50 пикселей.
• Вес каждого SVG-файла не превышает 128 КБ.
• Дизайн проверен на компьютере и телефоне.
• После проверки нажата кнопка «Сохранить».