Отличительные черты продукта Divi: DiviCommerce

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

Установка DiviCommerce

Я обнаружил, что установка DiviCommerce интуитивно понятна. Установите ее так же, как и любую другую тему WordPress, но с Divi в качестве активной темы. Перейдите в раздел «Внешний вид» > «Темы» > «Добавить новую тему» .

Выберите «Загрузить тему », нажмите «Выбрать файл» , выберите заархивированный файл DiviCommerce на своем компьютере и нажмите «Установить сейчас ».

Далее нажмите «Активировать» .

Наконец, выберите «Импорт демо-версии DC» > «Легкий импорт демо-версии» .

Выберите файлы для импорта и нажмите «Импортировать демонстрационный контент» . Я рекомендую использовать настройки по умолчанию.

После импорта демонстрационного контента нажмите «Удалить демонстрационный контент и функции импорта» . Теперь ваш сайт выглядит как демо-версия с фиктивными изображениями, показывающими необходимые размеры. Добавьте свой контент, и ваш сайт готов к использованию.

Страницы DiviCommerce

DiviCommerce поставляется с 26 страницами, в том числе 6 домашними, предназначенными для создания нескольких типов интернет-магазинов. Он также включает в себя 3 страницы магазина, 2 страницы продуктов, 2 страницы оформления заказа, 5 верхних и 2 нижних колонтитула и множество дополнительных функций. Функции включают фильтры продуктов Ajax, всплывающие окна корзины, поиск продуктов Ajax, всплывающие формы и образцы вариантов WooCommerce.

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

DiviCommerce Home One

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

Далее идет раздел для новичков. Сюда входят эффекты наведения для карточек товаров. В разделе из двух столбцов отображаются изображения, которые ссылаются на магазин. Изображения включают эффект Кена Бернса. Далее идет еще один раздел магазина с эффектами наведения. Вот верхняя часть демо-версии продукта.

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

DiviCommerce Дом Два

На второй домашней странице показан полноэкранный слайдер с призывами к действию.

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

Во второй половине Home Two показан раздел магазина, таймер обратного отсчета сделки на карточке поверх полноэкранного фонового изображения, блог и изображения.

DiviCommerce Дом Три

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

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

DiviCommerce Дом Четыре

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

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

DiviCommerce Дом Пять

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

DiviCommerce Дом Шесть

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

DiviCommerce Магазин Один

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

DiviCommerce, второй магазин

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

DiviCommerce Магазин Три

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

Первая страница продукта

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

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

Далее идет описание и информация о доставке, а также раздел для отзывов.

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

Вторая страница продукта

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

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

Всплывающее окно корзины

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

Страница корзины

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

Первая страница оформления заказа

Имеет две страницы оформления заказа. Это первая страница оформления заказа. Он размещает информацию о заказе и оплате справа от формы оформления заказа. На второй странице оформления заказа эта информация размещается под формой, а информация о компании размещается справа от формы.

О нас

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

Связаться с нами

На странице «Свяжитесь с нами» отображается контактная информация с аннотациями, отображается контактная форма, переключаются на часто задаваемые вопросы и включается полноразмерная карта.

Заголовки DiviCommerce

DiviCommerce включает в себя 5 заголовков. Они включают в себя несколько разделов, которые можно использовать, удалять или заменять на другой заголовок.

Заголовок первый

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

Заголовок второй

Второй заголовок помещает поле поиска в верхнюю панель. Корзина и меню меняются сторонами.

Заголовок третий

Третий заголовок помещает меню в новую панель в центре и внизу и перемещает поиск в центр.

Заголовок четвертый

Четвертый заголовок центрирует логотип и меню, слева размещает поиск, а справа — корзину.

Заголовок пятый

Наконец, пятый заголовок помещает поле поиска в верхнюю панель, перемещает логотип и меню влево, а корзину размещает справа.

Нижние колонтитулы DiviCommerce

DiviCommerce включает в себя два нижних колонтитула. Оба хорошо работают для электронной коммерции.

Нижний колонтитул один

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

Нижний колонтитул второй

Второй нижний колонтитул заменяет верхнюю часть формой электронной почты. Во втором разделе кнопки «Отслеживать в социальных сетях» перемещаются вправо в отдельном столбце.

Всплывающее окно DiviCommerce

DiviCommerce включает в себя всплывающее окно, созданное с помощью Divi Builder, и плагин Popup Maker. Само всплывающее окно отображает форму электронной почты с призывом к действию для регистрации с одной стороны и изображением с другой. Он включает в себя наложение и кнопку закрытия.

Поиск DiviCommerce

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

Где купить DiviCommerce

DiviCommerce доступен на Divi Marketplace за 25 долларов США. Он включает в себя один год поддержки и обновлений, неограниченное использование веб-сайта и 30-дневную гарантию возврата денег.

Завершающие мысли о DiviCommerce

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

Ждем вашего ответа. Вы пробовали дочернюю тему DiviCommerce? Дайте нам знать, что вы думаете об этом в комментариях.