1. aspro.ru
  2. Аспро: Приорити 2.0
  3. Первые шаги
  4. Настройки для мобильной версии сайта

Настройки для мобильной версии сайта


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

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

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

e9fe95de-7b62-11f1-8fe4-fa163e2ff576


Во вкладке «Мобильная версия» есть примеры таких параметров для настройки как:

  • «Мобильная шапка» (1);
  • «Тип мобильного меню» (2);
  • «Способ отображения мобильного меню» (3).
368343d5-7b61-11f1-8fe4-fa163e2ff576

В темах оформления предусмотрены белая и цветная мобильные шапки.

ed540545-7b5d-11f1-8fe4-fa163e2ff576

1407a8bb-7b61-11f1-8fe4-fa163e2ff576

Типы мобильного меню предлагают 2 варианта: «Краткий» и «Подробный».

В первом случае навигационное меню содержит только разделы сайта.

ed8033db-7b63-11f1-8fe4-fa163e2ff576

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

c00864cb-7b61-11f1-8fe4-fa163e2ff576

Во втором – подключаются дополнительные блоки: личный кабинет, корзина, адрес компании и способы связи.

Для Аспро: Digital – это личный кабинет, корзина, адрес компании и способы связи.

c5647888-7b5d-11f1-8fe4-fa163e2ff576

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

7845a7dc-7b60-11f1-8fe4-fa163e2ff576


Мобильное меню может выдвигаться слева или выпадать сверху.


12be3684-7b63-11f1-8fe4-fa163e2ff576

96f6e9b4-7b5e-11f1-8fe4-fa163e2ff576

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

b000fb26-7b5c-11f1-8fe4-fa163e2ff576


В Аспро: Digital применить настройки для мобильной версии можно только в админке: Рабочий стол → Аспро: Digital → Настройки.


053032bf-7b5e-11f1-8fe4-fa163e2ff576

В блоке «Мобильная версия» установите ту комбинацию настроек, которая вам нравится.

a1af7d8e-7b62-11f1-8fe4-fa163e2ff576

В пунктах меню «Мобильная шапка» и «Тип мобильного меню» присутствует вариант «Custom», которого нет в виджете настроек. Этот вариант предназначен для разработчиков.

Просмотр мобильной верстки с ПК

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

В Google Chrome, Mozilla Firefox и Яндекс браузере инструменты разработчика открываются клавишей F12.

В браузере Opera нужно открыть меню браузера и кликнуть пункт Другие инструменты → Показать меню разработчика.

4b460ff7-7b60-11f1-8fe4-fa163e2ff576

Появится пункт «Разработка». Отсюда можете вызвать подпункт «Инструменты разработчика» или зажать комбинацию Ctrl+Shift+I.

ee486f05-7b5b-11f1-8fe4-fa163e2ff576

Расположение кнопки перехода в режим адаптивного дизайна у Google Chrome, Opera и Яндекс браузера:

4d78eb68-7b5d-11f1-8fe4-fa163e2ff576

Кнопка перехода в режим адаптивного дизайна у Mozilla Firefox:

3c42be87-7b64-11f1-8fe4-fa163e2ff576

Предыдущая статья Техническая поддержка
Следующая статья Типовые настройки решения