使用 Divi 为您的行构建独特的框架设计可能是创造性地展示您的页面内容的一种有用（且有趣）的方式。 通过将 Divi 的分区分隔器与紧凑的行结构相结合，您可以探索无数设计可能性来构建您的内容。 您可能已经在之前的教程或我们的一些预制布局中看到了这种技术。 但是，今天，我想我会向您展示一种简单的方法来自己探索这种设计技术。 在本教程中，我将向您展示如何快速构建可以保存到库中的可重用部分布局。 然后，您可以使用该布局来探索新的框架设计和配色方案。 布局通过使用独特的设计框定您的行，因此所有列结构和模块都可以在行内使用。
让我们开始吧。
创建可重复使用的框架设计布局
首先，让我们创建一个具有单列布局的新部分。 此时我们不需要添加任何模块。 相反，我们将首先设计行和部分，以便以后可以用我们想要的任何内容填充行。
设计行
更新行设置如下：
背景颜色：#333333
行对齐：居中
自定义宽度：775px
天沟宽度：2
自定义填充：顶部 130 像素，底部 130 像素，左侧 50 像素，右侧 50 像素
自定义边距：0px 顶部，0px 底部
设计截面
更新部分设置如下：
背景颜色：#ffffff
顶部分隔线样式：见截图
顶部分隔线颜色：#ffffff
底部分隔线样式：见截图
底部分隔线颜色：#ffffff
接下来，您要将顶部和底部填充设置为 0px，并使用边框创建一些顶部和底部空间，如下所示：
自定义填充：0px 顶部，0px 底部
顶部边框宽度：5vw
上边框颜色：#ffffff
底部边框宽度：5vw
底部边框颜色：#ffffff
使用顶部和底部边框为部分创建间距将使与行重叠的部分分隔符的可用空间最大化。 这样您就可以为您的设计选择任何分隔高度。
将布局保存到您的库
这就是框架行设计的基本布局结构。 此时，我们希望将此部分保存到 Divi 库中，以便在将来的设计中使用部分布局。
单击部分菜单中的保存到库图标。
然后输入布局的名称（类似于“行框架布局”）并单击“保存到库”按钮。
完成框架设计#1
现在我们已经为将来的工作保存了部分布局，让我们在行中添加一些内容以完成第一个设计示例。
更改列结构
对于这个设计，我认为添加一个六列图片库会很好。 小列结构将允许我们创建一个小的图像集群，这些图像在窄行内被很好地框起来。
为此，首先将行结构更改为六列布局。
将内容添加到行
然后将三个图像模块（带图像）添加到每一列。 我正在使用更多具有不同尺寸/尺寸的纵向（而不是横向）图像。
这是最终的设计。
奖金设计提示
在我们继续探索更多的框架设计可能性之前，我想指出一个将框架扩展到页面一侧的简单技巧。 为此，请转到部分设置并添加背景渐变，如下所示：
背景渐变左颜色：#333333
背景渐变右颜色：#ffffff
渐变方向：90度
起始位置：50%
结束位置：0%
看看这个设计。
为不同的框架设计和内容定制布局
这种简单布局的令人兴奋的可能性至少可以说是数不胜数。 通过自定义配色方案、分隔线样式、列布局和模块内容，您可以创建各种不同的布局设计。 此外，您可以使用 Divi 的“查找和替换”等酷炫功能，只需单击几下即可进行广泛的配色方案更改。
以下是更新布局的基本过程：
- 将保存的部分布局加载到页面
- 使用“查找和替换”更新该部分的配色方案。
- 更改分隔线样式
- 使用新的背景和列结构自定义行。
- 将模块添加到您的列
通过这个过程，探索新设计应该会很有趣！ 让我们继续。
框架设计#2
对于下一个设计，我们将使用我们之前创建的已保存部分布局。 为此，请单击以在可视化构建器中添加新部分。 然后选择 Add From Library 选项卡并从列表中单击部分布局。
现在我们准备好为新设计定制部分。
为了更改用于此布局的配色方案，我们可以通过使用查找和替换功能来召唤一些 Divi 设计能力。 转到复制部分的部分设置，然后右键单击背景颜色并选择“查找和替换”。
在查找和替换模式中，更新以下内容：
范围内：本节
替换为：#443850
选择全部替换
很多做跨境电商的朋友往往需要外国人的服务，比如录音、社媒代运营等等。我们整理出来很多低价且高质量的外国人服务商，分享给大家。
fiverr上15美元的海外社媒代运营服务
fiverr上25美元的Twitch设计服务
fiver上10美元的短视频广告投放服务
fiverr上15美元的视频编辑服务
fiverr上20美元的谷歌广告投放服务
fiverr上5美元的谷歌SEO服务
fiverr上10美元的英文文章撰写服务
fiverr上20美元的CMS网站建站服务
fiverr上40美元的手机APP开发服务
fiverr上30美元的linkedin代运营服务
fiverr上10美元的Guest Post做客博文服务
fiverr上15美元的红人营销服务
fiverr上20美元的discord运营服务
fiverr上15美元的社群维护服务
fiverr上10美元的shopify店铺优化服务
这将用新颜色替换用于部分背景、边框和分隔线的白色。
现在使用新的分隔线样式更新部分设置：
然后使用白色背景颜色和框阴影更新行设置以完成行的新框架设计。
对于内容，让我们尝试一个带有一些简介的五列布局。 继续并将您的行的列布局更新为五列布局。
然后在第一列添加一个简介。 取出默认的内容文本，只留下标题文本。 然后用星形图标替换简介图像。 更新设计设置如下：
图标颜色：#7d8491
图标字体大小：80px
文本方向：中心
复制 blurb 模块并更新设置，如下所示：
图标颜色：#8cd845
图标字体大小：50px
现在将这两个模块复制或复制并粘贴到整个五列中的模式中，每列中有三个模块。
这是最终的设计。
框架设计#3
对于第三个框架设计，我们首先需要加载我们保存的部分布局，就像我们之前为第二个设计所做的那样。
之后，我们可以在部分背景颜色上使用查找和替换（就像我们在之前的设计中所做的那样）将用于部分背景、分隔线和边框的白色替换为漂亮的蓝色。 为此，请转到部分设置，右键单击背景颜色，然后选择查找和替换。 然后更新以下内容：
范围内：本节
替换为：#1e3888
选择全部替换
然后使用新的顶部和底部分隔线样式（云）更新部分分隔线：
接下来，转到行设置。 给行一个渐变背景，如下所示：
背景渐变左颜色：默认（#2b87da）
背景渐变右颜色：#1E3888（与部分背景颜色相同）
渐变类型：径向（赋予行圆润的“云状”感觉）
结束位置：83%（稍微隐藏行边缘）
现在，我们需要做的就是在我们的框架行中添加一些内容。 让我们向该行添加一个号召性用语模块并更新设置，如下所示：
链接输入框加“#”显示按钮
使用背景颜色：否
标题文字颜色：#ffc338
按钮文本颜色：#ffc338
这是最终的设计。
手机呢？
万一你想知道。 这是设计在移动设备上的样子。
最后的想法
本教程中创建的框架设计旨在突出设计可能性，而不是展示完全抛光的设计作品。 出于这个原因，我专注于框架设计并使用了基本的内容示例。 希望它们至少会激发您通过使用不同的分区分隔线、配色方案和内容来探索新设计。
我期待在评论中收到您的来信。
干杯!
