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

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

Рассмотрим, как адаптировать стиль сайта для мобильной версии.

Обзор

Конструктор сайтов поддерживает версии устройств под разные разрешения экрана:

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

По умолчанию страница использует адаптивный дизайн, и стили десктопной версии синхронизируются с планшетной и мобильной версиями. Чтобы настроить версию отдельно, перейдите в нее и выключите переключатель Стили синхронизированы (Styles are synced).

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

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

Настройте шрифты

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

Скройте блоки и виджеты

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

Чтобы скрыть блок со всеми его элементами, перейдите в настройки блока и в поле Скрыть блок на (Hide block on) выберите версию устройства, в которой его нужно скрыть, — десктоп, планшет или мобильный.

Вы также можете настроить другие условия отображения элементов. Подробнее: Отображение блоков по условиям.

Обновлено: 18.10.2024