Как вертикально расположить изображения галереи Woo внутри шаблона страницы продукта Divi

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

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

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

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

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

Начните с перехода к Divi Theme Builder и нажмите «Добавить новый шаблон».

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

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

Войдите в редактор шаблона тела шаблона

Создав шаблон, нажмите «Добавить пользовательское тело» и продолжите, выбрав «Создать пользовательское тело», чтобы перенаправить его в редактор шаблонов.

Начать создание тела шаблона страницы категории

Изменить раздел № 1

Фоновый цвет

Внутри редактора шаблонов вы заметите раздел. Откройте этот раздел и добавьте белый цвет фона.

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

Интервал

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

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

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

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

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

Размеры

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

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

Интервал

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

• Верхнее заполнение: 100 пикселей (только для планшетов и телефонов)
• Нижний отступ: 100 пикселей (только планшет и телефон)

Основной элемент CSS

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

Рабочий стол:

display: flex;
align-items: center;

Планшет и телефон:

display: block;

Столбец 2 градиентный фон

После завершения общих настроек строки откройте настройки второго столбца и примените радиальный градиентный фон.

• Цвет 1: # f7f2ef
• Цвет 2: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 20%
• Конечная позиция: 20%

Столбец 2 Интервал

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

• Верхнее заполнение: 30% (рабочий стол), 10% (планшет и телефон)
• Нижняя обивка: 10%
• Левый отступ: 5%
• Правое заполнение: 5%

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

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

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

• Продукт: Этот продукт

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

Добавить код CSS

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

<style>

.single-product div.product .woocommerce-product-gallery .flex-viewport{
width: 80% !important;
float: right;
border-radius: 100vw;
}

.woocommerce-product-gallery__image.flex-active-slide {
width: 12.5% !important;
}

.single-product div.product .woocommerce-product-gallery .flex-viewport img {
width: 100%;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav {
width: 15% !important;
float: left;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li {
width: 100%;
float: none;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li img {
border-radius: 100vw;
}

</style>

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

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

Переходим к следующему столбцу. Итак, первый модуль, который нам нужен, - это Woo Title Module.

• Продукт: Этот продукт

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

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

• Шрифт заголовка: PT Sans
• Толщина шрифта заголовка: полужирный
• Цвет текста заголовка: # 000000
• Размер текста заголовка: 84 пикселей (рабочий стол), 60 пикселей (планшет), 45 пикселей (телефон)

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

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

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

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

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

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

• Шрифт текста: Karla
• Размер текста: 17 пикселей (компьютер и планшет), 15 пикселей (телефон)
• Высота текстовой строки: 1.9em

Интервал

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

• Максимальная маржа: 5%
• Нижняя маржа: 5%

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

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

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

• Продукт: Этот продукт

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

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

• Шрифт цены: PT Sans
• Цена шрифта: жирный
• Цвет текста цены: # ce8654
• Размер текста цены: 27px

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

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

Следующим и последним модулем, который нам понадобится для выполнения этого руководства, является модуль Woo Add to Cart.

• Продукт: Этот продукт

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

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

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

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

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

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

• Использовать пользовательские стили для кнопки: Да
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 0a0201
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 100 пикселей

• Шрифт кнопки: PT Sans
• Толщина шрифта кнопок: полужирный

• Отступ кнопки сверху: 20 пикселей
• Отступ кнопки снизу: 20 пикселей
• Отступ кнопки слева: 50 пикселей
• Отступ справа от кнопки: 50 пикселей

Интервал

Завершите настройки модуля и этого руководства, добавив верхнее поле в модуль Woo Add to Cart. После того, как вы закончите изменять шаблон страницы продукта, убедитесь, что вы сохранили все изменения в построителе тем, прежде чем просматривать результат на страницах продукта!

• Максимальная маржа: 5%

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

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

Рабочий стол

Мобильный

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

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

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