Joomla 4: как убрать/скрыть модули в зависимости от размера экрана

Система суффиксов классов модулей Joomla - это мощная система, и простое решение для скрытия модулей на определенных размерах экрана — это просто добавить суффикс класса модуля к модулю, который вы хотите скрыть.

Шаблон Joomla 4 по умолчанию — Cassiopeia, который использует библиотеку Bootstrap. Если вы хотите показать или скрыть некоторые модули, служебные классы, включенные в Bootstrap, помогут вам это сделать.

Шаблон Cassiopeia использует Bootstrap 5, поэтому вы можете просто добавить в модуль специальный класс Bootstrap 5, чтобы скрыть его на разных размерах экрана.

Способ добавления суффикса класса модуля к модулю:

• Перейдите к диспетчеру модулей и отредактируйте нужный модуль.
• Щелкните вкладку модуля - Дополнительные параметры.
• Введите класс модуля, который вы хотите присоединить к этому модулю, например, "d-none d-lg-block"
• Нажмите Сохранить

Классы Bootstrap 5 для скрытия или отображения модулей в Joomla 4

Следующие классы Bootstrap 5 можно добавить в модули, чтобы скрыть или отобразить их на экранах определенных размеров.

Чтобы скрыть элементы, используйте:

• класс .d-none;
• или один из классов .d-{sm,md,lg,xl,xxl}-none для любого адаптивного варианта экрана.

Чтобы показать модуль на заданном интервале размеров экрана, объедините один класс .d-*-none с классом .d-*-*.

Классы Bootstrap 5 для разных размеров экрана

Более подробную информацию о свойстве отображения, включенном в Bootstrap 5, можно найти здесь.

Пример – скрытие модуля на экранах меньше lg

Стиль модуля должен быть - унаследованный

Чтобы протестировать класс, обновите страницу и уменьшите размер окна браузера до необходимого размера или откройте свою страницу на соответствующем устройстве.

Bootstrap 5 breakpoints