Виджет товара: Дизайн
2 мин. чтения
Настройте эти параметры дизайна, чтобы создать идеальный виджет товара.
Фон и границы
- Прозрачность и цвет фона: нажмите на цвет, чтобы выбрать цвет фона. Перетяните ползунок, чтобы изменить прозрачность.
- Ширина границы и цвет: нажмите на цвет, чтобы выбрать цвет границы для виджета товара, и перетяните ползунок, чтобы изменить ширину границы.
- Ширина линии-разделителя и цвет: нажмите на цвет, чтобы выбрать цвет линии-разделителя для виджета товара и перетяните ползунок, чтобы изменить ширину рамки.
- Длина линии-разделителя: перетяните ползунок, чтобы изменить длину линии-разделителя между названием и ценой.
Текст
Выберите цвет текста и нажмите на иконку Текст 
, чтобы выбрать шрифт для:
, чтобы выбрать шрифт для: - названия товара
- цены товара
- баннера "Нет в наличии"
Кнопка
- Вид кнопки: нажмите на кнопку, чтобы выбрать вид кнопки.
- Прозрачность и цвет заливки: нажмите на цвет, чтобы выбрать цвет заливки для кнопки. Перетяните ползунок, чтобы изменить прозрачность.
- Ширина границы и цвет: нажмите на цвет, чтобы выбрать цвет границы для кнопки и перетяните ползунок, чтобы изменить ширину границы.
- Закругление уголков: перетяните ползунок, чтобы изменить закругление уголков кнопки (чем больше радиус, тем больше загругление).
- Размер кнопки: перетяните ползунок, чтобы изменить размер кнопки.
- Текстовый шрифт и цвет: выберите цвет текста и нажмите на иконку Текст , чтобы выбрать шрифт для кнопки.
При наведении
Решите, что будет происходить с виджетом товара при наведении на него указателя миши:
- Ничего: Виджет товара не будет меняться.
- Доп. слой: Будет появляться дополнительный слой цвета.
- Нажмите на палитру цветов, чтобы выбрать цвет слоя. Перетяните ползунок, чтобы изменить прозрачность.
- (По желанию) Нажмите на палитру цветов, чтобы выбрать цвет границы, и перетяните ползунок, чтобы изменить ширину границы.
- (По желанию) Нажмите на переключатель При наведении увеличивать:
- Включено: Когда пользователь наводит курсор на изображение, оно будет увеличиваться.
- Выключено: Когда пользователь наводит курсор на изображение, оно не будет увеличиваться.
- Увеличение: Изображение будет увеличиваться при наведении.
- (По желанию) Нажмите на палитру цветов, чтобы выбрать цвет слоя. Перетяните ползунок, чтобы изменить прозрачность.
- (По желанию) Нажмите на палитру цветов, чтобы выбрать цвет границы, и перетяните ползунок, чтобы изменить ширину границы.
- Переключатель При наведении увеличивать: Убедитесь, что переключатель включен.
- Рамка: Вокруг информации о товаре появляется рамка.
- (По желанию) Нажмите на палитру цветов, чтобы выбрать цвет слоя. Перетяните ползунок, чтобы изменить прозрачность.
- Нажмите на палитру цветов, чтобы выбрать цвет границы, и перетяните ползунок, чтобы изменить ширину границы.
- (По желанию) Нажмите на переключатель При наведении увеличивать:
- Включено: Когда пользователь наводит курсор на изображение, оно будет увеличиваться.
- Выключено: Когда пользователь наводит курсор на изображение, оно не будет увеличиваться.
Ленточка
- Прозрачность и цвет заливки: нажмите на цвет, чтобы выбрать цвет заливки для ленточки. Перетяните ползунок, чтобы изменить прозрачность.
- Цвет текста: выберите цвет текста для ленточки.
Совет. Чтобы узнать, как добавить ленточку, нажмите здесь.
Была ли статья полезна?
|