Как поместить товар в фоновое изображение с помощью параметров столбца Divi

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

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

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

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

Рабочий стол

Мобильный

Скачайте БЕСПЛАТНО макет рамного продукта

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

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

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

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

СКАЧАТЬ

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

1. Настройте раздел с адаптивным фоновым изображением.

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

Адаптивное фоновое изображение

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

• Фоновое изображение: Пейзаж
• Размер фонового изображения: По размеру
• Расположение фонового изображения: вверху по центру

• Фоновое изображение: квадрат

Интервал

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

• Верхняя прокладка: 3vw (рабочий стол), 0vw (планшет и телефон)
• Нижняя прокладка: 3vw (рабочий стол), 7vw (планшет), 18vw (телефон)

Граница

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

• Ширина границы: 2vw
• Цвет границы: #ffffff

2. Добавьте различные элементы рамы в столбец.

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

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

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

Размеры

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

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

Интервал

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

• Левое заполнение: 5vw
• Правое заполнение: 5vw

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

Оставьте поле содержимого пустым

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

Интервал

Далее мы увеличим высоту модуля в настройках интервалов.

• Верхняя подкладка: 22vw (рабочий стол), 39vw (планшет), 35vw (телефон)
• Нижняя прокладка: 15vw (рабочий стол), 39vw (планшет), 35vw (телефон)

Граница

И мы тоже добавим границу.

• Ширина границы: 3vw
• Ширина нижней границы: 1vw
• Цвет границы: rgba (255,255,255,0,7)

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

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

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

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

Фоновый цвет

Используйте следующий цвет фона:

• Цвет фона: rgba (255,255,255,0.7)

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

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

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

Интервал

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

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

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

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

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

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

Фоновый цвет

Соответственно измените цвет фона модуля:

• Цвет фона: rgba (255,255,255,0.7)

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

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

• Шрифт текста: Open Sans
• Размер текста: 0.9vw (рабочий стол), 2.2vw (планшет), 2.8vw (телефон)
• Высота строки заголовка: 2.2em

Интервал

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

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

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

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

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

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

Фоновый цвет

Измените цвет фона.

• Цвет фона: rgba (255,255,255,0.7)

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

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

• Шрифт цены: Work Sans
• Цвет текста цены: # 000000
• Размер текста цены: 2vw (рабочий стол), 4vw (планшет), 5vw (телефон)

Интервал

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

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

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

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

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

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

Фоновый цвет

Измените цвет фона.

• Цвет фона: rgba (255,255,255,0.7)

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

Измените также настройки полей модуля.

• Цвет фона полей: #ffffff
• Цвет текста полей: # 000000
• Шрифт полей: Open Sans

• Ширина нижней границы поля: 1px
• Цвет нижней границы полей: # 000000

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 1.1vw (рабочий стол), 2.5vw (планшет), 3.5vw (телефон)
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 000000
• Ширина границы кнопки: 0 пикселей

• Радиус границы кнопки: 10vw
• Шрифт кнопки: Open Sans

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

Интервал

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

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

3. Стиль, изменение размера и положение столбца

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

Градиентный фон

Теперь последняя часть этого урока позволяет нам объединить разные модули. Откройте настройки столбца 2 и используйте для него следующий градиентный фон:

• Цвет 1: rgba (43,135,218,0)
• Цвет 2: #ffffff
• Тип градиента: линейный
• Начальная позиция: 39%

Граница

Также добавьте закругленные углы.

• Все углы: 1vw

Коробка Тень

Мы создаем некоторую глубину, добавляя также тонкую тень блока.

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

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

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

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

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

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

Рабочий стол

Мобильный

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

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

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