Если вы используете стандартные блоки WordPress при создании страниц на вашем сайте, проблемой будет их адаптивность для мобильных устройств. По умолчанию в параметрах стандартных блоков нет возможности указать разные значения опций для разных типов устройств. В этой статье рассмотрим два варианта решения этой проблемы.
Проблема
Для наглядности продемонстрируем типичную ситуацию при создании секций с нуля при помощи стандартных блоков WordPress. Вот секция, которая выглядит хорошо на экранах компьютеров:
Если открыть режим просмотра с планшета или смартфона (кнопка в виде ноутбука в правом верхнем углу редактора блоков), часто оказывается так, что изображения становятся огромными.
В популярных сайт билдерах по типу Elementor или дополнительных блоков по типу Spectra есть встроенный функционал, который позволяет настраивать дизайн блоков по разному для разных типов устройств.
У стандартных блоков WordPress по умолчанию ничего подобного нет. Но это не значит, что нужно отказываться от их использования. Есть два решения этой проблемы: простое и продвинутое. О них и расскажем.
Решение №1 (простое): установить плагин для адаптивности
Есть плагины, которые добавляют к стандартным блокам WordPress дополнительные опции наподобие тех, которые есть в Elementor или блоках Spectra. Один из таких плагинов — Blocks Responsive.
Дополнительные опции появятся на боковой панели у каждого стандартного блока WordPress — раздел «Responsive settings» с синей иконкой планшета с мобильным.
В этом разделе сначала идут кнопки, которые позволяют выключить блок на конкретном типе устройств.
Ниже идут подразделы различными параметрами блока, в которых можно указать разные значения для разных типов устройств:
- Alignment — Выравнивание
- Colors — Цвета
- Background Image — Фоновое изображение
- 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-класс.
Откройте ваш сайт в браузере. Кликните правой кнопкой мыши по тексту или блоку, который хотите изменить. Выберите «Просмотреть код» (Inspect).
Справа или внизу откроется панель с 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 выглядели красиво на маленьких экранах. Если что-то не было понятно или не получается, оставьте комментарий, попробуем помочь.