Макеты Блога joomla 4

В joomla-4 в меню блога можно управлять расположением и количеством колонок вывода статей. Благодаря новой системе классов grid и flex, можно создавать красивые новостные блоки без сторонних компонентов.

В этом материале я покажу несколько примеров на основе стандартных материалов. Скачав и установив классы в свой файл user.css вы можете пробовать сочетание различных вариантов.

В базовом шаблоне cassiopeia установлен такие варианты блога:

  • Разделение на Главные и Вступительные материалы ▬: верх / низ.
  • Разделение на колонки ▥: 1, 2, 3, 4...
  • Разделение на ряды ▤: 1, 2, 3, 4...
  • Размещение картинки относительно текста ▣: слева, справа, сверху, снизу, реверс, масонри.

Я добавил следующий макет:

  • Расположение Главных материалов и Вступительных материалов горизонтально в 2 блока ◧: слева / справа.
  • Вывод на мобильнике в две колонки ◫. По умолчанию система grid на экранах менее 576px выводит каждый материал на всю ширину. Добавляем новое правило в grid blog и вставляем имя нового класса в меню блога mobile-cols-2
  • Крупный шрифт для главного материала (для усиления внимания).

Классы вставляются вручную. Попробовав различные варианты, быстро поймете куда что вставлять. Макет Блога не надо менять каждый день, он настраивается один раз.

Варианты вывода статей в макете Блог

1 колонка, фото слева, класс image-left

joomla-4 blog image joomla-4 blog image

1 колонка, фото слева-справа, классы image-left image-alternate boxed

joomla-4 blog image joomla-4 blog image

2 колонки, фото слева, класс image-left

joomla-4 blog image joomla-4 blog image

3 колонки, класс boxed

joomla-4 blog image joomla-4 blog image

3 колонки, масонри, фото внизу, классы masonry-3 image-bottom boxed

joomla-4 blog image joomla-4 blog image

Главные: 3 колонки, класс columns-3
Вступительные: 1 колонка, классы image-left image-alternate boxed

joomla-4 blog image joomla-4 blog image

Мобильный телефон: 2 колонки, без вводного текста, класс mobile-cols-2 boxed

joomla-4 blog image
joomla-4 blog image

💬 Нет комментариев