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

Сделайте сайт удобным для просмотра на мобильных устройствах

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


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

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


Далее рассмотрим основные функции мобильного редактора.

1

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

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

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

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

2

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

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

Специально для этого в мобильном редакторе вы можете разбить один блок колонок на несколько рядов (строк) и, тем самым, сделать более удобным просмотр этих блоков в мобильном.


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


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

3

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

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

Вы можете регулировать размер изображений в блоке Картинка точно так же, как в обычном редакторе, потянув за «тянучки» вокруг картинки.


4

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

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

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

- Размер текста (1)

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

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

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


Чтобы сохранить изменения в блоке обязательно нажмите кнопку сохранения изменений (4).

5

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

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

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


6

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

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

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



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

Для изменения ширины кликните по форме и потяните мышью за тянучки слева и справа от формы.


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

7

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

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


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


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


ИНН 590421414992
ОГРН 313590414000013
ИП Старолат А.Ю., 614000 г. Пермь

8 800 250 5337

*Настоящая информация о тарифах не является офертой, публичной офертой и предоставляется исключительно в информационно-ознакомительных целях.
При поддержке Фонда Развития Интернет Инициатив