Мобильная версия попапа

Попап всегда один. Нет «десктопной» и «мобильной» копий, которые нужно поддерживать по отдельности: вы собираете попап один раз, а для телефона точечно меняете отдельные свойства — например, уменьшаете отступы или разворачиваете картинку в квадрат. Всё, что вы не тронули, мобильная версия наследует автоматически.

Мобильной считается ширина экрана до 640 пикселей включительно. Планшет и всё, что шире, показывают обычную (десктопную) версию.

В верхней части холста есть переключатель вида: «Мобильный», «Планшет», «Десктоп». Выберите «Мобильный» — холст сузится до ширины смартфона, и попап покажет ровно то, что увидит посетитель с телефона.

Пока включён мобильный вид, первым в панели настроек идёт раздел «Только для мобильного»: в нём собраны настройки, которые меняются только на телефоне. Каждая помечена значком телефона и подписью «Только мобильный». Остальные разделы общие для всех устройств.

Плюс к этому у любого элемента есть видимость по устройствам — строка «Где показывать» вверху панели настроек. Три иконки: на всех устройствах, только на десктопе, только на телефоне. Это самый сильный инструмент адаптации: элемент можно целиком скрыть на телефоне или, наоборот, показать только на телефоне.

Отдельно у контейнера есть настройка «На мобильном» (горизонтальный ряд разворачивается в колонку), а у сетки — «Колонки на мобильном».

Всё остальное. Самое частое недоразумение — текст: сам текст, заголовки, жирность, цвет и шрифт общие. Если в мобильном виде поменять «Заголовок 1» на «Заголовок 2», изменится и десктопная версия.

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

Когда включён мобильный вид:

• Раздел «Только для мобильного» — открыт первым, в нём все настройки блока, которые меняются только на телефоне.
• «Только мобильный» — поле, которое можно изменить отдельно для телефона. Правка здесь не затронет десктоп.
• «Изменено на мобильном» — у свойства уже задано мобильное значение. Этот значок виден и на десктопном виде, чтобы о правке не забыть.
• «Как на десктопе» — вернуть свойству десктопное значение.
• «Сбросить все мобильные настройки» — снять сразу все мобильные значения элемента. Видимость по устройствам при этом сохраняется.

Длинный подзаголовок хорошо смотрится на широком экране и съедает половину телефона.

1. Выделите подзаголовок.
2. В строке «Где показывать» вверху панели выберите иконку монитора — «Показывать только на десктопе».
3. Переключитесь на мобильный вид и убедитесь, что элемент исчез.

Элемент никуда не удаляется: на десктопе он остаётся, а найти и вернуть его можно в панели «Структура».

Так же скрывается любой блок. На ролике в мобильном виде скрыт таймер:

Тот случай, когда на телефоне нужна не та же фраза, а другая — короче.

1. Соберите два текстовых блока: длинный и короткий.
2. Длинному в строке «Где показывать» выберите «только на десктопе», короткому — «только на телефоне».
3. Проверьте оба вида переключателем.

Так у каждой версии свой текст, и правка одного не задевает другой.

Отступы, которые выглядят просторно на десктопе, на телефоне забирают ширину.

1. Мобильный вид → выделите контейнер.
2. «Отступы внутри» → выберите значение поменьше (например, 8–16).
3. «Расстояние между элементами» → уменьшите так же.
4. Вернитесь на десктоп и убедитесь, что там значения прежние.

1. Мобильный вид → выделите изображение.
2. «Ширина» → «На всю».
3. «Форма кадра» → например, квадрат: широкая панорама на телефоне превращается в узкую полоску, а квадрат читается.
4. «Фокус кадра» → сдвиньте на главное: лицо, товар, надпись.

Фокус сдвигает картинку, только когда кадр её обрезает. Если картинка целиком помещается в кадр, например квадратная в квадратном, фокус ничего не меняет. На ролике фокус выбирают в широком кадре, а потом кадр меняют на квадрат.

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

1. Мобильный вид → выделите колесо фортуны или скретч-карту.
2. «Размер колеса» или «Размер карточки» → например, S.
3. Вернитесь на десктоп и убедитесь, что там размер прежний.

Мобильный вид → выделите кнопку → «Размер шрифта» поменьше, если подпись переносится на две строки. Чтобы кнопка занимала всю ширину, включите у неё переключатель «На всю ширину». Эта настройка общая для всех устройств.

Кнопка «Просмотр попапа» (значок глаза) открывает попап так, как его увидит посетитель, и там же есть выбор устройства: «По размеру окна», конкретные телефоны, планшеты и десктопные разрешения. Выберите телефон — попап отрисуется в настоящей рамке устройства, со всеми мобильными значениями и скрытыми элементами.