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

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

Давайте начнем.

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

1. Дизайн шаблона продукта для детей

Удалить фон с фотографии продукта

Первое, что мы сделаем, прежде чем приступить к дизайну детского продукта, - это подготовить изображения. Удалите фон с изображений товаров. Вы можете добиться этого с помощью Adobe Photoshop, Adobe Illustrator или remove.bg. Оставьте немного места вокруг продукта, чтобы он хорошо вписался в дизайн. Наилучший размер окончательного изображения - 600X400 пикселей.

Создать дизайн фона

Второй шаг - создание фона, который будет помещен за изображением. Этот дизайн с перекрывающимися формами легко создается в Adobe Illustrator. Кроме того, вы можете найти это фоновое изображение в папке для загрузки выше. Если вы хотите создать фон, выполните следующие действия:

• Создайте (или создайте) форму.
• Придайте форме желаемый цвет.
• Дублируйте форму.
• Раскрасьте его в тон оригинала.
• Поверните вторую фигуру, чтобы создать красивую композицию.
• Добавьте прозрачности обеим фигурам.
• Добавьте фон того же цвета, что и фон в окончательном дизайне.
• Сохраните как JPG размером около 1750X1650 пикселей.

2. Создать / добавить новый продукт Woocommerce

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

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

• Название: Деревянные блоки с буквами
• Длинное описание: эти блоки из натурального дерева отлично подходят для того, чтобы дети учили буквы и цифры в увлекательной и творческой манере. Края для мизинцев закруглены, краска нетоксична.
• Старая цена продажи: 12,99
• Новая продажная цена: 7,99
• Featured Image: вырезать изображение деревянных блоков. Предпочтительный размер: 600 x 400 пикселей.
• Атрибуты: см. Ниже

На вкладке атрибутов введите значения для модуля дополнительной информации.

• Материал: натуральная сосна
• Краска: Нетоксичная белая краска
• Цвета краски: белый, синий, зеленый, фуксия

3. Создайте новый шаблон в построителе тем.

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

Пришло время перейти к построителю тем Divi. Мы построим там дизайн. А дд новый шаблон.

Начать создание индивидуального корпуса для всех продуктов

Используйте этот шаблон на всех продуктах и ​​начните строить тело.

Совет по построителю тем:

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

4. Воссоздайте дизайн детских товаров.

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

Фон

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

• Цвет фона: Pale Pink # f9f2f2

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

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

Теперь добавьте новую строку с 2 столбцами.

Размеры

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

• Пользовательская ширина желоба: 2
• Ширина: 90%
• Максимальная ширина: 90%

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

Фон

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

• Фоновая картинка

Интервал

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

• Верхняя и нижняя обивка: 5vw
• Отступ слева и справа
  • Таблетка: 2vw
  • Телефон: 0vw

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

Интервал

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

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

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

Содержание

Пришло время добавить модули. Сначала в столбце 1 добавьте модуль изображения woo и выберите этот продукт в разделе «Контент».

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

Элементы

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

• Лучшее изображение: Да
• Галерея: Нет
• Значок Продажи: Да

Текст значка продажи

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

• Цвет значка: прозрачный
• Шрифт: Nunito
• Толщина шрифта: полужирный
• Цвет текста: розовый # f24881
• Размер текста:
  • Рабочий стол: 5vw
  • Таблетка: 12vw
  • Телефон: 10vw

Размеры

Затем отрегулируйте интервал, чтобы все было лучше.

• Верхняя обивка:
  • Настольный компьютер и планшет: 1vw
  • Телефон: 2vw
• Нижняя обивка: 0vw
• Отступ слева и справа: 0vw

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

Содержание

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

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

Фон

Придайте модулю белый фон.

• Цвет фона: белый #ffffff

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

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

• Уровень заголовка: H1
• Шрифт: Nunito
• Толщина шрифта: Ультра полужирный
• Выравнивание текста: по центру
• Цвет текста: зеленовато-темно-серый # 314942
• Размер текста:
  • Рабочий стол: 2.6vw
  • Планшет и телефон: 6.4 ВВт

Интервал

Продолжайте регулировать интервал в модуле.

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

Граница

Наконец, настройте границу как для рабочего стола, так и для адаптивного размера.

• Закругленные углы:
  • Рабочий стол: 1vw все четыре угла
  • Планшет и телефон: 3vw все четыре угла

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

Содержание

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

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

Фон

Затем придайте модулю цвет фона.

• Цвет фона: белый #ffffff

Текст

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

• Шрифт: Nunito
• Цвет: зеленовато-темно-серый # 314942
• Размер:
  • Рабочий стол: 1vw
  • Таблетка: 2,5 ВВт
  • Телефон: 3vw

Интервал

Затем отрегулируйте расстояние для модуля.

• Верхнее поле:
  • Настольный компьютер и планшет: -0,5 ВВт
  • Телефон: -3vw
• Верхняя и нижняя обивка:
  • Рабочий стол: 1.5vw
  • Планшет и телефон: 4vw
• Отступ слева и справа:
  • Рабочий стол: 2vw
  • Планшет и телефон: 6vw

Граница

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

• Закругленные углы:
  • Рабочий стол: 1vw все четыре угла
  • Планшет и телефон: 3vw все четыре угла

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

Содержание

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

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

Фон

Затем добавьте белый фон.

• Цвет фона: белый #ffffff

Текст

На вкладке «Дизайн» начните стилизовать разные типы текста. Во-первых, текст, относящийся к значениям атрибутов.

• Шрифт: Nunito
• Стиль: Курсив
• Цвет: зеленовато-темно-серый # 314942
• Размер:
  • Рабочий стол: 0.8vw
  • Таблетка: 1.5vw
  • Телефон: 2vw

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

Во-вторых, стилизуйте текст заголовка.

• Шрифт: Nunito
• Вес: Ультра жирный
• Цвет: розовый # f24881
• Размер:
  • Рабочий стол: 1.7vw
  • Таблетка: 3vw
  • Телефон: 3.5vw
• Высота линии: 1em

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

В-третьих, стилизуйте текст атрибута.

• Шрифт: Nunito
• Вес: жирный
• Цвет: зеленовато-темно-серый # 314942
• Размер:
  • Рабочий стол: 0.9vw
  • Таблетка: 2vw
  • Телефон: 3vw

Интервал

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

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

Граница

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

• Закругленные углы:
  • Рабочий стол: 1vw все четыре угла
  • Планшет и телефон: 3vw все четыре угла

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

Содержание

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

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

Фон

Также добавьте к модулю розовый фон, чтобы выделить его.

• Цвет фона: Pink # f24881

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

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

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

• Шрифт: Nunito
• Цвет: белый #ffffff
• Размер:
  • Рабочий стол: 1.5vw
  • Таблетка: 2,5 ВВт
  • Телефон: 3vvw

Распродажа Текст новой цены

Продолжайте стилизовать новую цену.

• Шрифт: Nunito
• Вес: жирный
• Цвет: белый #ffffff
• Размер:
  • Рабочий стол: 2vw
  • Таблетка: 2vw
  • Телефон: 4vw
• Расстояние между буквами: 1 пиксель

Интервал

Затем отрегулируйте расстояние между модулями.

• Верхнее поле:
  • Настольный компьютер и планшет: -0,5 ВВт
  • Телефон: -3vw
• Верхняя и нижняя обивка:
  • Рабочий стол: 1.5vw
  • Планшет и телефон:
• Отступ слева и справа:
  • Рабочий стол: 2vw
  • Планшет и телефон: 5 ВВт

Граница

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

• Закругленные углы:
  • Рабочий стол: 1vw все четыре угла
  • Планшет и телефон: 3vw все четыре угла

Окончательный дизайн

Вот как выглядит дизайн реального продукта по сравнению с тем, как он выглядит в конструкторе тем.

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

Содержание

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

* Когда вы добавляете модуль woo add to cart, вы заметите, что вверху есть раскрывающееся меню для выбора цвета. Если вы не указали это на странице своего продукта, он не будет отображаться в вашем окончательном дизайне. Вы можете убедиться в этом, проверив работающий продукт во время создания внутри конструктора тем.

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

Элементы

Двигаясь дальше, выберите элементы, которые будут отображаться в модуле.

• Поле количества: Выкл.
• Наличие: отключено

Фон

Затем добавьте белый цвет фона.

• Цвет фона: белый #ffffff

Кнопка

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

• Размер текста:
  • Рабочий стол: 2vw
  • Таблетка: 3vw
  • Телефон: 5vw
• Цвет текста: розовый # f24881
• Цвет фона: белый #ffffff
• Расстояние между буквами: 1 пиксель
• Шрифт: Nunito
• Вес: тяжелый
• Верхняя и нижняя поля: -0,3vw

Интервал

Затем отрегулируйте расстояние между модулями.

• Верхнее поле:
  • Настольный компьютер и планшет: -0,5 ВВт
  • Таблетка: -3vw
• Верхняя и нижняя обивка: 0vw
• Левое и правое поле: 0vw

Граница

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

• Закругленные углы:
  • Рабочий стол: 1vw все четыре угла
  • Планшет и телефон: 3vw все четыре угла

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

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

Рабочий стол

Мобильный

Это упаковка на детской странице продукта!

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