Блог Дмитрия Рыбалка

Совмещаем Zero Block и блок с товарами

Каталог товаров

Описание:

Идея совмещения двух блоков заключается в наложении элементов верхнего блока на нижний. Для этого в Zero Block выставляется настройка Overflow:Visible и элементы располагаются за нижней границей блока.


Пошаговая инструкция:

  1. Подготавливаем блок с 4 товарами
  2. Над ним создаём Zero Block
  3. В общих настройках устанавливаем Overflow:Visible
  4. Добавляем шейп таким образом, чтобы он выходил за нижнюю границу видимой области Zero Block
  5. В рамках 3-х колонок макетной сетки размещаем любые элементы
  6. Адаптируем блок под мобильные устройства, чтобы контент не наезжал на нижний блок
  7. Сохраняем. Опубликовываем. Готово!


Совет:

Также, похожее наложение можно использовать с другими блоками. Особенно это удобно когда в стандартном блоке есть настройка отступа слева.