Багато новачків стикаються з проблемою: сторінки, розроблені на комп'ютері, на мобільних пристроях виглядають нерозбірливо, а зображення перекриваються. Це відбувається через відсутність адаптивного дизайну. Elementor має потужну функцію адаптивного редагування, яка дозволяє легко налаштувати веб-сайт так, щоб він виглядав красиво і зручно на комп'ютерах, планшетах і смартфонах.
Що таке адаптивний дизайн?
Простіше кажучи,Адаптивний дизайн — це коли одна веб-сторінка автоматично змінює своє розташування відповідно до розміру екрану пристрою.：
- На комп'ютері (на великому екрані) вміст може відображатися поруч один з одним (наприклад, три стовпці зображень);
- На планшеті (з середнім екраном) він автоматично перетворюється на два стовпці;
- На мобільних пристроях (з маленьким екраном) текст автоматично розташовується в один стовпець, щоб уникнути надто малого розміру шрифту або переповнення контенту.
Elementor автоматично адаптується до більшості сценаріїв, але все ж потребує ручного налаштування деталей, щоб забезпечити найкращий досвід на кожному пристрої.
Перший крок: ознайомтеся з режимом редагування з адаптивним дизайном в Elementor.
Після входу в інтерфейс редагування Elementor у верхній панелі інструментів праворуч є три іконки, які відповідають трьом переглядам пристрою:
- 🖥️ Перегляд на робочому столі(Відображається за замовчуванням)
- 📱 Планшетний вид(Ширина приблизно 768 пікселів)
- 📱 Переглядати на мобільному телефоні(Ширина приблизно 375 пікселів)
Інструкції по використаннюНатисніть відповідну іконку, щоб перейти до режиму перегляду на цьому пристрої. Усі зміни стилю (наприклад, розмір шрифту, інтервал, макет) можна налаштувати окремо для кожного пристрою, і вони не впливатимуть один на одного.
Другий крок: основні налаштування адаптивного дизайну (обов'язково 3 пункти)
Розмір тексту: уникайте того, щоб текст на телефоні був занадто малим або занадто великим.
Текст, який виглядає добре на комп'ютері, може бути нерозбірливим (занадто малим) або з перевернутими рядками (занадто великим) на телефоні, тому його потрібно налаштувати окремо:
- Виберіть текстовий модуль (заголовок, абзац тощо) і перейдіть на панель "Стилі" праворуч.
- Знайдіть налаштування "Розмір шрифту" і натисніть на "Респонсивний значок" поруч із відповідним значенням (значок маленького комп'ютера; після натискання на нього з'являться три поля вводу, які відповідають розмірам для настільних комп'ютерів, планшетів і мобільних телефонів).
- Перейдіть у режим перегляду на мобільному пристрої та введіть відповідні розміри (наприклад, заголовок на мобільному пристрої має бути 24-32 пікселів, а абзаци — 14-16 пікселів).
привертати увагу до чого-л.Розмір тексту має відповідати принципу "чим менший екран, тим текст має бути не надто великим, але достатньо чітким", щоб його можна було прочитати на телефоні без збільшення.
Зображення та ширина модулів: уникайте перевищення розміру екрана.
Зображення, встановлене на комп'ютері з шириною "80%", на телефоні все ще може виглядати занадто широким або з надто великими білими смужками з боків:
- Виберіть зображення / модуль і перейдіть на панель "Стиль" праворуч (зображення знаходиться в розділі "Стиль" → "Ширина", а інші модулі можуть знаходитися в розділі "Додатково" → "Ширина").
- Натисніть на значок із зображенням смартфона поруч із показником "Ширина", щоб перейти до "Мобільного перегляду".
- Встановіть ширину як "100%" (щоб зображення/модуль заповнили ширину екрану телефону і не залишилися білі краї по краях) або відрегулюйте її за потреби (наприклад, "90%", щоб залишити невеликий відступ).
Зверніть увагу.Якщо розмір самого зображення занадто малий, його буде розмито при налаштуванні на 100%. Рекомендується заздалегідь підготувати високоякісне зображення (шириною не менше 1000 пікселів).
Інтервали та поля: уникайте, щоб контент був занадто тісним.
Простір на екрані смартфона обмежений, і занадто великий проміжок між модулями буде марною тратою місця, а занадто малий виглядатиме занадто тісно:
- Виберіть будь-який модуль (наприклад, кнопку або абзац) і перейдіть на панель "Додаткові налаштування" праворуч.
- Щоб знайти "зовнішні відступи" (відстань між модулем та іншими елементами) або "внутрішні відступи" (відстань між внутрішнім вмістом модуля та його рамкою), натисніть на "піктограму адаптивності" поруч із відповідним значенням.
- Перейдіть у "мобільний перегляд" і зменшіть значення (наприклад, змініть верхній відступ з 50 до 20 пікселів, щоб модуль виглядав компактніше).
\nНавичкиНатисніть і утримуйте Ctrl Виберіть декілька модулів одночасно за допомогою клавіш і змініть відступи для всіх відразу, щоб працювати ефективніше.
Третій крок: коригування макета (оптимізація розташування стовпців на мобільних пристроях).
Якщо на вашій головній сторінці використовується "багатостовпцевий макет" (наприклад, 3 стовпці з описом послуг або 2 стовпці зі змішаними текстовими та графічними елементами), на мобільних пристроях він може виглядати занадто тісно, тому його необхідно перетворити на одностовпцевий макет:
- Знайдіть розділ, що містить кілька стовпців (натисніть на синій пунктирний контур за межами модулю, щоб вибрати весь розділ).
- Перейдіть на панель "Макет" праворуч і знайдіть налаштування "Колонки" (наприклад, зараз у вас "3 колонки").
- Натисніть на значок із символом смартфона поруч із значенням у стовпці, щоб перейти до "мобільної версії".
- Змініть кількість стовпців на "1 стовпець", і в такому випадку вміст автоматично розташується в один стовпець на телефоні, що забезпечить кращу читабельність.
ПрикладНа комп'ютері продукти відображаються у три стовпці, на планшеті — у два стовпці, а на смартфоні — у один стовпець. Це дозволяє ефективно використовувати простір на великому екрані та забезпечує хорошу читабельність на маленькому екрані.
Крок 4: Сховайте непотрібні елементи (для маленьких екранів)
Деякі елементи можуть збагатити сторінку на комп'ютері, але виявитися зайвими на мобільному пристрої (наприклад, складні декоративні іконки, великі тексти з поясненнями), і їх можна приховати на мобільному пристрої:
- Виберіть модуль, який потрібно сховати, і перейдіть до панелі "Додаткові налаштування" праворуч.
- Перейдіть до налаштувань "Адаптивний", знайдіть опцію "Приховувати на мобільних пристроях" (або відмітьте пункти "Приховувати на настільних комп'ютерах" і "Приховувати на планшетах" окремо).
- Відмітьте пункт "Приховувати на мобільних пристроях", і модуль автоматично зникне з перегляду на телефоні, не впливаючи на відображення на комп'ютері або планшеті.
Придатні сценаріїДекоративні бічні іконки, контактні форми, призначені для комп'ютерів (їх можна замінити на більш компактні форми на мобільних пристроях).
5-й крок: перегляд та тестування (ключовий крок)
Після завершення налаштувань обов’язково перевірте їх на реальному пристрої (або ретельно перевірте за допомогою функції попереднього перегляду в Elementor):
- Переглянути в режимі попереднього перегляду в ElementorНатисніть по черзі на іконки "Настільний комп'ютер → Планшет → Телефон" і прокрутіть сторінку, щоб перевірити кожен модуль:
- Чи відображається текст повністю (без обривів і перекриття)?
- Чи є зображення чіткими і повністю покривають екран (без розтягування або деформації)?
- Чи є кнопка достатньо великою (щонайменше 44х44 пікселів на мобільному пристрої, щоб її було зручно натискати)?
- Тестування на реальних пристроях.Скануйте за допомогою смартфона "QR-код" у верхній частині Elementor, відкрийте сторінку на своєму телефоні, натисніть на кнопки та введіть текст, щоб відчути плавність скролінгу.
- Виправлення поширених проблем.：
- Якщо текст розтягується та не виглядає акуратно: зменшіть розмір шрифту на мобільному пристрої або збільште ширину модулю.
- Якщо зображення деформоване: налаштуйте "Адаптацію об'єкта" на мобільному пристрої як "Покриття" (Зображення → Стиль → Адаптація об'єкта).
- Якщо кнопки занадто малі: збільште "внутрішній відступ" кнопок на мобільних пристроях (не менше 15 пікселів зверху і знизу та не менше 20 пікселів зліва і справа).
Принципи адаптивного дизайну, які необхідно запам'ятати новачкам.
- 移动优先При проектуванні спочатку необхідно врахувати вигляд на мобільних пристроях, а потім розширити його на комп'ютери (щоб уникнути значних змін на пізніших етапах).
- Менше — це більше.Простір на екрані смартфона обмежений, тому на ньому відображається лише основна інформація, а зайві елементи видаляються.
- СпівставністьКольори та стиль шрифтів мають бути однаковими на всіх пристроях, щоб уникнути плутанини у відвідувачів.
- Регулярні перевірки.Після кожного додавання нового модуля перемикайтеся на перегляд для мобільних пристроїв, щоб переконатися, що все відображається коректно.
За допомогою вищеописаних кроків ваш вебсайт буде виглядати професійно на комп’ютерах, планшетах і смартфонах. Хоча адаптивний дизайн може здаватися складним, після кількох спроб з Elementor ви побачите, що для вирішення проблем із відображенням на 90% достатньо лише тонко налаштувати кілька ключових параметрів для різних пристроїв. Практикуйтеся і тестуйте, і ви швидко освоїте це!
Українська