Перейти к основному контенту

Как создать мобильную версию сайта в REG.Site

Мобильная версия сайта – это версия основного сайта, которая адаптирована для мобильных устройств. Для этого применяется специальная верстка, благодаря которой пользователям удобно перемещаться по сайту и просматривать его страницы с мобильного телефона или планшета.

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

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

Одна из приятных особенностей REG.Site заключается в том, что он имеет адаптивный дизайн —основную часть элементов страницы он автоматически форматирует для мобильных устройств. Однако некоторые блоки всё же могут отображаться не совсем корректно. В инструкции мы покажем, как настроить такие элементы для мобильного варианта сайта на REG.Site.

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

Чтобы настроить мобильную версию в REG.Site, вам не потребуется устанавливать дополнительные плагины. Всё настраивается через Divi Visual Builder. При этом вносить изменения можно как через настройки контента и дизайна, так и через дополнительные настройки CSS.

Рассмотрим, как настроить неадаптивные блоки и элементы под мобильную модификацию на примере страницы интернет-магазина. Для этого:

1. Проверим, как сайт выглядит в мобильной версии.

2. Отредактируем нужные элементы.

Шаг 1. Проверьте, как выглядит сайт с мобильного устройства

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

  1. Перейдите в редактор сайта: Мобильная версия регсайт 1
  2. Кликните на три белых точки в фиолетовом круге: Мобильная версия регсайт 2
  3. В меню слева кликните на иконку телефона: Мобильная версия регсайт 3 Так страница выглядит с мобильного устройства: Мобильная версия регсайт 4 Видно, что большая часть блоков адаптирована под текущую версию. Однако некоторые элементы выглядят некорректно. Например, блок со сроком акции: Мобильная версия регсайт 5 Давайте отредактируем их.

Шаг 2. Отредактируйте неадаптивные элементы

Настроить сайт под мобильную версию можно через Visual Builder, через CSS и через настройки видимости. Рассмотрим, как это сделать.

Через Visual Builder

  1. Перейдите в настройки модуля: Мобильная версия регсайт 6
  2. В открывшемся блоке нажмите на иконку телефона: Мобильная версия регсайт 7Обратите внимание: все описанные ниже настройки можно выставить и для планшетной версии сайта. Для этого в панели вместе вместо иконки телефона выбирайте иконку планшета: Мобильная версия регсайт 8
  3. Отредактируйте элементы так, чтобы в мобильной модификации сайта они выглядели гармонично. Обратите внимание: все изменения отображаются в Visual Builder до сохранения — вы сможете посмотреть их в процессе редактирования. Например, измените размер, позиционирование или цвет шрифта: Мобильная версия регсайт 9Или добавьте в модуль или ряд новые элементы. Чтобы сохранить изменения, нажмите на белую галочку. Аналогичным образом настройте все модули, которые отображаются некорректно. Мобильная версия регсайт 13 После этого, чтобы не потерять изменения на всей странице, кликните Сохранить: Мобильная версия регсайт 14

Через CSS

Адаптивное редактирование Divi позволяет вносить более сложные изменения в дизайн страницы с помощью CSS. Чтобы использовать для настройки CSS:

  1. Перейдите в настройки модуля: Мобильная версия регсайт 15
  2. Перейдите на вкладку Дополнительно Пользовательский CSS. Количество доступных настраиваемых полей CSS будет отличаться в зависимости от элемента. Например, для текстового модуля есть только три настраиваемых поля: «Перед», «Основной элемент» и «После». Мобильная версия регсайт 16
  3. Каждое поле ввода CSS соответствует классу CSS внутри элемента. Чтобы увидеть соотношение, наведите указатель мыши на элемент и кликните на иконку вопроса: Мобильная версия регсайт 17
  4. Чтобы внести изменения, для каждого поля нажмите на иконку телефона. Также настройки можно выставить и для планшетной версии сайта: в панели перейдите на вкладку с иконкой планшета. Обратите внимание: код, который применяется для планшетной версии, по умолчанию распространяется и на мобильную версию. Мобильная версия регсайт 18
  5. Введите в поле ввода нужный код. Обратите внимание: не нужно добавлять класс CSS к фрагменту CSS, иначе код не сработает. Добавьте только свойства CSS в поле соответствующего класса. Предположим, вы хотите, чтобы кнопка охватывала всю ширину модуля на планшете и телефоне, но не на рабочем столе. Для этого на вкладке в поле ввода добавьте «display: block;»: Мобильная версия регсайт 19

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

Через настройки видимости

Также вы можете просто скрыть отдельный элемент или целый блок в мобильной версии. Для этого:

  1. Откройте настройки модуля и перейдите на вкладку Дополнительно.
  2. В блоке «Видимость» выберите те элементы, которые хотите скрыть: контент (основной текст), изображения (кнопку) или видео/изображения. Для этого переведите нужные переключатели в положение ДА, отметьте чекбокс Телефон и кликните на галочку в зеленом квадрате: Мобильная версия регсайт 10 В примере мы отключили отображение картинки в мобильной версии. Блок, для которого применены настройки, будет отображаться бледнее, чем остальные: Мобильная версия регсайт 11

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

    Мобильная версия регсайт 12

Чтобы не потерять изменения на всей странице, кликните Сохранить.

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

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 0 из 0