← Назад
Видео
Пошаговая инструкция
FAQ

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

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

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

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

0₽

0₽

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

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

+4

+4

месяца

месяца

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

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

+12.000₽

+12.000₽

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

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

+3

+3

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

0₽

0₽

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

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

0₽

0₽

месяца

месяца

/год

/год

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

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

Получите подарки от 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. Не могу отредактировать содержимое всплывающего окна в мобильном редакторе.
Чтобы перейти к редактированию всплывающего окна для мобильной версии, вам необходимо открыть редактор ПК, перейти в настройки всплывающего окна:
Уже там, в режиме редактирования всплывающего окна, переключиться на редактор мобильной версии:
И поправить количество колонок в ряду, если необходимо:

Если что-то будет непонятно — в конструкторе сайтов mottor есть бесплатная техподдержка для всех пользователей. Вам поможет живой специалист:

— в чате на сайте lpmotor.ru
— по телефону 8 800 200 51 47 (звонки по РФ бесплатные)
— в Телеграм: https://t.me/lpmotorchat

Ищете конструктор чтобы собрать сайт или интернет-магазин?
Попробуйте mottor бесплатно
шаблон сайта доставки еды
шаблон интернет-магазина
шаблон интернет-магазина
шаблон-квиз строительство
шаблон сайта по ремонтуо
450+ шаблонов
ждут вас
Бесплатный конструктор сайта
Все шаблоны
Шаблон онлайн курс
Шаблон курс инвестиций
Шаблон доставка еды
Шаблон онлайн школа
Шаблон для портфолио
Шаблон лендинг вебинара
Шаблон интернет-магазин мебели
Одностраничный сайт
Многостраничный сайт
Создать сайт онлайн бесплатно самому
Создать квиз
Создать сайт бесплатно конструктор
Создать бесплатно интернет магазин
Создать сайт конструктор
Конструктор сайта онлайн
Онлайн конструктор сайта бесплатно
Конструктор интернет магазинов
Конструктор страниц
Сайт конструктор бесплатно
Конструктор создания сайтов
бесплатный конструктор сайтов, лендингов и квизов
Документы:
Полезные ссылки:
Функциональность:
Функциональность:
О компании:
при поддержке Фонда Развития Интернет Инициатив
бесплатный конструктор сайтов, лендингов и квизов
Бесплатный звонок по России
Шаблоны:
Популярные запросы:
support@lpmotor.ru
О компании и сервисе
Тур по сервису
Блог
Инструкции
Договор-оферта
Партнёрская программа
Шаблоны
Видеоинструкции
Согласие
Тарифы и услуги
Обновления
Политика конфиденциальности
Сделано на mottor
Техподдержка
Платная поддержка
Инструкция по установке