← Назад

Видео

Пошаговая инструкция

FAQ

Адаптация сайта под мобильные экраны

Сложность ∙ Легко

Аудит вашего сайта или консультация по редактору

0₽

подключенного тарифа для конструктор сайтов

+4

месяца

промокод на продвижение в сетях Яндекс

+12.000₽

тарифа чат-ботов, автоворонок и мобильных приложений

+3

Бесплатный домен в зоне .ru/.рф

0₽

Бесплатный шаблон сайта под вашу сферу бизнеса

0₽

месяца

/год

Забронировать предложение

Получите подарки от mottor при подключении тарифа

спецпредложение

Видео-инструкция:

Как включить мобильную версию сайта

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

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

Обратите внимание!
Мобильная версия будет открываться на устройствах с шириной экрана меньше 500 пикселей.
При повороте мобильного устройства по горизонтали, ширина экрана становится более 500 пикселей и тогда уже открывается ПК-версия сайта.

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

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

Сам мобильный редактор выглядит вот так:

Рассмотрим его основные функции.

Что такое адаптивность в редакторе

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

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

Здесь мы непосредственно адаптируем свой, уже созданный ранее сайт.

Важно!
Изменения, вносимые вами в мобильном редакторе, никак не отразятся на основном (десктопном) варианте сайта.

I. Адаптация блочной секции

1. Количество колонок в ряду

В блочной секции главным инструментом, который позволяет размещать блоки по горизонтали - Колонки. В адаптированном редакторе те же самые колонки уже могут не поместиться на всю ширину - ведь мобильные экраны меньше по ширине.
Специально для этого в мобильном редакторе вы можете разбить один блок колонок на несколько рядов (строк) и тем самым сделать более удобным просмотр этих блоков в мобильном.

Настройки колонок в мобильной версии сайта

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

Если мы поставим по одной колонке в ряд, то элементы в колонках выстроятся друг под другом:

Отображение колонок в ряд в мобильном редакторе

До настройки количества колонок в ряду все колонки выстроены в одну строку, где каждая колонка была сильно сжата по ширине и выглядело некорректно:

Некорректное отображение колонок в мобильном редакторе

2. Размер картинок

Картинки показываются пропорционально размерам блоков в обычном редакторе, либо ограниченные получившейся шириной экрана.
Вы можете регулировать размер изображений в блоке "Картинка" точно также, как в обычном редакторе, потянув за "тянучки" вокруг картинки:

Редактирование размера картинки в мобильном редакторе

3. Изменение текста

По умолчанию в адаптированном редакторе сайта текст сохраняет все те же стили, что и в основном редакторе, уменьшая только размер текста.

Вы можете регулировать следующие параметры текста в мобильном редакторе:

Редактирование текста в мобильном редакторе

Размер текста (1), либо указание установленного глобального стиля текста.

Выравнивание по горизонтали (2) — слева, по центру, справа.

Верхний и нижний отступы текста (3), потянув за "тянучки" сверху и снизу текста.

Переписать сам текст в блоке (так же, как и в основном редакторе - просто прописывая в блоке нужный текст. Этот вариант не будет показываться в основном редакторе - изменения только для мобильного варианта).

Важно: если вы поменяете текст в ПК версии, даже немного, этот текст сразу отобразится в мобильной версии.
Чтобы сохранить изменения в блоке кликните мышью в любом другом месте редактора.

4. Регулирование отступов секций

Чтобы изменить размер секции, можно отрегулировать ее верхний и нижний отступ.

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

5. Формы и кнопки

Пока в ограниченном режиме, но есть возможность настроить расположение кнопок и форм в мобильном редакторе.

У кнопок можно выбрать положение по горизонтали (слева, справа, по центру):

Редактирование положения кнопок по горизонтали

Также у кнопок в мобильном варианте сайта работает автоматический перенос по словам (если кнопка не помещается по ширине, название кнопки будет по словам разбиваться на несколько строк):

Перенос строк в кнопке в мобильном редакторе

У форм заявки можно регулировать также выравнивание (слева, справа, по центру), и дополнительно можно менять ширину блока.
Для изменения ширины кликните по форме и потяните мышью за тянучки по сторонам:

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

6. Создать мобильную копию секции

Этот способ пригодится в ситуациях, когда вам нужно удалить-скрыть-добавить блоки только в какой-то одной версии редактора (ПК или мобильной).

Как это сделать в блочной секции:

Вернемся в обычный редактор сайта и дублируем секцию, которую нам нужно адаптировать:

Теперь у нас 2 одинаковые секции. Вы можете в основном редакторе изменить копию так, чтобы вам было удобнее адаптировать ее под мобильные экраны. После этого нужно скрыть эту секцию от компьютеров, ведь эта секция у нас только для мобильных.

Осталось сделать так, чтобы в мобильном у нас не показывались обе секции - для этого оригинальную секцию (для ПК-версии сайта) скрываем от мобильных устройств.

В свободной секции достаточно открыть расширенные настройки нужного блока и скрыть его только от ПК или только от мобильных устройств:

II. Адаптация в свободной секции

В мобильном редакторе свободной секции работает такой же принцип свободного перемещения блоков, как и в основной.
Но так как нет четкой структуры и блоков-контейнеров (колонки или группа), то автоматически свободная секция не адаптируется и нужно в мобильном редакторе разместить блоки на нужных местах. С помощью функций "Сгруппировать" и "Волшебная палочка".

1. Группировка блоков

Для удобства лучше всего предварительно группировать блоки, прежде чем переходить в мобильный редактор. Сгруппированные блоки можно перемещать одновременно и их положение относительно друг друга не изменится.

Группы блоков вы можете перемещать как в полной версии так и в мобильной.

Чтобы сгруппировать несколько блоков удерживайте клавишу Ctrl на клавиатуре (Cmd для Mac) и выделите блоки левой кнопкой мыши. Вокруг блоков появится обводка розового цвета. После этого нажмите кнопку "Сгруппировать":

2. "Волшебная палочка"

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

Находится кнопка вот здесь:

Функция "Волшебная палочка" в мобильном редакторе

Если блоки предварительно сгруппированы — то по центру окажутся группы блоков друг за другом.

Размещение сгруппированных блоков в мобильном редакторе

III. Адаптация динамических секций

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

В большинстве случаев все, что нужно сделать — это проверить размещение стандартных блоков внутри них. При этом сохраняется логика работы как в блочной секции, описанная в разделе I.

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

Настройка логотипа двухуровневого меню на мобильных

Какие шрифты НЕ рекомендуется использовать в свободной секции

Arial
Comic Sans MS
Courier New
Georgia
Tahoma
Times New Roman
Trebuchet MS
Verdana

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

Обратите внимание:
Вы можете использовать эти шрифты в блочных секциях, там подобного не происходит.

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

Примечание:
Это системные шрифты. Их не надо дополнительно подгружать, потому с ними сайт загружается чуть быстрее. Но на скорость загрузки это существенно не влияет.

Часто задаваемые вопросы:

1. При повороте экрана мобильного в горизонтальное положение включается полная версия сайта.

Так и должно быть. Когда вы поворачиваете телефон, ширина экрана становится более 500px. А мобильная адаптивность включается только когда разрешение экрана менее 500px.

2. Не могу уменьшить кнопку в редакторе мобильной версии.

Такой возможности в редакторе мобильной версии нет, но это можно решить, создав копию секции только для мобильных устройств, как показано в пункте 7 данной инструкции.
Затем, находясь в редакторе ПК версии, в секции скрытой от ПК (предназначенной для мобильных) настройте нужный размер кнопки.

3. Не могу отредактировать содержимое всплывающего окна в мобильном редакторе.

Чтобы перейти к редактированию всплывающего окна для мобильной версии, вам необходимо открыть редактор ПК, перейти в настройки всплывающего окна: