Как сайт выглядит на мобильных

Большинство посетителей открывают сайты с телефона. Photosquare автоматически подстраивает страницы под ширину экрана, но удобная мобильная версия — это не только «уменьшенный десктоп»: порядок блоков, отступы и шапка на узком экране часто требуют отдельной настройки.

Как устроено превью редактора — в Превью сайта в редакторе. Глобальные шрифты, цвета и кнопки — в Стили сайта: обзор.

Перед началом

1. Откройте редактор: ваш-id.photosquare.ru/config.
2. Откройте страницу и нажмите Редактировать на панели над превью.
3. Справа на панели инструментов переключите превью на мобильную версию — иконка телефона рядом с иконкой монитора.

[изображение: переключатель «Десктопная версия / Мобильная версия» на панели над превью]

Превью сужается до ширины типичного смартфона. Посетители этого переключателя не видят — он только для вас при редактировании.

Что адаптируется само

Сайт подстраивается под ширину окна браузера: текст переносится, изображения масштабируются, колонки на узком экране становятся уже. Глобальные стили сайта (шрифты, цвета, отступы страницы) действуют и на десктопе, и на телефоне.

Новые блоки, добавленные в десктопном превью, получают стартовую мобильную раскладку автоматически — блоки выстраиваются в колонку. Это удобная отправная точка, но перед публикацией мобильный вид лучше проверить вручную.

Десктоп и мобильный — две раскладки

В секциях с сеткой блоков десктоп и мобильный — две независимые раскладки:

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

Подробнее о перетаскивании и размере — в Перемещение, изменение размера и закрепление блоков; как блоки складываются при первой автоматической раскладке — в Как блоки располагаются на мобильных устройствах.

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

1. После правок на десктопе переключитесь на мобильную версию и пролистайте страницу секция за секцией.
2. Если блоки наезжают друг на друга или важный контент оказался слишком низко — перетащите их и измените размер уже в мобильном превью.
3. На иконке телефона может появиться точка-подсказка: на странице есть блоки, добавленные на десктопе, которые вы ещё не открывали в мобильном превью. Переключитесь на телефон и проверьте их раскладку — подсказка исчезнет.
4. Через панель Слои у секции можно скрыть блок только на текущей версии (десктоп или мобильный): нажмите на иконку глаза напротив блока. Так удобно, например, убрать декоративный элемент с телефона, оставив его на большом экране.

[изображение: мобильное превью страницы с блоками в колонке]

Совет: превью в редакторе показывает типичный смартфон, но не заменяет проверку на настоящем телефоне. После сохранения откройте опубликованный сайт в Safari или Chrome на телефоне — так вы увидите реальный размер шрифтов, меню и прокрутку.

Шапка и секции на мобильном

Некоторые элементы имеют отдельные настройки для мобильного:

1. Шапка сайта — в мобильном превью можно выбрать другой макет (расположение логотипа и кнопки меню), настроить высоту шапки и оформление выезжающего меню. Подробнее — Настройка шапки сайта. Кнопка Посмотреть меню на шапке в превью открывает мобильное меню для проверки.
2. Оформление секции (фон, цветовая тема, разделитель, высота) задаётся один раз и действует на обе версии. См. Оформление отдельной секции.
3. Секции-галереи и лента блога тоже адаптируются; параметры макета галереи настраиваются в её панели оформления.

Чего нет в редакторе

1. Отдельного режима «планшет» нет — только десктоп и мобильный. На экранах средней ширины сайт масштабируется автоматически между этими двумя раскладками.
2. В мобильном превью нельзя добавить новый блок через «+» на секции — добавляйте блоки в десктопном виде, затем проверяйте их в мобильном. Панель Слои при этом доступна.

Сохранение

Изменения раскладки видны в превью сразу. Чтобы они попали на опубликованный сайт, нажмите Сохранить на панели над превью.

Если вы меняли мобильный макет шапки или параметры в «Стили сайта», сохраните и их — кнопка Сохранить в шапке соответствующей панели, когда есть несохранённые правки