Часть 4: Создание адаптивного дизайна для разных типов устройств

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

 

Часть 1: Основные настройки, Цвет темы и Типографика
Часть 2: Управление областями сайта
Часть 3: Наполнение макета новыми элементами
Часть 4: Создание адаптивного дизайна для разных типов устройств
Часть 5: Работа со страницами и публикациями

 

Дизайн адаптивного сайта

Адаптивный веб-дизайн обеспечивает правильное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.

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

Нужны ли нам все области? Нужны ли нам так же все элементы? Должен ли сайт одинаково выглядеть на мобильных устройствах и на ПК? Что насчет планшетов?

Должны ли отображаться области с видео на мобильных устройствах?

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

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

Использование адаптивного режима Upfront

Для перехода в адаптивный режим просто нажмите кнопку «Адаптивный режим» на панели инструментов слева.

В опциях режима имеется три устройства для адаптирования дизайна сайта: мобильные устройства (315р), планшет (570р) и ПК (по умолчанию, 1080р).

Не обязательно адаптировать сайт под все устройства. Можете выбрать только одно устройство и разрабатывать сайт под него:

10

 

Изменения типографики

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

Некоторые элементы, как заголовки Н1 могут выглядеть хорошо на версии сайта для ПК, но для мобильных устройств они будут слишком велики.

 

Скрываем, меняем размеры и перестраиваем элементы

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

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

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

11

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

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

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

Выводы

В данной инструкции мы разобрались в работе с адаптивной версткой сайта в Upfront.

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

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

Как создать WordРress сайт с помощью конструктора Upfront:

Часть 1: Основные настройки, Цвет темы и Типографика
Часть 2: Управление областями сайта
Часть 3: Наполнение макета новыми элементами
Часть 4: Создание адаптивного дизайна для разных типов устройств
Часть 5: Работа со страницами и публикациями