К основному содержимому
Все коллекцииРедактор дизайна
Настройка дизайна мобильной версии
Настройка дизайна мобильной версии

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

Обновлено более месяца назад

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

Настройку дизайна для мобильной версии можно сделать в Сайт → Дизайн → Редактор дизайна → Мобильная версия сайта.

Настройка мобильной версии в редакторе дизайна — Хорошоп

Здесь можно вносить доступные для мобильной версии изменения практически во все те же самые части сайта, что и на десктопе:

  • Визуальный стиль

  • Шапка сайта

  • Меню

  • Футер сайта

  • Главная страница

  • Страница категории

  • Мини-карточка товара

  • Страница товара

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

Визуальный стиль

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

Настройка визуального стиля мобильной версии в редакторе дизайна — Хорошоп

Шапка сайта

Шапка сайта в мобильной версии — сквозной верхний блок, который отображается на всех страницах сайта. Шапка для мобильных имеет специальную структуру, адаптированную под потребности посетителя на мобильном устройстве.

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

Схематически шапка мобильной версии имеет три равные по ширине секции. В этой вкладке настроек вы можете отключать определенные элементы шапки, а также перемещать их между секциями (частями) шапки.

Настройка шапки мобильной версии сайта в редакторе дизайна — Хорошоп

Шапка в мобильной версии может содержать самые главные функциональные элементы, которые присутствуют на десктопе, а именно:

  • Кнопка меню

  • Логотип

  • Поиск

  • Контактная информация

  • Сравнение товаров

  • Избранное

  • Корзина

Меню

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

Настройка меню в мобильной версии — Хорошоп

Футер сайта

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

Настройка футера мобильной версии сайта — Хорошоп

Главная страница

Блоки главной страницы

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

Вы можете менять порядок расположения блоков и баннеров на главной странице, перетаскивая полоски блоков на новые места.

Увидеть доступные для блока настройки стиля можно, кликнув на полоску блока — панель с настройкой для блока развернется на странице.

Настройка главной страницы мобильной версии — Хорошоп

Подробнее обо всех возможных блоках главной страницы — в отдельной статье.

Настройка баннерных линий

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

Для добавления новой баннерной линии:

  1. Нажмите кнопку + Добавить баннер.

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

  3. Задайте Название баннера — старайтесь дать понятное название, ведь по этому названию вы сможете определить нужную линию при дальнейшей работе с баннерами.

  4. Выберите Шаблон баннера из выпадающего списка. Полный перечень доступных шаблонов можно увидеть в статье Баннеры в мобильной версии.

  5. Задайте высоту, отступы и радиус скругления для баннеров в этой линии.

  6. Сохраните изменения.

Настройка баннеров в мобильной версии — Хорошоп

Обратите внимание: отдельные баннеры для десктопной версии можно задать в Сайт → Дизайн → Редактор дизайна → Главная страница.

Баннерная линия не будет отображаться на сайте, пока вы не добавите соответствующие изображения в Сайт → Баннеры.

Страница категории

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

  • Панель сортировки и отображения

  • Фильтры

  • Меню подкатегорий

Настройка страницы категории в мобильной версии — Хорошоп

Миникарточка товара

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

Настройка миникарточки товара в мобильной версии — Хорошоп

Страница товара

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

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

Настройка стораницы товара в мобильной версии — Хорошоп
Нашли ответ на свой вопрос?