Как адаптировать страницу в универсальном блоке
В этой статье расскажем, как и зачем адаптировать страницу созданную в универсальном блоке.
Если созданная страница в универсальном блоке хорошо выглядит на компьютере, но на экране мобильного телефона или планшета сайт будет отображаться не правильно так как размер этих устройств разный.
Основная информация
В универсальном блоке необходимо настроить адаптацию для планшета и телефона в горизонтальном и вертикальном положении.
Для компьютера размер блока состовляет 1200px
Планшет в горизонтальном положении 960px
Планшет в вертикальном положении 640px
Телефон в горизонтальном положении 480px
Телефон в вертикальном положении 320px
Для это в блоке есть данный инструмент, который при переключении автоматически показывает нужный размер страницы в которой должны поместится все созданные элементы сайта: текст, фигуры, кнопки, видео и прочее

Изначально мы создаем дизайн для большой версии экрана (компьютер)

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

Планшет в вертикальном положении 640px

Телефон в горизонтальном положении 480px

Телефон в вертикальном положении 320px

Все базовые блоки в конструкторе сайтов автоматически адаптируются под нужный размер экран. Какие существуют базовые блоки читайте в следующих статьях.
Видео-инструкция
Last updated
Was this helpful?