Система суффиксов классов модулей 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 для разных размеров экрана

Hidden on all .d-none
Hidden only on xs .d-none .d-sm-block
Hidden only on sm .d-sm-none .d-md-block
Hidden only on md .d-md-none .d-lg-block
Hidden only on lg .d-lg-none .d-xl-block
Hidden only on xl .d-xl-none
Hidden only on xxl .d-xxl-none .d-xxl-block
Visible on all .d-block
Visible only on xs .d-block .d-sm-none
Visible only on sm .d-none .d-sm-block .d-md-none
Visible only on md .d-none .d-md-block .d-lg-none
Visible only on lg .d-none .d-lg-block .d-xl-none
Visible only on xl .d-none .d-xl-block .d-xxl-none
Visible only on xxl .d-none .d-xxl-block

 

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

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

hide show module

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

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

Bootstrap 5 breakpoints

Breakpoint Class infix Dimensions
Extra small None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px