Пропустить

Учебник Divi: как использовать модуль магазина

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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 для запуска генератора в визуальном режиме. Вы также можете нажать кнопку Использовать Visual Builder когда вы просматриваете свой веб-сайт на переднем плане, если вы подключены к своей панели управления WordPress.

divi builder

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

магазин модуль divi.png

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

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

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

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

отображать продукты на странице ускорения divi.jpg

Давайте начнем.

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

zone option divi.png

Затем добавьте модуль магазина в линию.

вставить модуль бутика divi.png

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Параметры содержимого

Тип: Недавние продукты
Количество продуктов: 4

Варианты дизайна

Icon Hover Цвет: # ea1d63
Название Полиция: Открыть без
Размер шрифта заголовка: 24px
Премия полиции: без
Размер шрифта: 20px

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

Титр:

text-align: center;
background: #fff;
margin-top: -10px! значительный;

При:

text-align: center;
background: #fff;
обивка: 15px;

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

раздел продукта divi.jpg

Параметры контента магазина

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

Тип

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

Количество продуктов

Определите количество продуктов, которые вы хотите отображать. Вам понадобятся продукты, чтобы что-нибудь появилось в этом модуле.

Включить категории

Выберите категории, которые вы хотите включить.

Количество столбцов

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

Переставить по

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Значок администратора

Это изменит метку модуля в конструкторе для упрощения идентификации. Когда вы используете представление WireFrame в Visual Builder, эти метки появляются в модульном блоке интерфейса Divi Builder.

Варианты оформления мастерской

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

установочный магазин divi.png

Значок наложения

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

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

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

Значок выбора

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

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

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

Название шрифта

Вы можете изменить шрифт текста заголовка, выбрав нужный шрифт в раскрывающемся меню. 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» в зависимости от вашего значения размера, чтобы изменить его тип единицы.

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

Расширенные возможности магазина

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

опционный бутик-бонус divi.png

CSS-идентификатор

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

Класс CSS

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

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

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

видимость

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

Другие учебные пособия Divi

Эта статья содержит 1 комментарий

  1. Дорогой Баир,

    Благодарим Вас за Ваш вклад.
    У меня есть вопрос о модуле магазина, и я был бы очень рад, если бы вы ответили на него за меня.
    И я бы хотел, чтобы индивидуально выбранные товары были видны в моем модуле магазина. Я думал, что этого можно добиться, приняв «звездные продукты». Но после выбора этой опции я не могу найти способ выбрать желаемые продукты для модуля. Я что-то упускаю? У вас есть объяснение?

    С уважением, Фредерик

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
12 акции
доля4
чирикать2
Регистрация6