Перейти к основному контенту

Модуль «Магазин» в REG.Site

Магазин — это стандартный модуль Divi, с помощью которого можно настроить сетку товаров для интернет-магазина:

модуль магазин 1

Вы можете добавить этот модуль на любую страницу сайта и в каждом показать разные категории товаров. Об этом мы расскажем подробнее в разделе «Контент».

Обратите внимание
Чтобы модуль отображался корректно, предварительно добавьте товары.

Как добавить модуль «Магазин» на сайт

  1. 1.
  2. 2.
    Выберите строку, в которую хотите добавить модуль и нажмите на серый плюс.
  3. 3.

    Выберите модуль Магазин:

    модуль магазин 2

Теперь переходите к настройкам. Они хранятся во вкладках «Контент», «Дизайн» и «Дополнительно».

Контент

  1. 1.

    В блоке «Контент» выберите тип продукта. Если вы хотите показать только определённые категории, выберите параметр Категория Продукта и отметьте нужные категории галочкой. Также выберите число товаров, расположение столбцов и тип сортировки:

    модуль магазин 3

  2. 2.

    В блоке «Элементы» включите показ номеров страниц:

    модуль магазин 4

  3. 3.

    В блоке «Фон» настройте цветовой фон модуля. Затем нажмите на галочку:

    модуль магазин 5

Дизайн

  • Наложение — выберите цвет оверлея для иконки и фотографии товара;
  • Изображение — закруглите границы модуля и изображений в нём;
  • Рейтинг — отформатируйте текст рейтинга;
  • Текст — настройте расположение текста всего модуля;
  • Заголовок Текст — измените начертание текста названия товара;
  • Цена Текст — отредактируйте стиль текста цен;
  • Бирка распродажи Текст — отформатируйте текст на бирке «Распродажа!»;
  • Цена продажи Текст — измените начертание текста цены со скидкой;
  • Размеры — настройте ширину и положение текста;
  • Отступы — укажите отступы в пикселях. Можно настроить отступ слева, справа, сверху и снизу;
  • Граница — добавьте и закруглите границы изображения. Это можно сделать как сразу для всех, так и для отдельных углов;
  • Тень контейнера — создайте тень изображения;
  • Фильтр — настройте оттенки изображения, а также насыщенность, яркость, контрастность, инверсию, сепию, прозрачность, размытие и режим смешивания;
  • Преобразовать — масштабируйте сетку товаров, поверните и настройте перекос;
  • Анимация — добавьте анимацию перед показом товаров.

Дополнительно

Здесь можно добавить свои настройки, написанные на CSS. Всё это можно сделать в блоках «ID и классы CSS» и «Пользовательский CSS». Также доступны блоки:

  • Видимость — отключите отображение модуля на определённом устройстве: например, на планшете или смартфоне;
  • Переходы — настройте длительность анимации;
  • Позиционирование — зафиксируйте положение модуля на странице;
  • Эффект прокрутки — настройте ползунок прокрутки для просмотра товарной сетки.
Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 0 из 0