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

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

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

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

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

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

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

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

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

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

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

Пример страницы divi woocommerce

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

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

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

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

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

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

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

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

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

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
Добавьте мод цены woocommerce divi

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

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

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

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

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

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

Результат

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

Предварительный просмотр изображения Divi

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

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

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

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

Услуга добавлена ​​в корзину woocommerce divi

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

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