Шаг 1.
Добавляешь на страницу блок с товарами из каталога, блок ST100 и ST110.
Шаг 2.
Заполняешь поля в генераторе.
1. Цвет фона всего попапа
— Укажите шестнадцатеричный код цвета (например, #ffffff для белого цвета) для фона всего попапа. Этот цвет будет общим для всего всплывающего окна.
2. Цвет заголовка попапа 'Избранное'
— Введите код цвета, который будет использоваться для текста заголовка попапа. Это может быть, например, #ff0000 для красного цвета.
3. Цвет иконки закрытия
— Укажите цвет для иконки закрытия попапа. Это поможет сделать иконку хорошо заметной на фоне попапа.
4. Цвет фона карточек
— Введите цвет, который будет использоваться в качестве фона для карточек товаров. Например, #f0f0f0 для светло-серого фона.
5. Радиус скругления углов у карточек (px)
— Определите размер радиуса в пикселях, который будет применен к углам карточек. Например, 10px для слегка скругленных углов.
6. Отступ вокруг карточек, если нужно (px)
— Укажите значение отступа в пикселях, если вы хотите добавить пространство вокруг карточек. Например, 15px.
7. Стиль отображения изображения
— Выберите стиль отображения изображения (например, «cover» или «contain»), в зависимости от того, как вы хотите, чтобы изображение выглядело на карточке.
8. Радиус скругления углов у картинки (px)
— Введите радиус скругления для изображений товаров в пикселях. Например, 5px для легкого скругления углов.
9. Ссылка на иконку закрытия
— Укажите URL-адрес изображения, которое будет использоваться в качестве иконки закрытия попапа.
10. Направление выезда окна
— Выберите направление, откуда будет выезжать меню: «справа», «сверху», «снизу» или «слева».
---
Настройки для экранов в зависимости от разрешений
12. Количество карточек
— Укажите количество карточек, которое будет отображаться на экране выбранного разрешения.
13. Отступ между карточками (px)
— Введите размер отступа в пикселях между карточками.
14. Высота изображения (px)
— Укажите желаемую высоту изображений.
Шаг 3.
- Когда всё готово — копируешь HTML-код и вставляешь его в блок Т123.