Как создать раздел продукта с обратным отсчетом «Сделка дня» с помощью Divi

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

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

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

Подпишитесь на наш канал Youtube

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

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

Откройте страницу, на которую вы хотите добавить раздел «Сделка дня», и добавьте новый регулярный раздел.

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

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

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

Размеры

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

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

Интервал

Продолжите, удалив верхний и нижний отступ строки по умолчанию в настройках интервала.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Столбец 1

Далее откройте настройки столбца 1.

Фон градиента по умолчанию

И добавьте к нему градиентный фон по умолчанию.

• Цвет 1: # 1c1c1c
• Цвет 2: #ffffff
• Направление градиента: 90 градусов
• Стартовая позиция: 66%
• Конечная позиция: 66%

Удалить фон с градиентом при наведении

Удалите тот же градиентный фон при наведении курсора.

Колонка 2

Далее откройте настройки столбца 2.

Интервал

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

• Левое заполнение: 5vw
• Правая прокладка: 8vw (рабочий стол), 5vw (планшет и телефон)

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

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

Теперь, когда мы завершили настройку строк и столбцов, мы можем начать добавлять модули. Добавьте модуль изображения Woo в столбец 1 и выберите нужный продукт.

• Продукт: Найти в списке

Элементы

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

• Показать значок распродажи: ВЫКЛ.

Интервал

Также добавьте несколько значений пользовательского интервала.

• Верхняя маржа: 6vw
• Левое заполнение: 3vw (планшет и телефон)
• Правое заполнение: 3vw

Добавить текстовый модуль в столбец 1

Добавить содержимое

Следующий и последний модуль, который нам нужен в столбце 1, - это текстовый модуль. Введите контент по вашему выбору.

Фоновый цвет

Измените цвет фона модуля.

• Цвет фона: rgba (165,255,250,0.4)

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

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

• Шрифт текста: Playfair Display
• Толщина шрифта текста: толстый
• Стиль шрифта текста: прописные.
• Цвет текста: #ffffff
• Размер текста: 1.5vw (рабочий стол), 3vw (планшет), 3.5vw (телефон)

Размеры

Поэкспериментируйте с шириной на экранах разных размеров.

• Ширина: 20vw (настольный), 40vw (планшет), 45vw (телефон)

Интервал

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

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

Коробка Тень

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

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

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

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

• Справа: -38vw (рабочий стол), -74vw (планшет и телефон)

Добавить текстовый модуль в столбец 2

Добавить содержимое

К следующей колонке! Итак, первый модуль, который нам нужен, - это обычный текстовый модуль. Вставьте контент по вашему выбору.

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

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

• Шрифт текста: Open Sans
• Толщина шрифта текста: легкий
• Стиль шрифта текста: прописные.
• Цвет текста: # 000000
• Размер текста: 1vw (рабочий стол), 3vw (планшет), 4vw (телефон)

Интервал

Измените также настройки интервала.

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

Граница

Далее мы добавляем левую границу.

• Ширина левой границы: 2 пикселя
• Цвет левой границы: rgba (0,219,193,0.4)

Добавить модуль таймера обратного отсчета в столбец 2

Оставьте поле заголовка пустым и установите дату

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

Удалить цвет фона

Затем откройте настройки фона и отключите цвет фона.

• Использовать цвет фона: НЕТ

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

Перейдите на вкладку дизайна и измените выравнивание текста.

• Выравнивание текста: по левому краю

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

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

• Шрифт чисел: Open Sans
• Плотность шрифта чисел: полужирный
• Цвет текста чисел: # 00dbc1
• Размер текста чисел: 2vw (рабочий стол), 4vw (планшет), 6vw (телефон)

Настройки разделителя текста

Затем измените цвет текста разделителя.

• Цвет текста разделителя: #ffffff

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

А также измените внешний вид текста метки.

• Цвет текста ярлыка: # 282828
• Размер текста ярлыка: 0.8vw (рабочий стол), 1.3vw (планшет), 2vw (телефон)

Размеры

Уменьшите ширину модуля для разных размеров экрана.

• Ширина: 30vw (настольный), 45vw (планшет), 65vw (телефон)

Интервал

И измените значения отступов в настройках интервалов.

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

Граница

Завершите настройки модуля, добавив левую границу.

• Ширина левой границы: 2 пикселя
• Цвет левой границы: rgba (0,219,193,0.4)

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

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

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

• Продукт: Найти в списке

Ссылка

Затем добавьте ссылку на продукт в модуль.

• Ссылка на продукт: найти в списке

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

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

• Заголовок уровня заголовка: H2
• Шрифт заголовка: Playfair Display
• Плотность шрифта заголовка: Heavy
• Стиль шрифта заголовка: прописные
• Цвет текста заголовка: # 1c1c1c
• Размер текста заголовка: 2.9vw (рабочий стол), 10vw (планшет), 12vw (телефон)

Интервал

Перейдите к настройкам интервалов и поиграйте со значениями полей.

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

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

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

Следующий модуль, который нам нужен, - это модуль описания Woo. Выберите продукт по вашему выбору.

• Продукт: Найти в списке
• Тип описания: Краткое описание

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

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

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

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

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

Добавьте модуль цены Woo прямо под модулем описания Woo и выберите свой продукт.

• Продукт: Найти в списке

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

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

• Шрифт Sale Old Price: Open Sans
• Цвет текста старой цены продажи: # 00dbc1
• Распродажа по старой цене Размер текста: 1vw (рабочий стол), 4vw (планшет), 6vw (телефон)
• Высота линии продаж по старой цене: 1.8em

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

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

• Шрифт Sale New Price: Open Sans
• Цвет текста новой цены продажи: # 000000
• Распродажа Новая цена Размер текста: 2vw (рабочий стол), 6vw (планшет), 8vw (телефон)
• Высота линии продаж по новой цене: 1.8em

Размеры

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

• Ширина: 10vw (настольный), 35vw (планшет и телефон)

Интервал

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

• Верхняя маржа: 6vw (Desktop)
• Нижнее поле: 4vw (ПК), 10vw (планшет и телефон)

Добавить модуль Woo Add To Cart в столбец 2

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

Переходим к следующему и последнему модулю - модулю Woo Add To Cart. Выберите свой продукт.

• Продукт: Найти в списке

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

Затем измените цвет фона полей.

• Цвет фона полей: rgba (0,219,193,0.4)

Настройки кнопок

Завершите дизайн модуля, стилизовав кнопку, и готово!

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 1c1c1c

• Радиус границы кнопки: 0 пикселей
• Шрифт кнопки: Open Sans
• Стиль шрифта кнопок: прописные

• Верхняя прокладка: 1vw (рабочий стол), 3vw (планшет), 4vw (телефон)
• Нижняя прокладка: 1vw (рабочий стол), 3vw (планшет), 4vw (телефон)
• Левое заполнение: 5vw (рабочий стол), 8vw (планшет), 10vw (телефон)
• Правая прокладка: 5vw (рабочий стол), 8vw (планшет), 10vw (телефон)

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

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

Рабочий стол

Мобильный

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

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

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