поптимайзер Docs

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

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

Как переключиться на мобильный вид

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

Что можно менять отдельно для мобильных

Элемент
Свойства с отдельным мобильным значением
📦Контейнер
Ширина · Отступы внутри · Расстояние между элементами
▦Сетка
Отступы внутри · Расстояние между элементами
🔘Кнопка
Размер шрифта
📝Текст
Выравнивание
🖼Изображение
Ширина · Выравнивание · Форма кадра · Фокус кадра
Плюс к этому у любого элемента есть видимость по устройствам — её можно задать в разделе «Адаптивность» панели настроек. Это самый сильный инструмент адаптации: элемент можно целиком скрыть на телефоне или, наоборот, показать только на телефоне.
Отдельно у контейнера есть настройка «На мобильном» (горизонтальный ряд разворачивается в колонку), а у сетки — «Колонки на мобильном».

Что общее для всех устройств

Всё остальное. Самое частое недоразумение — текст: сам текст, заголовки, жирность, цвет и шрифт общие. Если в мобильном виде поменять «Заголовок 1» на «Заголовок 2», изменится и десктопная версия.
Так же общими остаются цвета, фон, рамки, скругления, анимации, ссылки и действия кнопок, настройки форм.
[!TIP] Нужен другой текст на телефоне? Не пытайтесь переписать существующий — сделайте два текстовых блока и покажите каждый на своём устройстве (см. рецепт «Короткий текст для телефона» ниже).

Как это выглядит в панели

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

Рецепты

Скрыть подзаголовок на телефоне

Длинный подзаголовок хорошо смотрится на широком экране и съедает половину телефона.
  1. Выделите подзаголовок.
  2. Раздел «Адаптивность» → «Показывать на устройствах» → Десктоп.
  3. Переключитесь на мобильный вид и убедитесь, что элемент исчез.
Элемент никуда не удаляется: на десктопе он остаётся, а найти и вернуть его можно в панели «Структура».
🎥
Настройка «Показывать на устройствах»
Место для видео или скриншота

Короткий текст для телефона

Тот случай, когда на телефоне нужна не та же фраза, а другая — короче.
  1. Соберите два текстовых блока: длинный и короткий.
  2. Длинному поставьте видимость Десктоп, короткому — Мобильные.
  3. Проверьте оба вида переключателем.
Так у каждой версии свой текст, и правка одного не задевает другой.
🎥
Два текстовых блока с разной видимостью
Место для видео или скриншота

Убрать «воздух» на телефоне

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

Картинка во весь экран и другой кадр

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

Кнопка, в которую попадает палец

Мобильный вид → выделите кнопку → «Размер шрифта» поменьше, если подпись переносится на две строки. Ширину кнопки задаёт контейнер: включите «Растянуть» или поставьте контейнеру ширину 100%.

Проверка перед публикацией

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

Частые вопросы

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