在上一个教程中，我们 您介绍了Divi. 对于那些不知道的人，Divi 是一个 WordPress主题 团队设计的溢价 优雅的主题 在WordPress上提供各种服务以及设计插件和主题。
Divi 是一个响应式主题，后者与我们拥有的其他几个插件兼容 WooCommerce . 今天我们将向您展示如何为您的产品赋予不同的动画效果 WooCommerce .
有时的风格 WooCommerce 可能有点不够，特别是如果你的 CSS 样式有点不同的话。 本教程有点技术性（一点CSS，别无其他），将允许您对此进行补救。
关于Divi主题的其他教程
让我们开始。
修改鼠标悬停文字图标
默认情况下，当您将WooCommerce与Divi结合使用并将鼠标悬停在产品上时，您会看到一个小的'+'图标，它是一种字体（让图标）由Divi提出，内容如下：
在设置中将其更改为其他图标确实很容易，但是如果要添加一些文本，那是另一回事吗？ 我将向您展示如何使用当今的CSS代码段来实现这一点，并且还将包括可选代码以添加到您的网站中。
这是我们将完成的工作：
为什么仍然使用文本而不是图标？
我可以想到一些可以使您做到这一点的原因：
要定义给您的商店一个独特的外观： 您可以采取任何措施将Divi / WooCommerce网站与其他网站区分开来总是一件好事。
使用“查看”或“购买”之类的词可能会带来更多转化：每个人都需要做最适合自己网站的事情，并且您可以利用Divi上的集成A / B测试来提供帮助。
灵感来源
我最近浏览了一个网站，上面有关于产品悬停的文字。 我当然见过其他电子商务网站在产品上悬停的是文字而不是图标，所以这不是一个新概念。 我从来没有这样做过 Divi主题，当我看到这一点时，我给自己设定了一个挑战，并意识到这确实很容易实现。 只需很少的代码，您肯定不会影响博客的性能。
在文本上实现鼠标悬停
步骤1：颜色叠加
我们将首先在悬停时更改悬停叠加层的颜色。 这在Divi上非常容易做到。 在您的商店模块中，转到“ 先进的高级设计参数 并选择您的颜色。
步骤2：添加CSS
以下“ 主题选项>自定义CSS 或在您的孩子主题的样式表上。
.woocommerce .et_overlay：之前{left：0; 左边距：0； 内容：“视图”； / ***您的文字在这里*** / font-family：“没有专业版的来源”，Arial！ / ***选择字体*** /文本转换：大写； 字号：24px; 颜色：#fff; / ***设置文字颜色*** / font-weight：粗体； 文本对齐：居中； 宽度：100％； 填充：5px 0; }
如果您希望产品比较圆润，可以添加以下可选代码：
.woocommerce ul.products li.product一个IMG，.et_overlay {边界半径：50％; }
这就是它！
现在，您可以访问商店，并查看如何考虑您的更改。
[vc_row center_row =“ yes”] [vc_column宽度=“ 1/2”] [vcex_button target =“空白” layout =“展开” align =“ center” font_family =“ Raleway” font_weight =“ 700”样式=“ flat” custom_background =“＃18b69d” custom_hover_background =“＃118d7a” custom_color =“ #ffffff” custom_hover_color =“ #ffffff” icon_right =“ fa fa-download”]下载主题[/ vcex_button] [/ 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 =“ expanded” align =“ center” font_family =“ Raleway” font_weight =“ 700”样式=“ 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 WooCommerce产品上添加文字
- 如何更改Divi页面之间的菜单颜色
- 如何使用Divi个性化博客的网格
- 如何使用WordPress的作用迪维编辑
- 如何创建全屏Divi滑块
- 如何更改Divi页面之间菜单的颜色
- 您可能不了解Divi的功能
- 如何在WordPress上使用Divi Builder
- 如何使用Divi视频滚动模块
- 如何使用Divi Builder Flip模块
- 如何在Divi Builder上添加推荐模块
- 如何使用Divi文本模块
- 如何在Divi上创建滑块
- 如何编辑Divi用户角色
- 如何使用Divi社交媒体模块
- 如何在主题WordPress Divi上使用shop模块
- 如何使用Divi侧边栏模块
- 如何使用Divi Price表模块
- 如何使用Divi出版物的标题模块
- 如何添加Divi的视频模块
- 如何使用文章导航模块
- 如何使用Divi搜索模块
- 如何使用Divi钱包模块
- 如何在Divi Builder上使用person模块
- 如何使用带有Divi过滤器的钱包模块
- 如何使用全宽滑块模块
- 如何使用Divi Builder图像模块
- 如何使用Divi Builder的全宽导航模块
- 如何使用图库模块
- 如何使用Divi Builder全宽模块
- 如何使用Divi全宽度组合模块
- 如何使用Divi全角标题模块
- 如何使用Divi计数器模块
- 如何在Divi Builder上使用文章滑块
- 如何使用Divi Email Optin模块
每个产品的文字不同？ 您说将其添加到新产品？ 怎么了？在哪里？
超级文章，谢谢你的提示。 如果我们想要产品提供不同的文本，如何？
布里斯你好，
在这种情况下，您可以在新的WooCommerce产品上添加不同的文本。
超级！ 谢谢你的提示。
没什么。