Пропустить

Как разработать клейкие полоски для страниц продукта с модулями Divi Woo

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

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

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

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

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

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

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

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

Часть 1: Дизайн адгезивной планки на странице продукта

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

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

Отображение товара в полную ширину divi woocommerce

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

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

Вставить строку в столбец woocomemrce

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

Перед добавлением модулей обновите параметры линии следующим образом:

  • Цвет фона: # 333333
  • Использовать произвольную ширину желоба: ДА
  • Ширина желоба: 1
  • Ширина: 100%
  • Обивка: верх 0px, низ 0px
Parametra липкий раздел divi

Сделайте линию липкой

Чтобы линия стала липкой, добавьте следующий пользовательский код CSS в основной элемент рабочего стола:

position: -webkit-sticky !important; position: sticky !important; top: 50px;

Затем добавьте следующий код CSS к тому же основному элементу для дисплея планшета:

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

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

top: 0px;

Если вы не знакомы со свойством css "position: sticky", это своего рода смесь между фиксированным положением и относительным положением, при котором элемент (в данном случае строка) будет прокручиваться вместе со своим контейнер до тех пор, пока он не достигнет назначенной позиции вверху или внизу страницы (или указанного смещения). В этом примере мы устанавливаем смещение на 50 пикселей от верхней части окна браузера (оставляя место для высоты фиксированного заголовка по умолчанию на рабочем столе). Затем на планшете смещение изменяется на «top: 0px», чтобы исправить клейкую линию / полосу в верхней части браузера на мобильном устройстве.

Примечание: игнорируйте любые ошибки, которые вы видите, когда добавляете CSS в поле. Код будет работать нормально.

После CSS обновите индекс Z следующим образом:

  • Z индекс: 10
Z index продукт woocommerce

Теперь линия станет липкой, когда пользователь прокручивает страницу продукта.

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

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

display:flex; align-items:center;

Код css столбец divi модуль woocommerce

Он заботится о нашем дизайне липких линий. Теперь нам нужно заполнить строку содержимым.

Добавить название Woo

Добавьте новый модуль Woo title в столбец с клейкой строкой.

Добавить название woo

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

  • Цвет текста заголовка: #ffffff
  • Размер текста заголовка: 28px (рабочий стол), 20px (планшет), 16px (телефон)
  • Ширина: 30%
  • Обивка: 2vw вверху, 2vw внизу, 2vw слева, 2vw справа
Цветной липкий бар Divi

Добавить цену Ву

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

Дивизион цен на Woocommerce

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

  • Цена Размер текста: 28px (рабочий стол), 20px (планшет), 16px (телефон)
  • Ширина: 30%
  • Обивка: 2vw вверху, 2vw внизу, 2vw слева, 2vw справа
  • Ширина правой границы: 1px
  • Цвет правой границы: #777777
  • Ширина левой границы: 1px
  • Цвет левой границы: #777777

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

Для последнего фрагмента содержимого добавьте модуль «Добавить в корзину Woo» сразу после модуля «Woo Price».

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

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

Упростите элемент «Добавить в корзину», скрыв поле количества и количества запасов на мобильном устройстве.

  • Поле отображения количества: OFF (планшет)
  • Показать акции: OFF
Показать добавить в корзину divi
  • Выравнивание текста: справа
  • Использовать пользовательские стили для кнопки: ДА
  • Размер текста кнопки: 18px (планшет), 14px (телефон)
  • Цвет текста кнопки: #ffffff
  • Цвет фона кнопки: #0c71c3
  • Ширина границы кнопки: 0px
Настройте стиль кнопки
  • Ширина: 40%
  • Обивка: 2vw слева, 2vw справа
Кнопка ширины нестандартного размера добавить в корзину woocommerce

Результат

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

2 Part: создание панели уведомлений корзины

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

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

  • Ширина: 100%
  • Обивка: 0px вверху, 0px внизу
Добавить новую строку divi

Сделайте строку липкой, добавив следующий основной CSS в основной элемент:

position: -webkit-sticky !important; position: sticky !important; bottom: 0px;

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

Настроить стиль модуля css divi

Строка будет прилипать к нижней части окна при прокрутке вверх.

Затем обновите индекс z, чтобы он оставался на переднем плане, например:

  • Z индекс: 10
Настроить модуль zindex divi line

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

После того как вы создали строку, добавьте в нее модуль Woo Cart Notice и обновите настройки следующим образом:

  • Размер текста (телефон): 15px
  • Маржа: 0em внизу
Настройка модуля уведомлений woo

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

Конечный результат

Вот как может выглядеть окончательный результат.

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

Надеюсь, эта статья поможет нам понять, как создавать липкие полосы для страниц наших продуктов в Divi. Мы рассмотрели, как создать липкую полосу с названием продукта, ценой и кнопкой «Добавить в корзину». А также мы показали, как создать липкую полосу. Оба они должны упростить процесс покупки и повысить конверсию. И нам даже не нужен плагин!

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

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

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

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

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