Как креативно рекламировать популярные товары на целевой странице Divi

При отображении популярных товаров на целевой странице важно не только правильно выбрать товары, но и привлекательно их отображать. С новыми модулями Divi WooCommerce нам открылись бесчисленные новые возможности дизайна. Чтобы помочь вам вдохновиться, мы воссоздадим красивый и элегантный дизайн популярного продукта, который вы сможете использовать для своей следующей целевой страницы Divi. Вы также сможете бесплатно скачать файл JSON!

Давайте перейдем к этому.

Предварительный просмотр

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

Рабочий стол

Статический

Парение

Мобильный

Загрузите макет популярных продуктов БЕСПЛАТНО

Чтобы получить доступ к бесплатному макету популярных продуктов, вам сначала нужно загрузить его, нажав кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Начнем воссоздавать!

Добавить новый раздел

Интервал

Начните с добавления обычного раздела на новую страницу или уже существующую. Откройте настройки раздела и отрегулируйте значения верхнего и нижнего отступов соответственно:

• Верхняя обивка: 8vw
• Нижняя обивка: 8vw

Добавить новую строку

Структура столбца

Продолжите, добавив новую строку, используя следующую структуру столбцов:

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и измените настройки размера строки.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 85vw
• Максимальная ширина: 100%

Добавить модуль изображения Woo в столбец

Динамический контент

Пора начинать добавлять модули! Первый модуль, который нам нужен, - это Woo Image Module. Выберите продукт, который хотите отобразить.

Изображение

Перейдите на вкладку дизайна и измените настройки изображения.

• Закругленные углы изображения: 20 пикселей (все углы)

• Сила размытия тени коробки: 50 пикселей
• Цвет тени: rgba (0,0,0,0.3)

Добавить модуль заголовка Woo в столбец

Динамический контент

Следующий необходимый нам модуль - это Woo Title Module. Выберите продукт по вашему выбору.

Настройки текста заголовка

Измените настройки текста заголовка модуля следующим образом:

• Заголовок уровня заголовка: H3
• Шрифт заголовка: Prata
• Размер текста заголовка: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)

Интервал

Завершите настройки модуля, добавив некоторые пользовательские значения полей для разных размеров экрана.

• Верхняя маржа: 7vw (ПК), 14vw (планшет и телефон)
• Нижнее поле: 2vw (рабочий стол), 4vw (планшет и телефон)
• Левое поле: 2vw (рабочий стол), 5vw (планшет и телефон)
• Правое поле: 2vw (рабочий стол), 5vw (планшет и телефон)

Добавить модуль описания Woo в столбец

Динамический контент

Переходим к следующему модулю, который является модулем описания Woo. Выберите продукт по вашему выбору.

Настройки текста

Перейдите на вкладку дизайна модуля и измените настройки текста следующим образом:

• Шрифт текста: Монтсеррат
• Размер текста: 0.8vw (рабочий стол), 1.6vw (планшет), 2vw (телефон)
• Высота текстовой строки: 1,8 м

Интервал

Поэкспериментируйте с пользовательскими значениями полей для разных размеров экрана.

• Верхняя маржа: 2vw (ПК), 4vw (планшет и телефон)
• Нижнее поле: 2vw (рабочий стол), 4vw (планшет и телефон)
• Левое поле: 2vw (рабочий стол), 5vw (планшет и телефон)
• Правое поле: 2vw (рабочий стол), 5vw (планшет и телефон)

Добавить модуль Woo «Добавить в корзину» в столбец

Динамический контент

Прямо под модулем описания Woo мы добавим модуль добавления в корзину Woo. Выберите продукт по вашему выбору.

Настройки полей по умолчанию

Перейдите на вкладку дизайна модуля и измените настройки полей следующим образом:

• Цвет фона полей: #ffffff
• Цвет текста полей: # 3d3d3d
• Шрифт полей: Montserrat

• Ширина границы поля: 0 пикселей
• Цвет границы полей: # 3d3d3d

Настройки полей при наведении

Измените ширину границы при наведении.

• Ширина границы поля: 1px

Настройки кнопок по умолчанию

Затем откройте настройки кнопки и стилизуйте кнопку.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 1vw (рабочий стол), 3vw (планшет), 4vw (телефон)
• Цвет текста кнопки: # 3d3d3d
• Цвет фона кнопки: #FFFFFF
• Ширина границы кнопки: 0 пикселей
• Цвет границы кнопки: # 3d3d3d

• Шрифт кнопки: Prata

• Верхняя набивка: 0,5 Вт
• Нижняя обивка: 0,5 Вт
• Левый отступ: 2vw
• Правое заполнение: 2vw

Настройки кнопки наведения

Измените ширину границы кнопки при наведении курсора.

• Ширина границы кнопки: 1 пиксель

Интервал

Затем перейдите к интервалу и добавьте несколько настраиваемых значений полей для разных размеров экрана.

• Нижнее поле: 7vw (рабочий стол), 14vw (планшет и телефон)
• Левое поле: 2vw (рабочий стол), 5vw (планшет и телефон)
• Правое поле: 2vw (рабочий стол), 5vw (планшет и телефон)

Параметры границы по умолчанию

Измените также параметры границы модуля.

• Ширина нижней границы: 1 пикс.
• Цвет нижней границы: # 3d3d3d

Настройки границы при наведении

И удалите ширину границы при наведении.

• Ширина нижней границы: 0 пикселей

Добавить модуль цены Woo в столбец

Динамический контент

Последний модуль, который нам нужен в столбце, - это Woo Price Module. Выберите продукт по вашему выбору.

Настройки текста заголовка

Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста цены:

• Шрифт текста цены: Montserrat
• Плотность шрифта текста цены: Light
• Цвет текста цены: # 333333
• Размер текста цены: 2vw (рабочий стол), 4vw (планшет), 6vw (телефон)
• Высота ценовой линии: 1.8em

Интервал

Измените также значения маржи.

• Нижняя маржа: 5vw
• Левое поле: 2vw (рабочий стол), 5vw (планшет и телефон)
• Правое поле: 2vw (рабочий стол), 5vw (планшет и телефон)

Клонировать столбец дважды

После того, как вы заполнили столбец и все модули в нем, вы можете дважды клонировать весь столбец.

Изменить структуру столбца строки

Затем измените структуру столбцов строки.

Изменить весь динамический контент

Продолжите, изменив весь динамический контент в столбцах 2 и 3 на другие продукты по вашему выбору.

Изменить расстояние между модулями столбца 2

Woo Title Module

Модули во втором столбце нуждаются в дополнительных изменениях интервалов. Начните с модуля Woo Title.

• Левое поле: 5vw (все устройства)
• Правое поле: 5vw (все устройства)

Модуль описания Woo

Затем измените настройки интервала модуля описания Woo.

• Верхняя маржа: 4vw (все устройства)
• Нижнее поле: 4vw (все устройства)
• Левое поле: 5vw (все устройства)
• Правое поле: 5vw (все устройства

Woo Добавить в корзину модуль

Перейдите к настройкам интервалов модуля Woo Add To Cart.

• Левое поле: 5vw (все устройства)
• Правое поле: 5vw (все устройства)

Модуль цен Woo

И завершите модули столбца 2, изменив также настройки интервала модуля Woo Price Module.

• Левое поле: 5vw (все устройства)
• Правое поле: 5vw (все устройства)

Стили столбцов

Все столбцы

Фоновый цвет

Теперь, когда у нас есть все наши модули, мы можем приступить к стилизации столбцов. Каждый столбец должен иметь белый цвет фона.

• Цвет фона: #ffffff

Граница

Вы также можете добавить «20 пикселей» в углы каждого столбца.

• Закругленные углы: 20 пикселей (все углы)

Столбец 1 и 3

Тень бокса по умолчанию

Продолжите, добавив тень блока по умолчанию к столбцам 1 и 3.

• Положение прямоугольной тени по вертикали: 22 пикселя
• Box Shadow Shadow Blur Strength: 150 пикселей
• Цвет тени: rgba (0,0,0,0) (рабочий стол), rgba (0,0,0,0.1) (планшет и телефон)

Hover Box Shadow

Измените цвет тени при наведении.

• Цвет тени: rgba (0,0,0,0.27)

Фильтры по умолчанию

Затем перейдите в настройки фильтров и добавьте размытие в оба столбца 1 и 3.

• Размытие: 4 пикселя (рабочий стол), 0 пикселей (планшет и телефон)

Фильтры при наведении

Удалите размытие при наведении.

• Размытие: 0 пикселей

Индекс Z по умолчанию

Присвойте то же значение индекса z по умолчанию следующим столбцам.

• Индекс Z: 9

Индекс Z при наведении

И увеличивайте тот же индекс z при наведении курсора.

• Индекс Z: 12

Только столбец 1

Преобразовать Перевести

Продолжите, изменив положение столбца 1, используя опцию преобразования перевода.

• Справа: 7vw (рабочий стол), 0vw (планшет и телефон)
• Внизу: 2vw (рабочий стол), 0vw (планшет и телефон)

Только столбец 3

Преобразовать Перевести

Затем откройте настройки преобразования столбца 3 и примените следующие настройки:

• Справа: 7vw (рабочий стол), 0vw (планшет и телефон)
• Внизу: -2vw (рабочий стол), 0vw (планшет и телефон)

Только столбец 2

Коробка Тень

Перейдите к настройкам столбца 2 и примените тонкую тень блока.

• Положение прямоугольной тени по вертикали: 22 пикселя
• Сила размытия тени коробки: 150 пикселей
• Цвет тени: rgba (0,0,0,0.27) (рабочий стол), rgba (0,0,0,0.1) (планшет и телефон)

Индекс Z

И последнее, но не менее важное: измените z-индекс второго столбца, и все готово!

• Индекс Z: 11

Предварительный просмотр

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

Рабочий стол

Статический

Парение

Мобильный

Последние мысли

В этом посте мы показали вам, как элегантно разместить популярные товары на целевой странице Divi. Мы шаг за шагом показали вам, как создать прекрасный результат, используя только встроенные функции Divi. Этот пример дизайна показывает, насколько универсальны новые модули Divi WooCommerce и как вы можете мгновенно создать потрясающий веб-дизайн электронной коммерции. Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже!

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.