Как создать шаблон страницы продукта, вдохновленный японской эстетикой, с помощью Divi

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

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

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

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

Данные продукта

Откройте или создайте новый продукт WooCommerce. Чтобы воссоздать этот дизайн, вдохновленный японской эстетикой, вам необходимо заполнить следующие детали:

• Название: Набор каллиграфии
• Описание: Набор японской каллиграфии со всеми инструментами, необходимыми для создания красивых надписей. Чернила Black India, кисть из конского волоса, утяжелитель, миска для смешивания, японские ножницы и бумага без полей.
• Стоимость: 31
• Категория: Товары для творчества
• Лучшее изображение: изображение продукта в альбомной ориентации.
• Галерея: 4 пейзажных изображения одинаковых размеров
• Атрибуты: см. Ниже

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

• Что включено:
  • 1 кисть
  • 1 чаша
  • 1 бутылка с чернилами
  • 1 пара ножниц
  • 1 речной камень
  • 1 пачка бумаги

Включить Divi Builder и изменить настройки страницы

Когда все данные о продукте будут готовы, включите Divi Builder и измените макет страницы на «полную ширину».

Перейти на Visual Builder

Теперь переключитесь на визуальный конструктор. Нажмите на кнопку с надписью «строить на переднем конце».

Удалить раздел продукта по умолчанию

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

2. Воссоздать дизайн в японском стиле.

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

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

Фон

Откройте настройки раздела и измените цвет фона.

• Цвет фона: очень светло-серый # f2f2f2

Размеры

Далее отрегулируйте размер.

• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Затем значения интервала следующие:

• Верхняя обивка:
  • Рабочий стол: 0vw
  • Планшет + Телефон: 2vw
• Нижняя обивка:
  • Рабочий стол + планшет: 2vw

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

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

Добавьте новую строку и выберите следующую структуру столбцов:

Размеры

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

• Ширина:
  • Рабочий стол: 80%
  • Планшет + Телефон: 63%

Интервал

Также отрегулируйте значения интервала.

• Верхняя + нижняя маржа: 0vw
• Верх + нижняя обивка: 0vw

Добавить модуль Woo Breadcrumb

Содержание

Теперь добавьте первый модуль; панировочные сухари.

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

Текст

На вкладке «Дизайн» задайте стиль текста следующим образом:

• Шрифт: Duru Sans
• Стиль шрифта: TT
• Цвет: черный # 000000
• Размер:
  • Рабочий стол: 0,7 МВт
  • Таблетка: 1.5vw
  • Телефон: 1.7vw
• Расстояние между буквами: 2 пикселя

Размеры

Затем отрегулируйте размер.

• Ширина: 100%

Интервал

Наконец, отрегулируйте интервал.

• Верхнее поле:
  • Рабочий стол: 3em
  • Планшет + Телефон: 0em
• Нижняя маржа:
  • Рабочий стол + планшет: 1em
  • Телефон: 0em
• Прокладка сверху + снизу: 1em
• Левый отступ: 2em

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

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

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

Размеры

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

• Ширина:
  • Рабочий стол: 80%
  • Планшет + Телефон: 65%

Интервал

Также отрегулируйте интервал.

• Верхняя обивка: 0vw

Столбец 1 + 2 Настройки

Фон

Продолжите настройку столбца. Оба столбца 1 и 2 имеют одинаковый стиль. Начнем с фона.

• Цвет: белый #ffffff

Граница

И добавьте стиль границы к обоим столбцам.

• Стили границ: все четыре стороны
• Ширина границы: 4 пикселя
• Цвет: # 333333

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

Содержание

Пора начинать добавлять модули! Нам понадобится модуль изображения woo в столбце 1.

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

Элементы

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

• Рекомендуемое изображение: Вкл.
• Показывать изображения галереи: ВЫКЛ.
• Показать значок продаж: ВЫКЛ.

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

Содержание

Под изображением добавьте модуль заголовка woo. Выберите контент.

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

Текст заголовка

На вкладке «Дизайн» задайте стиль для текста.

• Заголовок Уровень заголовка: H1
• Шрифт H1: Droid Sans
• Стиль шрифта H1: TT
• Цвет H1: очень темно-серый # 333333
• Расстояние между буквами: 5 пикселей
• Высота линии: 1em

Интервал

Затем отрегулируйте значения интервала.

• Верхнее поле:
  • Планшет + Телефон: 0vw
• Верхняя обивка: 0vw
• Нижняя обивка:
  • Рабочий стол: 1.5vw
  • Таблетка: 3.5vw
  • Телефон: 6vw
• Левый отступ:
  • Рабочий стол: 2vw
  • Планшет + телефон: 5vw
• Правый отступ:
  • Рабочий стол + планшет: 0vw

Граница

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

• Стили границы: нижняя граница
• Ширина: 4 пикселя
• Цвет: очень темно-серый # 333333

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

Содержание

Далее добавляем модуль описания woo. Выберите тип содержимого и описания.

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

Текст

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

• Шрифт: Duru Sans
• Стиль шрифта: TT
• Цвет: очень темно-серый # 333333
• Размер:
  • Рабочий стол: 0.8vw
  • Таблетка: 1.4vw
  • Телефон: 1.8vw
• Расстояние между буквами: 3 пикселя
• Высота линии: 2em

Интервал

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

• Верх + нижняя обивка: 0vw
• Левый + правый отступ:
  • Рабочий стол: 2vw
  • Планшет + телефон: 5vw

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

Содержание

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

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

Текст цены

Оформите текст цены следующим образом:

• Шрифт: Duru Sans
• Цвет: очень темно-серый # 333333
• Размер:
  • Рабочий стол: 1.5vw
  • Таблетка: 3.2vw
  • Телефон: 4vw
• Расстояние между буквами: 3 пикселя
• Высота линии: 1em

Интервал

Также отрегулируйте настройки интервала.

• Нижняя маржа:
  • Рабочий стол: 1vw
  • Таблетка: 3vw
  • Телефон: 4vw
• Верхняя обивка:
  • Рабочий стол: 1vw
  • Таблетка: 3.3vw
  • Телефон: 5vw
• Нижняя обивка: 0vw
• Левый отступ:
  • Планшет + телефон: 5vw
• Правый отступ:
  • Рабочий стол: 2vw
  • Планшет + Телефон: 3vw

Граница

Наконец, добавьте границу.

• Стили границы: верхняя граница
• Ширина границы: 4 пикселя
• Цвет: очень темно-серый # 333333

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

Содержание

Под ценой добавьте модуль добавления в корзину и выберите товар.

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

Элементы

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

• Показать поле количества: ВЫКЛ.
• Показать запас: ВКЛ

Фон

Также добавьте цвет фона.

• Цвет фона: очень темно-серый # 333333

Кнопка

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

• Размер текста:
  • Рабочий стол: 1vw
  • Таблетка: 2.6vw
  • Телефон: 3.1vw
• Цвет: белый #ffffff
• Ширина границы: 0 пикселей
• Расстояние между буквами: 3 пикселя
• Шрифт: Duru Sans
• Шрифт: TT

Интервал

Затем отрегулируйте интервал.

• Верхняя + нижняя обивка: 0.5vw
• Левый отступ: 1vw

Граница

Наконец, добавьте границу.

• Стили границы: верхняя граница
• Ширина: 4 пикселя
• Цвет: очень темно-серый # 333333

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

Содержание

Перейдите ко второму столбцу и добавьте дополнительный информационный модуль woo. Выберите товар.

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

Элементы

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

• Показать заголовок: ВКЛ.

Текст

На вкладке «Дизайн» задайте стиль для текста.

• Шрифт: Duru Sans
• Стиль шрифта: I + TT
• Цвет: очень темно-серый # 333333
• Размер:
  • Рабочий стол: 0,7 МВт
  • Таблетка: 1.5vw
  • Телефон: 2.4vw
• Расстояние между буквами: 2 пикселя
• Высота линии: 1,5 м

Текст заголовка

Затем стилизуйте текст заголовка.

• Шрифт: Duru Sans
• Стиль шрифта: TT
• Цвет: очень темно-серый # 333333
• Размер:
  • Рабочий стол: 1vw
  • Таблетка: 2vw
  • Телефон: 2.2vw
• Расстояние между буквами: 3 пикселя
• Высота линии: 1,5 м

Текст атрибута

Не забудьте также стилизовать текст атрибута.

• Шрифт: Duru Sans
• Стиль шрифта: TT
• Цвет: очень темно-серый # 333333
• Размер:
  • Рабочий стол: 0,7 МВт
  • Таблетка: 2vw
  • Телефон: 2.4vw
• Расстояние между буквами: 2 пикселя

Интервал

Затем отрегулируйте интервал.

• Верхняя обивка:
  • Рабочий стол: 1vw
  • Планшет + Телефон: 3vw
• Нижняя обивка:
  • Рабочий стол + планшет: 1vw
• Левый отступ:
  • Рабочий стол: 2vw
  • Планшет + телефон: 5vw
• Правый отступ:
  • Телефон: 3vw

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

Содержание

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

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

Макет

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

• Макет: слайдер

Интервал

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

• Верхнее поле:
  • Рабочий стол: -2vw
  • Таблетка: -4vw
  • Телефон: -6vw
• Верхняя обивка: 0vw

Граница

Наконец, добавьте границу.

• Стили границы: верхняя граница
• Ширина: 4 пикселя
• Цвет: очень темно-серый # 333333

3. Преобразование в шаблон для Divi Theme Builder.

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

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

• Сохранить как: макет
• Имя: Мастер продукции в японском стиле
• Категория: Макеты продуктов.

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

Чтобы использовать этот дизайн на всех страницах вашего продукта, вам необходимо создать шаблон для него в конструкторе тем. На странице конструктора тем добавьте новый шаблон. В раскрывающемся меню выберите «все продукты». Если вы хотите использовать этот дизайн только для некоторых своих продуктов, вы можете изменить настройки.

Добавить собственное тело из библиотеки Divi

Нажмите «Добавить пользовательское тело» и в раскрывающемся меню выберите «Добавить из библиотеки».

Найдите макет в сохраненных макетах и ​​примените

В окне макетов нажмите на сохраненные макеты и найдите тот, который мы только что создали.

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

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

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

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

Рабочий стол

Мобильный

Это обертка!

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