Создайте страницу категории продуктов WooCommerce с помощью конструктора тем Divi

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

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

Давайте приступим к делу!

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

1. Обновите свои продукты и категории

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

2. Плагин настройки

Загрузить и установить

Загрузите фильтры продуктов WooCommerce. Перейдите на панель управления плагином и загрузите файл .zip плагина, чтобы установить его. Или найдите плагин в каталоге. Плагин добавит новую вкладку в меню вашей панели. Убедитесь, что вы также активировали плагин.

Добавить новую форму фильтра

Щелкните вкладку плагина на панели управления. В настройках плагина нажмите кнопку, чтобы добавить новую форму фильтра.

Настроить форму фильтра

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

• Макет: Вертикальный
• Пустые поля: не показывать поле, если оно пусто
• Сортировка продуктов: Скрыть сортировку продуктов
• Вариант разбивки на страницы: бесконечная прокрутка
• Кнопка сброса: нет кнопки сброса
• Логическая связь между таксономиями: И
• Шаблон страницы результатов: отображение результатов на той же странице

Создать поле категории

В строке меню под основной областью вы увидите набор вкладок. Перетащите вкладку «Категория» в конструктор под ней. Затем отрегулируйте настройки следующим образом:

• Название поля: Категории
• Включить детей: Да
• Отображать как: флажок
• Логика: ИЛИ
• Порядок: Имя, По убыванию
• Макет: горизонтальный, 2 столбца

Создать поле тега

Теперь перетащите вкладку «Тег» в конструктор. Убедитесь, что он находится под вкладкой "Категория". Отрегулируйте настройки следующим образом:

• Заголовок поля: Тип
• Отображать как: флажок
• Порядок: Имя, По убыванию
• Макет: горизонтальный, 2 столбца
• Цветные иконки
  • Фон: Прозрачный
  • Цвет текста: темно-коричневый # 44000d

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

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

3. Воссоздайте шаблон страницы категории продуктов в построителе тем.

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

Пора приступить к воссозданию шаблона! Откройте свой конструктор тем и добавьте новый шаблон.

Установить настройки шаблона

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

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

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

Выберите Build Custom Body

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

Строить с нуля

Оказавшись внутри визуального конструктора, выберите вариант создания с нуля еще раз.

Раздел 1 Настройки

Фон

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

• Цвет фона: прозрачный голубовато-серый - rgba (68,66,109,0.02)

Добавить ряд

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

Теперь добавьте новую строку со следующей структурой столбцов:

Размеры

Затем настройте размер строки.

• Ширина желоба: 1
• Ширина
  • Рабочий стол: 90%
  • Планшет и телефон: 85%
• Максимальная ширина: 1920 пикселей

Интервал

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

• Левое и правое поле
  • Рабочий стол: авто
  • Таблетка: 55 пикселей
  • Телефон: 30 пикселей
• Верхний отступ: 100 пикселей

Добавить модуль заголовка сообщения в 1-й столбец

Элементы

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

• Название шоу: Да

Фон

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

• Цвет: # e8e8e8

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

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

• Уровень титула: H1
• Шрифт: Josefin Sans
• Вес: жирный
• Стиль: TT
• Цвет: # 44000d
• Размер
  • Рабочий стол: 32 пикселя
  • Таблетка: 28 пикселей
  • Телефон: 30 пикселей
• Высота линии: 1,2 см

Интервал

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

• Верхняя обивка
  • Рабочий стол и планшет: 100 пикселей
• Нижний отступ: 80 пикселей
• Левый отступ
  • Рабочий стол и планшет: 30 пикселей
• Правый отступ
  • Рабочий стол и планшет: 30 пикселей
  • Телефон: 10px

Граница

Придайте модулю закругленные углы.

• Закругленные углы: 15 пикселей все четыре

Коробка Тень

И добавьте легкую тень коробки.

• Тень коробки: 2-й вариант
• Горизонтальное положение: 12 пикселей
• Вертикальное положение: 12 пикселей
• Сила размытия: 20 пикселей
• Сила распространения: -5 пикселей
• Цвет тени: #dddddd

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

Содержание

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

• Тело: шорткод плагина

Фон

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

• Цвет: # e8e8e8

Текст

Стиль текста.

• Шрифт: Josefin Sans
• Цвет: # 44000d
• Размер
  • Рабочий стол: 20 пикселей
  • Таблетка: 18 пикселей
  • Телефон: 16px
• Интервал: 1 пикс.

Интервал

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

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

Граница

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

• Закругленные углы: 15 пикселей все четыре

Коробка Тень

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

• Тень коробки: 2-й вариант
• Горизонтальное положение: 12 пикселей
• Вертикальное положение: 12 пикселей
• Сила размытия: 20 пикселей
• Сила распространения: -5 пикселей
• Цвет тени: #dddddd

Добавить модуль магазина во вторую колонку

Содержание

К следующей колонке! Добавьте модуль магазина и настройте основные параметры следующим образом:

• Тип просмотра продукта: по умолчанию
• Использовать текущую страницу: Да
• Расположение столбцов: 3 столбца

Изображение

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

• Закругленные углы изображения: 15 пикселей все четыре
• Image Box Shadow: 2-й вариант
  • Горизонтальное положение: 6 пикселей
  • Вертикальное положение: 6 пикселей
  • Сила размытия: 18 пикселей
  • Цвет тени: #dddddd

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

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

• Шрифт: Josefin Sans
• Вес: полужирным шрифтом
• Выравнивание: Правое
• Цвет: # 44000d
• Размер
  • Рабочий стол: 26 пикселей
  • Таблетка: 24px
  • Телефон: 17px
• Интервал: 2 пикселя

Текст цены

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

• Шрифт: Josefin Sans
• Выравнивание: Правое
• Цвет: # 44000d
• Размер: 15 пикселей
• Расстояние между буквами: 2 пикселя
• Высота линии: 46 пикселей

Интервал

Также измените настройки интервала.

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

Пользовательские CSS

И последнее, но не менее важное: добавьте пользовательские две строки кода CSS на вкладку «Дополнительно», чтобы создать некоторое пространство между различными элементами в модуле магазина. Вот и все!

• Изображение: padding-bottom: 20px
• Цена: padding-bottom: 40 пикселей

padding-bottom: 20px;

padding-bottom: 40px;

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

Мы закончили воссоздание шаблона страницы категории продукта WooCommerce. Давайте еще раз посмотрим на готовый дизайн на разных размерах экрана.

Рабочий стол

Мобильный

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

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