В предыдущем уроке мы ты представил Divi. Для тех, кто не знает, 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, чтобы помочь с этим.

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

Недавно я просматривал сайт, на котором был всплывающий текст о продукте. Конечно, я видел и другие сайты электронной коммерции, на которых вместо иконок на товаре отображаются слова, так что эта концепция не была новой. Мне никогда не приходилось делать это в теме 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