DiviCommerce. Обзор дочерней темы Divi

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

Установка DiviCommerce

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

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

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

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

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

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

Страницы DiviCommerce

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

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

DiviCommerce Home One

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

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

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

DiviCommerce, макет Home Two

В макете Home Two  показан полноэкранный слайдер с призывами к действию.

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

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

DiviCommerce, макет Home Three

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

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

DiviCommerce, макет Home Four

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

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

DiviCommerce, макет Home Five

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

DiviCommerce, макет Home Six

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

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

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

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

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

DiviCommerce Магазин Три

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

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

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

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

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

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

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

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

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

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

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

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

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

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

О нас

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поиск DiviCommerce

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

Где купить DiviCommerce

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

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

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

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