8. Адаптивность

Содержание:

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

  • Широкие экраны– 1200px;
  • Ноутбуки– 992px;
  • Планшеты– 768px;
  • Мобильные телефоны– 320px.

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

Как включить адаптивность

Зайдем в редактор страницы и нажмём на кнопку «Настройка адаптивности» в верхней панели инструментов.
В данном окне можно включить и выключить отображение страницы для выбранных устройств.

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

В редакторе:

adaptiv002

В предпросмотре:

adaptiv003

Как задать нужную адаптивность

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

Шаг 1. Зайдем в «Настройки адаптивности».

1000826

Шаг 2. Укажем нужную ширину устройства.

Готово! Теперь при достижении минимальной ширины будет показываться нужное устройство.

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

1000827

 

Знакомство с адаптацией виджетов:

Виджет «Колонки»

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

adaptiv004

Виджет «Картинка»

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

adaptiv005

Виджет «Текст»

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

adaptiv101
Также можно задать размера шрифта для разных видов устройств.

adaptiv006

Отступы у виджетов и секций

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

adaptiv010

Виджет «Кнопка»

Кнопке можно задать «Особое положение для телефонов».
Данная настройка меняет выравнивание кнопки только на телефоне: слева, по центру, справа, а также можно растянуть по ширине.

adaptiv007

Скрыть Виджет/Секцию

Можно скрыть виджеты и секции, которые не должны отображаться на определенном устройстве.
Важно!
Если функция «скрытие виджета» активна, то она обязательно должна быть включена в адаптивность под мобильные устройства.
Иначе там будет отображаться наиболее близкая по ширине версия адаптивности.
Пример: если скрыть секцию для мобильных и забыть включить адаптивность для мобильных, то при заходе на страницу будет отображаться планшетная версия.

Скрытие виджета

Скроем виджет “Картинка” и виджет “Текст” для Широкоэкранных устройств.
Данные виджеты будут показываться только на мобильных устройствах, планшетах и ноутбука, для широкоэкранных устройств виджеты будут скрыты даже в редакторе.

adaptiv008

Скрытие секции

Ниже показано как скрыть первую секцию для ноутбуков и широких экранах.

adaptiv009

Мобильное меню

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

adaptiv011

Как установить своё меню в мобильное меню?


Добавим мобильное меню на секцию, удалим из него встроенное меню и переместим наше меню в виджет Мобильного меню.
Готово! Осталось настроить отображение меню на мобильной версии и положение кнопок. Вместо надписи мы разместили логотип.

adaptiv012

Параллакс на мобильных

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

adaptiv102

Была ли эта статья полезна?

Похожие статьи