Як оптимізувати сайт для мобільних пристроїв?

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

⚙️ Якщо ви хочете налаштувати різні частини вашого вебсайту по-різному для мобільних пристроїв та настільних комп'ютерів, можливо, вам потрібно буде оптимізувати контент для кожного пристрою окремо. Можна створити окремі розділи для кожного типу пристрою. Наприклад, розділи, призначені для мобільних телефонів, не будуть відображатися користувачам, які відвідують ваш сайт на ноутбуці.

Налаштування видимості

Крок 1: Знайдіть налаштування

Наведіть вказівник миші на відповідний розділ. Ви побачите наступну панель з налаштуваннями у верхньому правому куті:

Крок 2: Продублюйте секцію

📌 Примітка: Якщо ви не бажаєте, щоб розділ був доступний в обох версіях (мобільній та десктопній), ви можете пропустити цей крок.

Натисніть на іконку [...], а потім на «дублювати». Тепер у вас буде два розділи, які ви зможете редагувати окремо. Один для стаціонарних комп'ютерів і один для мобільних пристроїв.

Крок 3: Змініть налаштування видимості

Будь ласка, виберіть, чи повинен розділ відображатися тільки на комп'ютері або тільки на мобільних пристроях.

За допомогою параметра «видимість» ви можете вибрати пристрій, на якому буде відображатися цей розділ. Onepage розпізнає, з якого пристрою відвідувач отримує відвідує ваш сайт, і відповідно відображає або приховує цей розділ. Ця концепція називається «Responsive Design».

Крок 4: Опублікувати/оновити

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

Перегляд мобільних версій

Натисніть на іконку "дисплей" внизу праворуч і активуйте приховані розділи. Це і є мобільні розділи, які зазвичай не відображаються.

Редагувати мобільне меню (burger меню)

Якщо ви додасте меню (header) на сторінку, у мобільній версії буде відображатися спеціальне мобільне меню.

* Це меню також відоме англійською як burger menu.

За потреби ви можете змінити дизайн мобільного меню. Відкрийте налаштування видимості та натисніть на «Мобільний стиль»:

🎬 Ось короткий відеоурок:

Поширені питання та їх вирішення

Як зрозуміти, який розділ доступний для комп'ютерів, а який - для мобільних пристроїв?

Наведіть вказівник миші на розділ. У верхньому правому куті ви побачите кнопку, яка показує поточне налаштування видимості:

📌Примітка: щоб уникнути плутанини в розділах, ми рекомендуємо просто перейменувати їх.

Чому моя сторінка не прокручує до вказаного розділу?

Будь ласка, перевірте, чи функція прокрутки посилається на розділ з однієї і тієї ж версії (комп'ютерна/мобільна).

Кнопка на панелі інструментів не може посилатися на розділ, який доступний лише для мобільних пристроїв, оскільки мобільний розділ не завантажується на комп'ютері.

Чому мій розділ зафарбовано сірим кольором?

Це означає, що цей розділ не ввімкнено для поточної версії.

Наприклад: ви зараз переглядаєте десктопну версію. Це означає, що всі мобільні розділи будуть сірими. І навпаки, всі десктопні розділи будуть сірими в мобільній версії.

Як приховати мобільне меню?

Наразі це неможливо. Однак ви можете просто використовувати «звичайний» розділ з логотипом замість цього:

💡Бажаєте залишити відгук до цієї статті? Будь ласка, напишіть у наш чат або за адресою support@onepage.io, і ми зможемо її покращити. Дякуємо!🙂