Особенности плагина Divi: Divi BodyCommerce

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

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

Установка и настройки Divi BodyCommerce

Загрузите и активируйте плагин как обычно. Чтобы активировать лицензию, перейдите в Divi Engine > BodyCommerce License в меню панели инструментов.

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

Модули Divi BodyCommerce

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

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

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

Создание и назначение страницы

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

Затем перейдите в Divi Engine > BodyCommerce в меню панели инструментов. Выберите вкладку для типа создаваемой страницы, а затем выберите макет для этой страницы. Вы можете создать столько макетов, сколько захотите, и использовать их для разных типов страниц и для отдельных категорий.

Примеры Divi BodyCommerce

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

Страница магазина Divi BodyCommerce

Для страницы магазина я только что добавил модуль страниц архива цикла продуктов.

Вот страница с настройками по умолчанию. Каждый из элементов можно настроить с помощью Divi Builder.

Здесь он находится в макете чайного магазина. Это настройки по умолчанию, за исключением ограничения. Я установил показ 6 товаров.

Вы можете настроить некоторые элементы вживую.

Я добавил зеленый фон к значку и кнопкам продажи, установил макет так, чтобы отображалось 6 столбцов, добавил тень к продуктам и добавил зеленый оверлей. Я впечатлен количеством вариантов макета.

Это макет в стиле блога. Было бы здорово, если бы у вас были более длинные описания продуктов.

Страница продукта Divi BodyCommerce

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

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

Я добавил наугад еще несколько страниц продукта и глобальных модулей.

Он начинает показывать, что можно делать с BodyCommerce. Давайте сделаем немного Divi на этой странице.

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

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

Корзина покупок Divi BodyCommerce

Я создаю страницу корзины покупок, используя страницу контактов в макете пекарни. Я использую модули "Товары в корзине" и "Итоги корзины". Они не отображают свое содержимое при просмотре в Visual Builder, но вы все равно можете создавать в Visual Builder. Модули предоставляют множество других функций, таких как перекрестные продажи.

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

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

Документация Divi BodyCommerce

Документация предоставляется в письменной форме на сайте разработчика и с серией видеороликов на YouTube. Мне нравится, что он включает в себя и то, и другое. Ссылки доступны в меню панели инструментов Divi Engine. Вы также можете просмотреть видео, нажав на любую из функций на веб-сайте разработчика. Это создает интересную структуру для поиска нужных видео. Именно так я нашел видео, которые хотел посмотреть.

Курс Divi BodyCommerce

BodyCommerce предлагает на выбор три лицензии:

• 1 сайт - 24 £
• 5 сайтов - 50 £
• Безлимитные сайты - 96 £

Вы можете приобрести BodyCommerce на сайте разработчика.

Конечные мысли

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

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

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

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

Лучшее изображение через Letters-Shmetters / shutterstock.com