您想为 Divi 标题插入紧凑的推荐滑块吗？
向您的网站添加推荐信是为您的企业（或您的品牌）建立信誉并与用户建立信任的有效方式。 游客.
推荐滑块是在一个地方展示推荐的便捷工具。 考虑到这一点，在您的标题中添加一个紧凑的推荐滑块是有意义的，这样这些推荐是用户在访问您的网站时首先看到的内容之一 现场网络.
在本教程中，我们将向您展示如何创建一个紧凑的推荐滑块，以在您的标题中展示简短的推荐。 网站Web.
为此，我们将以一种有趣且独特的方式修改 Divi 滑块模块。
让我们开始吧！
但在您发现我们的指南之前 Divi，世界上最好的 WordPress 主题，也是最容易使用的
概观
这是我们将使用 Divi 的 Slider 模块构建的紧凑型推荐滑块。
这是添加到全局标题中的相同推荐滑块。
这就是它在移动设备上的样子。
使用 Divi Builder 创建新页面
要开始，您需要执行以下操作：
从 WordPress 仪表板，转到 页面>添加新 创建一个新页面。
给它一个对你有意义的标题，然后点击 使用 Divi Builder
然后点击 开始建设 (从头开始)
之后，您将有一块空白画布可以开始在Divi中进行设计。
如何在 Divi 中创建一个紧凑的推荐滑块
添加新的行和滑块模块
要开始，请向该部分添加一列行。
然后在该行中添加一个 Slider 模块。
编辑幻灯片
在滑块设置下，删除选项卡下的默认第二张幻灯片 内容，然后单击以更改剩余幻灯片的设置。
幻灯片内容
在标签下 内容 从幻灯片设置中，更新以下内容：
- 标题：“Donec solicitudin molestie malesuada。 Vivamus suscipit tortor eget。
- 按钮：阅读全部
- 身体：——塔蒂亚娜·加格尔曼
完成后，保存幻灯片设置。
更新滑块设置
复制幻灯片和隐藏控件
更新第一张幻灯片后 内容，复制此幻灯片以创建一张或多张附加幻灯片。
然后在选项组下 元素，通过更新以下内容隐藏滑块控件：
- 显示控制：否
更新所有幻灯片的背景
接下来，我们将添加将用于所有幻灯片的背景。
要添加背景，请更新以下内容：
- 背景渐变：
- 梯度停止 0%：#000000
- 梯度停止 100%：#000000
- 背景图片：
- 尺码：合身
- 位置：中左
- 混合：亮度
滑块设置
在标签下 设计，更新以下内容：
盖
- 使用背景叠加：是
- 背景叠加颜色：rgba(0,0,0,0.7)
标题文字
- 标题：
- 标题级别：H4
- 字体： Josefin Sans
- 字体粗细：中等
- 文字对齐：左
- 文字大小：16px（台式机和平板电脑），14px（手机）
- 线高：1,5em
正文文本
- 身体 ：
- 字体： Josefin Sans
- 文字对齐：左
- 文字颜色：#aaaaaa
- 字母间距：0,05em
按键
- 为按钮使用自定义大小：是
- 按键：
- 文字大小：1em
- 文本颜色：默认（桌面）、#000（悬停）
- 背景颜色（桌面）：rgba(255,255,255,0.19)
- 背景颜色（悬停）：#ffffff
- 边框宽度：0 像素
- 字母间距：0,05em
- 字体： Josefin Sans
- 边距：0px（顶部和底部）
- 填充：0px（顶部和底部），0,6em（左右）
自动填充和动画
接下来，将滑块间距更新为紧凑并设置所需的自动动画速度。
- 边距：0px（顶部和底部）
- 填充：1em（顶部和底部），5%（左右）
- 自动动画：开
- 自动动画速度：3500
自定义CSS
在标签下 高级，添加以下自定义 CSS 以更新每个滑块元素（标题、按钮和箭头）的样式
幻灯片标题
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;这将确保幻灯片标题不会在较小的屏幕上创建换行符。
滑动按钮
position:absolute;
bottom: 1em;
right: 6%;这为按钮提供了一个绝对位置，使其位于标题下方和幻灯片右侧，使滑块更加紧凑。
拖动箭头
font-size: 30px;
margin-top: -15px;它只是使滑块导航箭头更小以适应滑块的紧凑尺寸。
提示：为列添加相同的背景颜色以实现更平滑的幻灯片过渡
为此，请打开滑块父列的设置并添加以下背景颜色：
- 背景：#000000
将作者背景图像添加到幻灯片
如果要在幻灯片中包含作者背景图像，可以通过为每张幻灯片添加背景图像来实现。
将背景图像添加到幻灯片后，背景图像将继承滑块（而不是幻灯片）设置下已有的样式。
结果
查看最终结果。
将紧凑的推荐滑块添加到标题模板
将模块保存在 Divi 库中
在我们可以将紧凑的推荐滑块添加到全局标题之前，我们首先需要在 Divi 库中注册模块。
您可以通过将鼠标悬停在滑块模块上并单击“ 添加到图书馆“。 然后为布局命名并单击按钮“ 保存到图书馆”。
向标题模板添加了紧凑的推荐模块布局
编辑自定义标题
将新的推荐滑块模块保存到库后，我们就可以将其添加到自定义标题中了。
访问 Divi > 主题生成器，然后单击允许您修改的图标“ 自定义标题”。
从库中插入保存的推荐滑块模块
在标题布局编辑器中，单击以将紧凑的推荐滑块模块添加到您希望它出现的位置。
在模组中 “插入模块”，选择标签 “从图书馆添加”. 找到您之前在库中保存的紧凑推荐滑块并选择它。
加载后，保存更改。
最终结果
下面是添加到全局标题的推荐滑块。
在这里，我们有没有作者背景图像的推荐滑块。
这就是它在移动设备上的样子。
立即下载DIVI！！！
结论
紧凑的推荐滑块可以成为任何内容标题的新添加 网站Web 力求在其网站上最显眼的位置提高其服务的可信度。
您也可以使用它来重定向 游客 到推荐页面或销售页面以增加转化率。 我们希望这对您的下一个 Divi 项目有用。
如果您有任何疑虑或建议，请联系我们 评论部分 讨论一下。
您也可以咨询 我们的资源，如果您需要更多元素来执行创建Internet网站的项目。
不要犹豫，也请咨询我们的指南 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
