Адаптивный дизайн

Адаптивный режим

Режим адаптивного дизайна обеспечивает подходящее отображение вашего сайта на мобильных телефонах и планшетах.

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

Отдельных настроек для мобильной версии нет.

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

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

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

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

Как сделать, чтобы фоновые изображения не обрезались на мобильных

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

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

Текст, вшитый в картинку, не индексируется поисковиками — потенциальный клиент просто не найдет ваш лендинг.

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

Не перегружайте первый экран текстом

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

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

Делайте первый экран таким, чтобы он помещался в адаптивной версии.