Перейти до основного контенту
Усі колекціїРедактор дизайну
Налаштування дизайну мобільної версії
Налаштування дизайну мобільної версії

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

Оновлено протягом останнього тижня

Завдяки редактору дизайну ви можете встановити для мобільної версії свого сайту окремі налаштування, які будуть відрізнятися від десктопного варіанту. Зокрема, ви можете змінити порядок відображення блоків на головній сторінці, налаштувати для мобільних пристроїв інші банери, перемістити елементи на сторінці товару тощо.

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

Тут можна вносити доступні для мобільної версії зміни практично в тіж частини часту, що і на десктопі:

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

  • Шапка сайту

  • Меню

  • Футер сайту

  • Головна сторінка

  • Сторінка категорії

  • Мінікартка товару

  • Сторінка товару

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

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

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

Шапка сайту

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

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

Схематично шапка мобільної версії має три рівні за шириною секції. У цій вкладці налаштувань ви можете відключати певні елементи шапки, а також перемішувати їх між секціями (частинами) шапки.

Шапка в мобільній версії може містити найголовніші функціональні елементи, які присутні на десктопі, а саме:

  • Кнопка меню

  • Логотип

  • Пошук

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

  • Порівняння товарів

  • Обране

  • Кошик

Меню

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

Налаштування меню в мобільній версії — Хорошоп

Футер сайту

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

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

Головна сторінка

Блоки головної сторінки

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

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

Побачити доступні для блоку налаштування стилю, можна клікнувши на полоску блоку — панель з налаштуванням для блоку розгорнеться на сторінці.

Налаштування головної сторінки

Детальніше про всі можливі блоки головної сторінки — в окремій статі.

Налаштування банерних ліній

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

Для додавання нової банерної лінії:

  1. Натисніть кнопку +Додати банер.

  2. Оберіть Версію сайту, де використовується банер — виключно для мобільного сайту чи він буде відображатись на десктопі і на мобільній версії.

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

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

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

  6. Збережіть зміни.

Налаштування банерів на мобільній версії — Хорошоп

Зверніть увагу: окремі банери для десктопної версії можна задати в Сайт → Дизайн → Редактор дизайну → Головна сторінка.

Банерна лінія не буде відображатися на сайті поки ви не додасте відповідні зображення в Сайт → Банери.

Сторінка категорії

Для сторінки каталогу в мобільній версії можна задати параметри відображення наступних елементів:

  • Панель cортування та відображення

  • Фільтри

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

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

Мінікарта товару

На мобільних пристроях мінікартка не змінюється при наведені, тому в її налаштування ми додали опції, які дозволяють змінити наявна на картці інформацію саме для мобільних пристроїв.

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

Сторінка товару

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

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

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