Пропустить

Превратите модуль Divi Shop в динамические карты продуктов на мобильных устройствах

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

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

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

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

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

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

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

Возможный результат

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

Анимация магазина модуля продукта Divi

1. Настройте WooCommerce и страницы продукта

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

Создавайте продукты woocommerce

2. Создайте новую страницу и загрузите макет страницы бланка

Создать новую страницу

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

Создайте страницу divi
Создать новую страницу divi

Скачать макет целевой страницы

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

Выберите макет divi

3. Изменить раздел магазина

Найдите раздел с модулем Магазин

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

Найдите модуль магазина

Настройки линии

Отзывчивый размер

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

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

  • Используйте произвольную ширину желоба: 1
  • Ширина: 80% (рабочий стол), 100% (планшет и телефон)
Адаптивная модификация дизайна

видимость

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

  • Горизонтальное переполнение: скрыто
  • Вертикальный перелив: скрытый
Конфигурация видимости Divi

Настройки модуля магазина

Выберите количество продуктов и структуру колонны офиса на ваш выбор

Далее мы откроем настройки модуля Магазин. Изменения, которые мы вносим в наш код CSS (который мы добавим позже), зависят от количества продуктов, которые мы показываем. 

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

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

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

  • Количество продуктов: 8
  • Расположение столбцов: 4 столбца
Изменить дизайн столбца divi

Отзывчивый размер

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

  • Ширина: 100% (рабочий стол), 250% (планшет и телефон)
  • Максимальная ширина: 100% (рабочий стол), 250% (планшет и телефон)
Конфигурация адаптивного дизайна

Класс CSS

Мы также добавим класс CSS в наш модуль магазина. Позже, когда мы добавим код CSS, мы можем преобразовать модуль Shop, который несет только этот класс CSS. Другими словами, если вы хотите, чтобы другой модуль Shop отображался в нормальном состоянии, исключение этого класса CSS позволит вам это сделать.

  • Класс CSS: product-swipe-cards
Изменить атрибут css module store divi

Реактивные переполнения

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

  • Горизонтальное переполнение: скрытое (рабочий стол), прокрутка (планшет и телефон)
  • Вертикальный перелив: скрытый
Конфигурация переполнения

Добавьте модуль кода под модулем магазина

После того, как вы изменили модуль Shop, вы можете добавить модуль кода чуть ниже.

Добавить модуль кода в модуль магазина divi

Добавить код CSS в модуль

Следующий код CSS автоматически преобразует модуль нашего магазина из 8 продуктов в реактивные магнитные карты:

<style> @media all and (max-width: 980px) { .product-swipe-cards ul.products {display: grid !important;grid-template-columns: repeat(8, 8.8%) !important;grid-column-gap: 0.7%;} .product-swipe-cards .woocommerce ul.products::before {content: none;display: block;} .product-swipe-cards.et_pb_shop ul.products li.product {width: 100% !important;} .product-swipe-cards .woocommerce {width: 255% !important;margin-left: 5%;} .product-swipe-cards::-webkit-scrollbar {display: none;} .product-swipe-cards {-ms-overflow-style: none;} } </style>

Добавить код css divi

Подберите разные аккаунты продуктов

Теперь, если вы хотите добавить меньше (или больше) товаров в модуль магазина, код немного изменится в двух местах. Эти два местоположения необходимо изменить вручную, чтобы добиться желаемого результата. Давайте изменим, например, количество товаров в модуле нашего магазина на «4».

  • Количество продуктов: 4
Соответствие другому аккаунту продукта

Когда мы вернемся к нашему коду, нам нужно внести два изменения. Во-первых, нам нужно будет изменить столбцы шаблона сетки. Вместо 8 мы используем 4 (столько же, сколько у нас продуктов). Мы также увеличиваем процентный размер, который эти продукты занимают в наших таблицах продуктов (чем больше продуктов, тем меньше места).

grid-template-columns: repeat (4, 14%)! важный;

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

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

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

Чтобы найти правильный баланс, переключитесь в мобильное представление в Visual Builder и внимательно настройте значения, просматривая результат этих изменений.

width: 150%!important;

Добавить дополнительный код divi css

Добавить оснастку в свиток

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

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

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

scroll-snap-align: начало

Мы также активируем захват прокрутки в нашем модуле магазина, добавив следующую строку кода CSS:

scroll-snap-type: x обязательный

Настроить код css

Повторно используйте модуль мастерской для отображения других категорий

Клонировать всю строку один раз

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

Повторно использовать модуль мастерской divi

Удалить модуль кода в дубликате

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

Дублируйте модуль кода Divi

Клонируйте дубликат строки столько, сколько хотите

И клонируйте дублирующую линию теперь столько раз, сколько необходимо, в зависимости от количества наборов карт прокрутки, которые вы хотите отобразить на своей целевой странице!

Клонируйте модуль столько, сколько необходимо
Дублированный модуль divi

4. Сохраните изменения страницы и просмотрите результаты на мобильном устройстве.

Убедитесь, что после того, как вы закончите добавлять карточки для прокрутки продуктов, вы сохранили свою страницу перед выходом из Visual Builder, и все готово!

Предварительный просмотр демо на мобильном устройстве

обследование

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.

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

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

Анимация магазина модуля продукта Divi

Заключительные мысли

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

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

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

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

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

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

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

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

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

Вверх
0 акции
доля
чирикать
Регистрация