В предыдущем уроке мы ты представил Divi. Для тех, кто не знает, Диви WordPress тема премиум, разработанный командой Элегантные темы который предлагает различные услуги на WordPress и дизайн плагинов и тем.

Divi — это адаптивная тема, и последняя совместима с несколькими другими плагинами, среди которых есть и другие. WooCommerce. Сегодня мы собираемся показать вам, как придать различную анимацию вашим продуктам. WooCommerce.

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

Другие учебники по теме Divi

• сайты 5 для использования ресторана Divi темы
• Как добавить текст на DiVi продукта WooCommerce
• Как изменить цвет меню между страницами на Divi
• Особенности, которые вы не знаете о Divi
• Как создать слайдер на Divi
• Как редактировать роль пользователя в Divi

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

Изменение иконки для текста над мышью

По умолчанию, когда вы используете WooCommerce с Divi и наводите курсор на продукт, вы видите небольшой значок «+», который является шрифтом (макияж значок), предложенный Divi и заключающийся в следующем:

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

Вот что мы когда-нибудь закончим:

Зачем вообще использовать текст вместо значка?

Я могу подумать о некоторых причинах, которые могут заставить вас сделать это:

Чтобы определить, придать уникальный вид вашему магазину: Все, что вы можете сделать, чтобы отличить свой сайт Divi / WooCommerce от другого, всегда полезно.

Использование таких слов, как "Просмотр" или "Купить", может привести к увеличению конверсии.Каждый должен делать то, что лучше для своего веб-сайта, и вы можете воспользоваться интегрированным A / B-тестированием Divi, чтобы помочь с этим.

Источник вдохновения

Недавно я просматривал сайт, на котором всплывал текст о продукте. Я, конечно, видел и другие сайты электронной коммерции, на которых над продуктом зависали слова, а не значки, так что это не было новой концепцией. Мне никогда не приходилось делать это на Диви тема, и когда я увидел это, я поставил перед собой задачу и понял, что это действительно легко реализовать. Поскольку требуется очень мало кода, вы точно не повлияете на производительность своего блога.

Реализация мыши над текстом

Шаг 1: наложение цвета

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

Шаг 2: добавление CSS

Следующий код CSS в " Параметры темы> Пользовательский CSS Или в таблице стилей вашей детской темы.

.woocommerce .et_overlay: перед {слева: 0; поле слева: 0; содержание: «просмотр»; / *** Твой текст здесь *** / font-family: 'Source Without Pro', Arial! / *** Выберите ваш шрифт *** / text-transform: uppercase; размер шрифта: 24px; цвет: #fff; / *** Установить цвет текста *** / font-weight: bold; выравнивание текста: по центру; ширина: 100%; отступы: 5px 0; }

Если вы хотите, чтобы ваши продукты были довольно круглыми, вы можете добавить этот дополнительный код:

.woocommerce ul.products li.product IMG, .et_overlay {границы радиус: 50%; }

Вот так!

Теперь вы можете посетить свой магазин и посмотреть, как ваши изменения принимаются во внимание.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" extended "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] СКАЧАТЬ ТЕМУ РАЗДЕЛА [/ vcex_button] [/ width_column] [»vc_column] [» vc_column »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials "target =" blank "layout =" extended "align =" center " font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] ЗАГРУЗИТЬ ХРАНИЛИЩЕ ЗАГРУЗИТЬ DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

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

• сайты 5 для использования ресторана Divi темы
• Как добавить текст в продукт Divi WooCommerce
• Как изменить цвет меню между страницами Divi
• Как персонализировать сетки блога с Divi
• Как использовать роль DiVi редактор на WordPress
• Как создать полноэкранный слайдер Divi
• Как изменить цвет меню между страницами Divi
• Особенности, которые вы, вероятно, не знаете о Divi
• Как использовать Divi Builder в WordPress
• Как использовать модуль прокрутки видео Divi
• Как использовать модуль Flip Builder Flip
• Как добавить отзыв модуль на Divi Builder
• Как использовать текстовый модуль Divi
• Как создать слайдер на Divi
• Как редактировать роль пользователя Divi
• Как использовать модуль Divi Social Media
• Как пользоваться магазинным модулем на тему WordPress Divi
• Как использовать боковую панель Divi
• Как использовать модуль таблицы цен Divi
• Как использовать титульный модуль изданий Divi
• Как добавить видео модуль Divi
• Как использовать навигационный модуль статьи
• Как использовать модуль поиска Divi
• Как использовать модуль кошелька Divi
• Как использовать модуль пользователя в Divi Builder
• Как использовать модуль кошелька с фильтром Divi
• Как использовать ползунок полной ширины
• Как использовать модуль изображения Divi Builder
• Как использовать полноразмерный навигационный модуль Divi Builder
• Как использовать модуль галереи изображений
• Как использовать модуль карты полной ширины Divi Builder
• Как использовать модуль Divi Full Width Portfolio
• Как использовать полноразмерный заголовочный модуль Divi
• Как использовать Divi Counter Module
• Как использовать слайдер статей в Divi Builder
• Как использовать модуль Divi Email Optin