Модуль Магазин Divi

Как добавить, настроить и адаптировать под свои требования модуль Divi — Магазин.

Divi был разработан для совместимости с WooCommerce. Для интеграции WooCommerce вам необходимо установить последнюю версию WooCommerce.

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

Обратите внимание, что хотя конструктор включает в себя различные модули WooCommerce, вы также можете использовать WooCommerce отдельно без конструктора. Вы можете создавать стандартные страницы для Checkout, Shopping Cart и т. Д., Как указано в их документации. Вы также можете напрямую ссылаться на свои категории woocommerce или использовать шорткоды WooCommerce в текстовом модуле Divi. Это дает вам свободу делать что угодно.

Как добавить модуль Магазин на свою страницу

Прежде чем вы сможете добавить модуль слайдер на свою страницу, вам сначала нужно перейти в Divi Builder. После установки темы Divi на ваш веб-сайт вы увидите кнопку «Использовать Divi Builder» над текстовым редактором страницы каждый раз, когда создаете новую страницу. Нажатие этой кнопки активирует Divi Builder, предоставляя вам доступ ко всем модулям Divi Builder. Затем выберите один из трёх вариантов, чтобы запустить редактор страницы в визуальном режиме. Вы также можете нажать кнопку «Включить Visual Builder» при просмотре веб-сайта в интерфейсе пользователя, если вы вошли в свою панель управления WordPress.

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

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

Пример использования: размещение самых последних продуктов на главной странице с помощью модуля «Магазин»

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

Вот страница с четырьмя представленными продуктами.

Используйте визуальный конструктор, чтобы добавить обычный раздел с строкой на всю ширину (1 столбец). Измените настройку строки, чтобы сделать ее полной шириной с настраиваемой шириной желоба 2.

Затем добавьте в строку аудиомодуль.

В настройках модуля обновите следующие параметры:

Вкладка Контент

Тип продукта: Latest products
Число товаров: 4

Вкладка Дизайн

Overlay цвет иконки: #ea1d63
Заголовок Шрифт: Open Sans
Заголовок размер текста: 24px
Цена Шрифт: Open Sans
Цена размер текста: 20px

Вкладка Расширенный (Пользовательский CSS)

Заголовок:

text-align: center;
background: #fff;
margin-top: -10px !important;

Цена:

text-align: center;
background: #fff;
padding-bottom: 15px;

Вот и все! Вот окончательный результат.

Вкладка Контент модуля Магазин

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

Тип продукта

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

Число товаров

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

Расположение столбцов

Выберите, сколько столбцов будет отображаться в модуле вашего магазина. Для строки из 1 столбца следует использовать 4 столбца. Для столбца 3/4 ряда следует использовать 3 столбца. 2 столбца следует использовать для столбца 1/2 строки. 1 столбец следует использовать для столбца 1/4 строки.

Порядок

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

Метка администратора

Это изменит метку модуля в построителе для облегчения идентификации. При использовании представления WireFrame в Visual Builder эти метки будут отображаться в блоке модуля в интерфейсе Divi Builder.

Вкладка Дизайн модуля Магазин

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

Overlay цвет иконки

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

Цвет фона наложения

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

Наложение значка

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

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

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

Заголовок Шрифт

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

Заголовок Размер текста

Здесь вы можете настроить размер текста заголовка. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста, или вы можете ввести желаемое значение размера текста прямо в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» после вашего значения размера, чтобы изменить его тип единицы измерения.

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

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

Заголовок расстояние между букв

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

Заголовок высота строки

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

Цена Шрифт

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

Цена Размер текста

Здесь вы можете настроить размер текста цены. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста, или вы можете ввести желаемое значение размера текста прямо в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» после вашего значения размера, чтобы изменить его тип единицы измерения.

Цена Цвет текста

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

Цена расстояние между букв

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

Цена Высота строки

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

Вкладка Расширенный модуля Слайдер

На вкладке «Расширенный» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты CSS и HTML. Здесь вы можете применить собственный CSS к любому из множества элементов модуля. Вы также можете применить к модулю собственные классы CSS и идентификаторы, которые можно использовать для настройки модуля в файле style.css вашей дочерней темы.

CSS ID

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

Класс CSS

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

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

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

Отключить на

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