Настройка просмотра
Настройки, которые меняют то, как проект выглядит, звучит и ведёт себя для тех, кто его открывает: hotspots поверх вашего контента, плавающая панель, фон и музыка.
Интерактивные hotspots
Hotspots — это кликабельные точки, которые можно поставить на страницы флипбука, альбома или визитки, на работы в галерее и на экраны mockup-проектов. Они делают контент интерактивным и ведут зрителя по материалу.
Hotspots доступны для проектов «Флипбук», «Альбом», «Визитка», «Галерея», «Desktop Mockup» и «Mobile Mockup». В проектах «Бейдж», «Instant Camera», «Кружка» и «Банка» их нет: там вместо них ссылки на навигационном доке.
Что такое hotspots?
Hotspots — это визуальные иконки, которые появляются на ваших страницах и фото, на работах в галерее или на экранах mockup-проектов. При нажатии они выполняют действие, например:
- Переход к другой странице, фото, работе или экрану
- Открытие внешнего сайта
- Показ всплывающей подсказки с информацией
- Открытие модального окна с подробным контентом
Типы hotspots
Перейти на страницу
Направляет зрителей на другую страницу, фото, работу или экран того же проекта. Отлично подходит для:
- Ссылок из оглавления
- Ссылок «Подробнее на странице X»
- Ссылок возврата на обложку/главную
- Подсказок для последовательной навигации
Открыть URL
Открывает внешний сайт в новой вкладке. Идеально для:
- Ссылок на покупку товаров
- Профилей в социальных сетях
- Форм обратной связи
- Связанных ресурсов
Показать подсказку
Отображает текст при наведении на hotspot. Полезно для:
- Описаний товаров
- Информации о ценах
- Кратких фактов
- Подсказок и советов
Показать модальное окно
Открывает всплывающее окно с форматированным контентом. Идеально для:
- Подробной информации о товаре
- Условий и положений
- Контактной информации
- Дополнительного контента, который не помещается на странице
Добавление hotspot
- Откройте «Содержимое», затем подвкладку «Hotspots» в боковой панели редактора.
- Нажмите «Добавить hotspot». Ещё можно щёлкнуть правой кнопкой по превью и выбрать «Добавить hotspot здесь».
- В форме выберите страницу, фото, работу или экран, на котором будет hotspot.
- Кликните по превью, чтобы поставить его. Стрелки на клавиатуре сдвигают его мелкими шагами, а с Shift шаги крупнее.
- Настройте hotspot:
- Выберите, что он делает: переход к странице (или фото, работе, экрану), открытие URL, подсказка или модальное окно
- Задайте цель (куда перейти, URL или текст)
- Выберите иконку из библиотеки
- Выберите цвет
- Задайте размер (очень маленький, маленький, средний, большой)
- Добавьте необязательную подпись
- Выберите стиль метки (Точка или Невидимая)
- Нажмите «Сохранить».
Параметры настройки
Иконки
Выбирайте из более чем 80 иконок. Используйте поиск, чтобы быстро найти нужную.
Цвета
Выбирайте из готовых цветов или введите пользовательский HEX-код. Сделайте hotspots заметными или гармонично вписанными в дизайн.
Размеры
Доступны четыре размера: очень маленький (14px), маленький (24px), средний (32px) и большой (44px). Выбирайте в зависимости от важности и дизайна страницы.
Позиция
Кликните по превью, чтобы поставить hotspot, затем подвиньте его стрелками на клавиатуре. С зажатым Shift шаги крупнее.
Стиль метки
Выберите «Точка» или «Невидимая». Невидимый hotspot не рисует метку, но остаётся кликабельным, и курсор всё так же меняется при наведении. Используйте его для изображений, где кнопка уже нарисована. В редакторе он показывается как пустое кольцо, чтобы его можно было переместить.
Управление hotspots
Подвкладка «Hotspots» показывает все hotspots проекта:
- Редактирование: кликните по hotspot в списке для изменения его настроек
- Удаление: удалите hotspot, нажав кнопку удаления
- Предпросмотр: hotspots отображаются в реальном времени в области предпросмотра
- Группировка: hotspots перечислены по страницам, фото, работам или экранам, и каждую группу можно свернуть
- Правая кнопка: щёлкните правой кнопкой по hotspot в превью, чтобы изменить, продублировать или удалить его
Лучшие практики
- 1Не перегружайте страницы — используйте hotspots стратегически
- 2Используйте единые цвета для однотипных действий
- 3Делайте hotspots достаточно большими для касания на мобильных
- 4Не закрывайте важный контент
- 5Используйте подсказки для кратких сведений, модальные окна — для подробных
- 6Протестируйте все ссылки hotspots перед публикацией
Примеры использования
Каталог продукции
Добавьте hotspots «Купить» со ссылками на ваш магазин, иконки информации для характеристик товаров и навигацию к похожим товарам.
Интерактивный журнал
Ссылки между статьями на их страницы, модальные окна «Читать далее» для расширенного контента и кнопки публикации в соцсетях.
Учебное пособие
Создайте кликабельное оглавление, добавьте всплывающие подсказки для технических терминов и ссылки на видеоуроки.
Фон
Задник за вашим проектом. Откройте «Настройки», затем подвкладку «Сцена», и выберите один из трёх типов. Исключение — галерея: вместо фона у неё стена, об этом ниже.
Типы фона
Сплошной цвет
Один ровный цвет за всем остальным. Подходит для аккуратных презентаций, чтобы держать цвет бренда, и дать сильный контраст с контентом.
Градиент
Мягкий переход цветов, который добавляет глубины и не отвлекает. Выберите один из 23 пресетов, например Midnight, Sunset, Ocean или Aurora.
Своё изображение
Загрузите свою картинку: фирменное окружение, задник для мероприятия или сезона, фотофон для продукта.
Возьмите мягкое изображение с низким контрастом, чтобы оно не спорило с контентом. Кадрирование поможет расположить его, а ползунок Blur effect (от 0 до 20 px) смягчит ещё сильнее.
Узоры поверх
Лёгкая текстура поверх фона, в выбранном вами цвете. Узоры работают с любым типом фона.
Как поставить фон
Для сплошного цвета
- Откройте «Настройки», затем «Сцена»
- Выберите тип Solid
- Выберите цвет в палитре или введите hex-код, например #1a1a2e
Для градиента
- Откройте «Настройки», затем «Сцена»
- Выберите тип Gradient
- Выберите один из пресетов
Для изображения
- Откройте «Настройки», затем «Сцена»
- Выберите тип Image
- Нажмите на поле загрузки и выберите файл
- Обрежьте, чтобы расположить
- Сохраните проект
Рекомендации по изображениям
Стоит
- Брать изображения 1920x1080 и крупнее
- Предпочитать мягкие или размытые снимки
- Держаться приглушённых или тёмных цветов
- Думать о том, что окажется сверху
- Сжимать файл, чтобы он быстро загружался
Не стоит
- Перегруженные и очень контрастные снимки
- Изображения с большим количеством текста
- Очень яркие или неоновые цвета
- Файлы низкого разрешения или с пикселями
- Файлы тяжелее 5 МБ
Другие настройки внешнего вида
Корешок и края обложки (флипбук)
Когда включена «Твёрдая обложка», это цвет корешка и краёв обложки. Находится в «Настройки», «Общее».
Цвет ленты (бейдж)
Цвет ленты, на которой держится карточка, в «Настройки», «Общее».
Начальный зум
Насколько близко стартует просмотр, от 0.5x до 2x, в «Настройки», «Камера».
Стена (галерея)
У галереи нет выбора фона. В «Настройки», «Сцена» задаются цвет стены и, по желанию, текстура, которая повторяется по всей стене, с ползунком её размера.
Музыка
Добавьте проекту фоновую музыку. Откройте в редакторе «Содержимое», Sounds, в любом типе проекта, и добавьте один или несколько треков. Они играют друг за другом в опубликованном просмотре, в том числе когда он встроен на другой сайт.
Как добавить треки
- Откройте «Содержимое», Sounds и нажмите «Добавить трек» или перетащите аудиофайлы на панель
- Подходят файлы MP3, M4A, WAV, OGG и FLAC длиной до 20 минут и размером до 250 МБ каждый
- Каждый трек сжимается примерно до 1 МБ на минуту и сразу загружается. Он занимает место в хранилище рабочего пространства
- Переименовывайте, меняйте порядок и удаляйте треки в списке. Удаление трека стирает файл и освобождает его место
- Сохраните проект, чтобы сохранить список и его настройки
Настройки воспроизведения
Автовоспроизведение
Музыка включается сама. Браузеры разрешают звук только после действия посетителя, поэтому она начинается с первого касания или нажатия клавиши.
Повторять список
После последнего трека снова играет первый.
Громкость
Насколько громко играет музыка.
Показывать плеер в viewer
Кнопки воспроизведения, паузы, пропуска и выключения звука рядом с доком.
Новый список начинается с включёнными автовоспроизведением, повтором и плеером, на громкости 80%.