Адаптивное управление — давно востребованная функция для Редактор блоков WordPress. Изменение дизайна или макета страницы в зависимости от устройства пользователя является основой современного веб-дизайна. Тем не менее, для этого в WordPress обычно требуется стороннее решение, например, конструктор страниц. К счастью, ситуация меняется.
Проект WordPress медленно, но верно приближается к адаптивным настройкам блоков. Версия 6.9 представила Блокировать видимость функция, позволяющая временно отключить блокировку, не удаляя ее из публикации. WordPress 7.0 пошел еще дальше, добавив опции для скрытия блока. на основе устройства.
Возможно, это нишевая особенность. Но это также очень удобно для таргетинга пользователей мобильных или настольных компьютеров с помощью определенных блоков. И это также ворота в более отзывчивое управление приземление в WordPress 7.1.
Сегодняшний совет покажет вам, как легко показать или скрыть блок в зависимости от устройства пользователя. Вот так!
Пример проекта: Упрощение Hero Area для мобильных пользователей
Вот распространенный сценарий: на вашем веб-сайте есть большая главная область с изображением высокого разрешения, текстом и призыв к действию (CTA). Он отлично смотрится на настольном устройстве, но неуклюже на телефоне. Изображение слишком велико, и в нем слишком много текста, чтобы пользователи могли его переварить. Что делать?
Адаптивные элементы управления видимостью блоков сделают эту задачу проще простого. Мы создадим две области героев — одну для настольных компьютеров и другую, оптимизированную для мобильных устройств. Результатом станет лучший пользовательский опыт для всех.
Шаг 1. Создайте главные области для настольных и мобильных устройств
Первым шагом является создание двух главных областей для нашей страницы. Хорошо возьми один из WordPress Библиотека шаблонов блоков и посмотрим, что мы можем с этим сделать.
Наша главная область рабочего стола прекрасна на большом экране! Он также должен хорошо работать на планшетах, таких как iPad. Однако для мобильных пользователей это может оказаться непосильной задачей.
Давайте упростим. Мы продублировали героя рабочего стола и внесли несколько изменений:
- Мы заменили изображение обрезанной версией, оптимизированной для экранов меньшего размера.
- Мы центрировали текст и призыв к действию.
- Мы заменили три столбца текста одним, более коротким отрывком.
- Наконец, мы увеличили интервал, чтобы уменьшить прокрутку.
Мобильный герой предлагает такой же захватывающий вид, но без лишнего объема.
Шаг 2. Назначьте области героев соответствующим устройствам
На данный момент на нашей странице есть две главные области, каждая из которых заключена в Групповой блок. Следующий шаг — настроить один из них для отображения на настольных компьютерах/планшетах, а другой — на мобильных устройствах. Чтобы это произошло, мы воспользуемся функцией «Блокировать видимость».
Настольные/планшетные устройства:
- Нажмите на Настольный герой блок, который мы создали.
- Нажмите на Параметры меню (⋮) и выберите Скрыть блок.
- Выберите Скрыть на мобильном устройстве вариант.
- Нажмите кнопку Применять кнопка и сохранить страницу.
Мобильные устройства:
- Нажмите на Мобильный герой блок, который мы создали.
- Нажмите на Параметры меню (⋮) и выберите Скрыть блок.
- На этот раз мы выберем два варианта: Скрыть на рабочем столе, Скрыть на планшете
- Нажмите кнопку Применять кнопка и сохранить страницу.
Вы можете заметить, что мобильный герой больше не отображается на холсте редактора блоков. Это желаемый результат, поскольку он не будет мешать работе в режиме предварительного просмотра на рабочем столе.
Переключиться на мобильный режиме предварительного просмотра, и вы увидите противоположный эффект. Герой рабочего стола скрыт, позволяя мобильной версии взять верх. Вы можете редактировать эти блоки, находясь в соответствующем режим предварительного просмотра.
Обратите внимание, что вы также можете просматривать и редактировать эти блоки, используя Обзор документа Функция (Просмотр списка) (Shift+Alt+O). Выделите блок, нажмите кнопку Параметры меню (⋮) и выберите Показывать из меню. Вы можете скрыть его снова, как только закончите редактирование.
Да, и обязательно протестируйте на разных устройствах! Недостаточно сжать окно браузера на рабочем столе. Вы можете использовать инструменты разработки вашего браузера для эмуляции мобильного устройства, если у вас его нет под рукой.
Используйте разные блоки WordPress на разных устройствах
Часто именно небольшие дополнения имеют самое большое значение. Ярким примером является нацеливание на различные устройства с помощью функции «Блокировать видимость». Его выпуск не вызвал особой помпы. Однако это делает WordPress более гибким для дизайнеров.
До версии WordPress 7.0 нам приходилось обходить это ограничение. Это может означать установку специализированного плагина или написание собственных правил CSS в теме. Теперь нам осталось всего несколько кликов мыши до того, как выбрать, какие блоки будут отображаться на том или ином устройстве.
Эта функция экономит наше время, улучшает взаимодействие с пользователем и не требует использования ресурсов сервера. Прежде всего, это знак того, что WordPress ждет впереди.
Вершина