Как добавить выдвижную информацию о продукте на страницу вашего продукта Divi

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

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

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

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

Рабочий стол

Мобильный

Загрузите слайд-ин шаблон страницы продукта БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

1. Добавить / открыть продукт WooCommerce

информация о продукте

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

• Имя
• Описание
• Изображение продукта с прозрачным фоном
• Цена
• Категория

Включение Divi Builder и изменение настроек страницы продукта

Включите Divi Builder и измените макет страницы в правом верхнем углу.

• Макет страницы: полная ширина

Перейти на Visual Builder

После того, как вы изменили макет страницы, вы можете переключиться на Divi Visual Builder, щелкнув «Build On The Front End».

2. Создайте выдвижной макет страницы с информацией о продукте.

Удалить несколько строк на странице

Внутри редактора страницы продукта вы заметите различные элементы, относящиеся к вашему продукту. Нам нужны только элементы второй строки, поэтому удалите первую и последнюю строки внутри раздела.

Изменить настройки раздела

Фоновый цвет

Пора начать изменять различные элементы, чтобы создать наш выдвижной макет информации о продукте! Откройте настройки раздела и измените цвет фона.

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

Размеры

Также добавьте минимальную высоту в настройки размера. Этот шаг позволит разделу занять всю высоту вашего браузера.

• Мин. Высота: 100vh

Интервал

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

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

Видимость

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

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

Изменить настройки строки

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Макс.ширина: 100% (рабочий стол), 90% (планшет и телефон)

Интервал

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

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

Позиция

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

• Позиция: абсолютная (настольный компьютер), по умолчанию (планшет и телефон)
• Расположение: внизу по центру

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

Фоновый цвет

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

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

Интервал

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

• Верхняя обивка: 10vw
• Нижняя обивка: 10vw
• Левое заполнение: 8vw
• Правое заполнение: 8vw

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

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

• Яркость: 100%
• Инвертировать: 0%
• Сепия: 0%

Фильтр наведения

Однако при наведении мы изменим значения соответственно:

• Яркость: 49%
• Инвертировать: 100%
• Сепия: 100%

Позиция

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

• Позиция: абсолютная (настольный компьютер), по умолчанию (планшет и телефон)
• Расположение: внизу справа

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

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

Пора приступить к настройке различных модулей в столбце 2! Откройте модуль заголовка Woo и измените настройки текста H1 следующим образом:

• Шрифт заголовка: Playfair Display
• Цвет текста заголовка: # 000000
• Размер текста заголовка: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)

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

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

Затем откройте настройки Woo Price Module и измените настройки текста цены.

• Шрифт цены: Poppins
• Цвет текста цены: # e5bc87
• Размер текста цены: 1.4vw (рабочий стол), 3vw (планшет), 4vw (телефон)

Интервал

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

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

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

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

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

• Шрифт текста: Поппинс
• Толщина шрифта текста: легкий
• Размер текста: 0.8vw (рабочий стол), 1.8vw (планшет), 2.7vw (телефон)
• Высота текстовой строки: 2,1 м

Интервал

Также добавьте отзывчивое нижнее поле.

• Нижнее поле: 3vw (рабочий стол), 5vw (планшет и телефон)

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

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

Далее у нас есть модуль Woo Add to Cart. Измените настройки полей модуля.

• Цвет фона полей: rgba (255,255,255,0)
• Цвет текста полей: # 000000
• Шрифт полей: Poppins
• Размер текста полей: 0.9vw (рабочий стол), 2vw (планшет), 3vw (телефон)

• Все углы: 0 пикселей
• Ширина нижней границы поля: 1px
• Цвет нижней границы полей: # e5bc87

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 0.9vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Цвет текста кнопки: #ffffff
• Цвет градиента 1: # e5bd89
• Цвет градиента 2: # e5bc87
• Тип градиента: линейный
• Направление градиента: 153 град.
• Ширина границы кнопки: 0 пикселей

• Радиус границы кнопки: 1px
• Шрифт кнопки: Поппинс

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

Интервал

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

• Нижняя маржа: 2vw (Destkop), 4vw (планшет и телефон)

Измените мета-модуль Woo в столбце 2

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

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

• Мета-шрифт: Poppins
• Толщина мета-шрифта: легкий
• Размер метатекста: 0.8vw (рабочий стол), 1.8vw (планшет), 3vw (телефон)

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

Также измените цвет текста ссылки.

• Цвет текста ссылки: # e5bc87

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

Чтобы изменить цвет фона масштабирования модуля изображения Woo, нам понадобится небольшой кусочек кода CSS, который мы разместим в новом модуле кода в столбце 2.

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

Добавьте следующие строки кода CSS в модуль кода:

<style>
.zoomImg {
background-color: #FFE4A5 !important;
}
</style>

3. Добавьте настройки синхронизированной анимации в контейнеры.

Модуль изображений Woo

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

• Стиль анимации: слайд
• Направление анимации: вверх
• Начальная непрозрачность анимации: 50%
• Кривая скорости анимации: легкость

Столбец 1

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

• Стиль анимации: слайд
• Направление анимации: влево (рабочий стол), вверх (планшет и телефон)
• Задержка анимации: 950 мс (рабочий стол), 0vw (планшет и телефон)
• Интенсивность анимации: 25%
• Начальная непрозрачность анимации: 100%
• Кривая скорости анимации: легкость выхода

Колонка 2

Наконец, примените следующие настройки анимации к столбцу 2:

• Стиль анимации: слайд
• Направление анимации: влево (рабочий стол), вверх (планшет и телефон)
• Продолжительность анимации: 1200 мс
• Задержка анимации: 800 мс (рабочий стол), 0 мс (планшет и телефон)
• Начальная непрозрачность анимации: 100%
• Кривая скорости анимации: легкость выхода

4. Превратите макет страницы продукта в шаблон

Сохранить макет в библиотеку Divi

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

Перейдите в конструктор тем Divi и добавьте новый шаблон

Перейдите в конструктор тем Divi и добавьте новый шаблон.

Использовать шаблон для всех продуктов

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

• Использование: все продукты

Загрузить макет в тело шаблона страницы продукта

Затем нажмите «Добавить пользовательское тело» и нажмите «Добавить из библиотеки».

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

5. Сохраните изменения в построителе тем и просмотрите результат.

После того, как вы загрузили макет в шаблон страницы нового продукта, вам остается только сохранить все изменения в Theme Builder и просмотреть результат на своем веб-сайте!

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

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

Рабочий стол

Мобильный

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

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

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