Відображення сайтів на мобільних пристроях
Всі сайти, створені на Weblium, повністю адаптуються, тому ви можете працювати тільки з десктопною версією сайту, не турбуючись про те, як вона виглядатиме на мобільних пристроях. Наш конструктор створює мобільну версію сайту автоматично.
У цій статті ми розповімо про основні принципи відображення різних елементів та блоків на мобільних пристроях.
Відступи та шрифти на мобільному пристрої налаштовуються автоматично, і чим більше відступ буде на десктопній версії, тим більше він буде на мобільній версії. Відступи до 90px не змінюються на мобільних та планшетах, але більші відступи регулюються пропорційно.
Те саме зі шрифтами: для заголовків розмір шрифтів залишається пропорційно великим на малих екранах.
Шапка сайту — верхній блок на сайті, який зазвичай використовується для побудови навігації. Більше інформації про цей блок ви можете знайти в статті Налаштування шапки сайту.
Усі компоненти шапки сайту в мобільній версії сайту переміщуються у так зване гамбургер-меню. Оскільки велике навігаційне меню може займати занадто багато місця на мобільному пристрої або бути замалим для читання, увесь вміст (кнопки, навігаційне меню, іконки соціальних мереж) приховується в гамбургер-меню, поки користувач не розгорне його.
Наприклад, ось як виглядає шапка сайту в декстопній версіїі:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1022_w9w02o.png)
І ось як вона буде виглядати на мобільних пристроях:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1023_1c1car5.png)
Натиснувши кнопку меню, відвідувачі побачать усі приховані компоненти:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1024_ru15o6.png)
Примітка: фон гамбургер-меню — це колір фону шапки сайту. Навіть якщо шапка сайту прозора, гамбургер-меню запозичить попередньо вказаний колір.
Усі блоки з кількома елементами — колекція, список, галерея — відображатимуться вертикально на мобільних пристроях. Позиція цих елементів на мобільному екрані визначається їх положенням на десктопній версії: ми зберігаємо порядок зліва направо, просто трансформуємо його у вертикальний макет.
Наприклад, ось як виглядає блок колекції на десктопі:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1025_ccku2.png)
А ось як він виглядає на мобільному:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1026_oqn85j.png)
Примітка: порожні стовпці та колекції не відображаються на малих екранах.
Кожен рядок таблиці перетворюється на окрему картку. Стовпці в шапці таблиці будуть розміщені праворуч, а їх вміст — ліворуч.
Так виглядають таблиці на десктопі:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1028_815p9k.png)
А ось як виглядатиме цей рядок на мобільних пристроях:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1029_n485vv.png)
Підказка: перегляньте статтю про Додавання таблиць, щоб дізнатися, як можна додавати таблиці на свій сайт та керувати ними.
Якщо ви не хочете показувати певний блок на мобільних пристроях, дотримуйтесь інструкцій у статті про Приховування блоку на мобільних пристроях.
У цій статті ми розповімо про основні принципи відображення різних елементів та блоків на мобільних пристроях.
Відступи та шрифти в мобільній версії сайту
Відступи та шрифти на мобільному пристрої налаштовуються автоматично, і чим більше відступ буде на десктопній версії, тим більше він буде на мобільній версії. Відступи до 90px не змінюються на мобільних та планшетах, але більші відступи регулюються пропорційно.
Те саме зі шрифтами: для заголовків розмір шрифтів залишається пропорційно великим на малих екранах.
Вигляд шапки сайту на мобільних пристроях
Шапка сайту — верхній блок на сайті, який зазвичай використовується для побудови навігації. Більше інформації про цей блок ви можете знайти в статті Налаштування шапки сайту.
Усі компоненти шапки сайту в мобільній версії сайту переміщуються у так зване гамбургер-меню. Оскільки велике навігаційне меню може займати занадто багато місця на мобільному пристрої або бути замалим для читання, увесь вміст (кнопки, навігаційне меню, іконки соціальних мереж) приховується в гамбургер-меню, поки користувач не розгорне його.
Наприклад, ось як виглядає шапка сайту в декстопній версіїі:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1022_w9w02o.png)
І ось як вона буде виглядати на мобільних пристроях:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1023_1c1car5.png)
Натиснувши кнопку меню, відвідувачі побачать усі приховані компоненти:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1024_ru15o6.png)
Примітка: фон гамбургер-меню — це колір фону шапки сайту. Навіть якщо шапка сайту прозора, гамбургер-меню запозичить попередньо вказаний колір.
Вигляд блоків із декількома елементами в мобільній версії сайту
Усі блоки з кількома елементами — колекція, список, галерея — відображатимуться вертикально на мобільних пристроях. Позиція цих елементів на мобільному екрані визначається їх положенням на десктопній версії: ми зберігаємо порядок зліва направо, просто трансформуємо його у вертикальний макет.
Наприклад, ось як виглядає блок колекції на десктопі:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1025_ccku2.png)
А ось як він виглядає на мобільному:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1026_oqn85j.png)
Примітка: порожні стовпці та колекції не відображаються на малих екранах.
Вигляд таблиць на мобільних пристроях
Кожен рядок таблиці перетворюється на окрему картку. Стовпці в шапці таблиці будуть розміщені праворуч, а їх вміст — ліворуч.
Так виглядають таблиці на десктопі:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1028_815p9k.png)
А ось як виглядатиме цей рядок на мобільних пристроях:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1029_n485vv.png)
Підказка: перегляньте статтю про Додавання таблиць, щоб дізнатися, як можна додавати таблиці на свій сайт та керувати ними.
Якщо ви не хочете показувати певний блок на мобільних пристроях, дотримуйтесь інструкцій у статті про Приховування блоку на мобільних пристроях.
Оновлено: 26/04/2024
Дякуємо!