如何在 Divi 中为提示、信息、警告等创建样式内容框（免费下载）
已发表: 2021-06-20用于提示、警告和其他重要信息等内容的样式化内容框是任何网站或博客的便利资产。 它们是展示重要内容的有效且便捷的方式，用户会喜欢一致的设计。 例如，您可能需要一个内容框设计来突出教程中的关键提示或警告用户潜在问题。
在本教程中，我们将向您展示如何在 Divi 中构建 3 个内容框设计。 这些内容框设计可以轻松地使用新图标、配色方案和/或内容进行调整，以满足任何需要。 在向您展示如何设计这些框后，我们将向您展示如何使用 Divi 的全局预设，只需点击几下即可更轻松地部署新的预先设计的内容框。 不需要插件！
让我们开始吧！
抢先看
今天，我们将在 Divi 中构建这 3 个主要的内容框设计。
通过这 3 个主要的内容框设计，您将能够轻松进行自定义（如图标、颜色和文本），为任何场合制作无穷无尽的内容框设计。
以下是我们在下面的免费下载中包含的 36 个示例。
免费下载布局
要了解所有 36 个内容框设计，您首先需要使用下面的按钮下载布局。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
要将部分布局导入您的 Divi 库，请导航到 Divi 库。
单击导入按钮。
在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。
然后点击导入按钮。
完成后，分区布局将在 Divi Builder 中可用。
让我们进入教程，好吗？
你需要什么开始
首先，您需要执行以下操作：
- 如果您还没有安装并激活 Divi 主题。
- 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
- 选择“从头开始构建”选项。
之后，您将有一个空白画布开始在 Divi 中进行设计。
在 Divi 中创建内容框设计
在开始设计内容框之前，让我们在 Divi Builder 的默认部分添加一个新的单列行。
内容框设计#1
要创建第一个内容框，请向该列添加一个模糊模块。
在内容选项卡下，更新以下内容：
- 使用图标：是
- 图标：见截图
- 背景颜色：#ffffff
- 背景渐变左颜色：#00529b
- 背景渐变右颜色：#bde5f8
- 梯度方向：90度
- 起始位置：3em
- 结束位置：0%
在设计选项卡下，更新图标样式如下：
- 图标颜色：#ffffff
- 图像/图标对齐方式：左
- 使用图标字体大小：是
- 图标字体大小：2em
接下来，按如下方式更新文本样式：
- 标题文字颜色：#00529b
- 标题文字大小：1.5em
- 标题行高度：2em
- 正文颜色：#bde5f8
- 正文大小：1em
- 车身线高：2em
一旦文本样式就位，更新大小和填充如下：
- 内容宽度：100%
- 最大宽度：700px
- 模块对齐：居中
- 填充：顶部 2em，底部 2em，左侧 5em，右侧 2em
然后为模糊添加一个微妙的框阴影，如下所示：
- 盒子阴影：见截图
- 框阴影垂直位置：0px
- 框阴影模糊强度：88px
- 框阴影传播强度：-10px
- 阴影颜色：rgba(0,0,0,0.17)
在高级选项卡下，我们将为模糊图标提供自定义样式，使其具有圆形形状，背景和边框颜色与之前使用的左侧背景渐变颜色相匹配。 我们还将使用绝对位置定位图标，以便我们可以将其准确放置在我们想要的位置，而不会占用文档中的任何实际空间。
要添加自定义样式，请将以下 CSS 代码粘贴到 Blurb Image CSS 框中：
position:absolute; margin-bottom: 0px; border: 0.5em solid #00529b !important; border-radius:50%; background: #00529b; transform: translateX(-3.75em);
注意：当更改内容框（或模糊模块）的配色方案时，我们还需要更新在模糊图像 CSS 中用于图标边框和背景的颜色。
让我们看看最终的结果。
内容框设计#2
要创建我们的第二个内容框设计，请复制之前的模糊模块以快速启动设计，以便我们可以进行一些修改。
对于此设计，我们将使用 CSS 网格属性将图标左侧的图标垂直居中。
在设计选项卡下，将 Blurb Image CSS 替换为以下内容：
margin-bottom: 0px;
然后将以下 CSS 添加到 Blurb Content CSS 框中：
display: grid; align-items: center; justify-content: center; grid-template-columns: 5em auto; grid-gap: 2em;
网格中左列（持有图标的列）的宽度设置为5em ，包含标题和正文文本的右列设置为auto 。 我们需要将左侧渐变颜色的宽度与持有图标的5em宽度网格列相匹配。 为此，请更新以下内容：
- 起始位置：5em
在设计选项卡下，更新图标对齐方式和大小：
- 图像/图标对齐方式：居中
- 图标字体大小：3em
现在我们不需要左边的填充，所以把它去掉。
现在一切都应该排列整齐。 查看最终结果。
内容框设计#3
要创建第三个内容框设计，请复制我们刚刚完成的第二个简介模块（内容框）。
复制第二个简介后，打开重复的简介设置。
在设计选项卡下，更改图标颜色：
- 图标颜色：rgba(255,255,255,0.3)
接下来，我们将通过将自定义 CSS 添加到 before 伪元素（这基本上允许您在 blurb 模块元素之前附加额外的设计和/或内容）来在图标上添加垂直标签文本。
要添加标签，请将以下 CSS 粘贴到 Before CSS 框：
content: 'key tip'; bottom:50%; font-size: 1em; line-height: 1em; letter-spacing: 0.4em; position:absolute; transform: rotatez(-90deg) translateX(-50%) translateY(3em) !important; transform-origin: bottom left; color: #fff; font-family: inherit; font-weight: bold; text-transform: uppercase; z-index:1;
我们还将旋转图标以匹配旋转的垂直文本。 为此，请将以下 CSS 添加到 Blurb Image CSS 框中：
margin-bottom: 0px; transform: rotateZ(-90deg);
这是最终结果。
更新设计
通过更改正文大小来更新内容框元素的大小
每个内容框都是使用em长度单位构建的（ em相对于元素的根正文字体大小）。 因此，在 Divi 的内置设计设置中调整正文大小时，内容框的大小将无缝缩放。
更新自定义 CSS 颜色
对于内容框设计 #1，我们使用自定义 CSS 为图标添加了自定义背景和边框颜色。 确保更新用于边框和背景属性的颜色以匹配您自己设计的配色方案。
更新标签文本
对于内容框设计 #3，我们在before伪元素上添加了一个带有自定义 CSS 的标签。 要更新文本，只需更改 Before CSS 框中的 content 属性值。
使内容框在 Divi 中可重用
将模块保存到 Divi 库
使模块在 Divi 中可重用的主要方法有两种。 第一种方法是将模块（或任何元素）保存到 Divi 库。
将元素保存到库中后，您可以在向页面添加新元素时在 Divi 库中找到它。
使用全局预设
使模块在 Divi 中可重用的第二种主要方法是为该模块创建全局预设。 将模块的设计保存为全局预设后，您可以轻松地将该全局预设添加到同一模块的任何其他实例中。
在这种情况下，我们可以打开每个内容框（或模糊模块）的设置，并为每个内容框创建一个新的全局预设。 为此，请打开 Blurb 模块设置并单击顶部的预设选项。 然后将模块设置从自定义样式转换为新的预设。
随意命名新预设并保存。
对要创建的每个模糊模块预设重复这些步骤。
要在未来创建更多内容框，只需添加一个新的模糊模块并选择您要使用的图标即可。 然后通过单击顶部的预设下拉菜单并选择您选择的预设来激活任何上传的预设。
最终结果
这是我们构建的 3 个主要内容框设计的最终视图。
这里有 36 种设计，您可以通过我们在上面的免费下载中包含的一些简单的自定义来制作。
最后的想法
我们创建的样式内容框可以成为任何网站或博客的有用设计资产。 您可以利用 Divi 中强大的设计选项来调整内容框以适应任何设计。 此外，通过将它们保存并上传到 Divi 库和/或创建全局预设的能力，您只需点击几下即可随时部署这些内容框。 希望这些会派上用场。
我期待在评论中收到您的来信。
干杯!