Якщо ви використовуєте стандартні блоки WordPress для створення сторінок на вашому сайті, проблемою буде їх адаптивність для мобільних пристроїв. За замовчуванням у параметрах стандартних блоків немає можливості вказати різні параметри для різних типів пристроїв. У цій статті розглянемо два варіанти вирішення цієї проблеми.
Проблема
Для наочності продемонструємо типову ситуацію під час створення секцій з нуля за допомогою стандартних блоків WordPress. Ось секція, яка виглядає добре на екранах комп’ютерів:
Якщо відкрити режим перегляду з планшета або смартфона (кнопка у вигляді ноутбука у правому верхньому куті редактора блоків), часто виявляється так, що зображення стають величезними.
У популярних сайтах білдерів на кшталт Elementor або додаткових блоків на кшталт Spectra є вбудований функціонал, який дозволяє налаштовувати дизайн блоків по-різному для різних типів пристроїв.
У стандартних блоків WordPress за замовчуванням нічого подібного немає. Але це не означає, що потрібно відмовлятися від їх використання. Є два рішення цієї проблеми: просте та просунуте. Про них і розповімо.
Рішення №1 (просте): встановити плагін для адаптивності
Є плагіни, які додають до стандартних блоків WordPress додаткові опції на кшталт тих, які є в Elementor або Spectra. Один із таких плагінів — Blocks Responsive.
Додаткові опції з’являться на бічній панелі кожного стандартного блоку WordPress — розділ «Responsive settings» з синьою іконкою планшета з мобільним.
У цьому розділі спочатку йдуть кнопки, які дають змогу вимкнути блок на конкретному типі пристроїв.
Нижче йдуть підрозділи різними параметрами блоку, в яких можна вказати різні значення для різних типів пристроїв:
- Alignment — Вирівнювання
- Colors — Кольори
- Background — Фонове зображення
- Typography — Типографіка
- Dimensions — Розміри
- Border & Shadows — Межі та тіні
- Position & Overflow — Позиція та накладення контенту
Виправити проблему адаптивності з прикладу на початку статті можна за допомогою параметрів у підрозділі «Dimensions» (Розміри). Достатньо зробити так, щоб на планшетах та смартфонах замість однієї колонки було декілька.
Для цього потрібно обрати колонку, знайти в підрозділі Dimensions опцію Width (ширина) і встановити максимальну ширину (клітинка Max) на 45%. І так для кожної колонки. Тільки за замовчуванням замість відсотків в середині клітинки стоять пікселі. Потрібно клацнути на «px» і змінити на «%».
Рішення №2 (просунуте): CSS-код з оператором @media
Якщо з якоїсь причини вам не підходить плагін або просто так більше подобається, можна зробити блоки адаптивними за допомогою CSS-коду. Для цього в CSS існує поняття Media Queries (Медіа-запити). За допомогою цих запитів можна змінювати параметри блоків на основі ширини екрана пристрою.
Наприклад, за замовчуванням для блоку працюють одні налаштування, але CSS-код вказує, що для екранів, ширина яких менше 767 пікселів, потрібно застосувати інші налаштування. По суті так само працює і плагін Block Responsive, і адаптивність в Elementor та блоках Spectra.
Ширина екрана пристрою вказується за допомогою оператора @media, в який вкладається безпосередньо код для CSS-класу, який вказує на потрібний блок. Ось приклад такого коду:
@media (max-width: 767px) {
.mobile-column {
width: 45%;
}
}
У цьому коді йдеться, що на екранах з максимальною шириною 767 пікселів блок із класом .mobile-column повинен мати ширину — 45%. Сподіваюся, ідея зрозуміла.
Як знайти CSS-клас потрібного елемента
Щоб змінити блок потрібно знати, як до нього звернутися. Кожен блок має свою «адресу» або «ім’я» — CSS-клас.
Відкрийте ваш сайт у браузері. Клацніть правою кнопкою миші за текстом або блоком, який хочете змінити. Виберіть «Дослідити».
Праворуч або знизу відкриється панель з HTML-розміткою сторінки. Вам потрібно знайти рядок, який починається з class="... " . Наприклад, до колонки, яка виділена кольором на скріншоті нижче, відносяться два CSS-класи: wp-block-uagb-container і uagb-block-bb7d2d8b.
Але є навіть більш простий спосіб. Щоб не гадати, який клас стандартний, а який ні, краще призначте власний клас у редакторі WordPress. Для цього виділіть потрібний блок у редакторі, на бічній панелі розкрийте розділ «Додатково» та впишіть у поле «Додаткові CSS-класи» будь-яке ім’я латиницею, наприклад: mobile-column.
Куди вставляти CSS-код
Це робиться в налаштувач теми:
- Перейдіть до розділу «Вигляд — Налаштувати».
- Знайдіть розділ «Додатковий CSS» на бічній панелі внизу.
- Скопіюйте ваш код і вставте його на початок або кінець текстового поля.
- Натисніть «Опублікувати» у верхній частині бічної панелі.
Потім просто відкрийте режим перегляду сайту з планшета або смартфона в нижній частині бічної панелі — якщо код робочий, зміни відобразяться миттєво.
Брейкпойнти
Ось шпаргалка з часто використовуваними значеннями ширини екрану для різних пристроїв:
- Смартфони — @media (max-width: 767px)
- Планшети — @media (min-width: 768px) and (max-width: 1024px)
- Комп’ютери — @media (min-width: 1025px)
Що далі
Сподіваємося, поради в цій статті допоможуть вам зробити так, щоби стандартні блоки WordPress виглядали красиво на маленьких екранах. Якщо щось не було зрозуміло чи не виходить, залиште коментар, спробуємо допомогти.