每周，我们都会为您提供新的免费 Divi 布局包，您可以将其用于您的下一个项目。 对于其中一个布局包，我们还分享了一个用例，可帮助您将您的网站提升到一个新的水平。
本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何使用 Divi 的 Food Catering Layout Pack 将布局转变为可重复使用的线框。 线框非常适合构建网站的开始过程。 它们帮助您决定网站的整体结构和设计风格。 他们还可以帮助获得客户对设计风格的意见，而无需提前定制所有内容。
让我们开始吧！
预览
在我们深入研究它之前，让我们看一下我们将创建的最终结果。
将布局变成线框
使用 Visual Builder 打开餐饮登录页面
继续并打开您使用 Divi 的 Food Catering Layout Pack 创建的登录页面。
删除部分和全宽标题背景图像、背景颜色和渐变背景
创建线框的第一步是删除页面上部分的所有背景图像、渐变背景和背景颜色以及英雄部分中的全角标题模块。
为交替部分提供灰色背景颜色
为了帮助确定页面设计中的不同部分，请继续为每个交替部分提供“#f9f9fb”背景颜色。 稍后，当您使用线框创建页面时，您将能够使用“查找和替换”功能将调色板无缝地添加到您的页面中。
使用修改的样式过滤器删除设计元素中的所有颜色
在按钮模块上启用修改样式过滤器
我们将摆脱正在使用的调色板。 这样，我们在构建页面时就不会受到它的影响。 打开页面上的一个按钮模块并启用修改样式过滤器以查看所有当前设置。
为按钮模块提供深色背景和边框颜色
将按钮背景颜色和按钮边框颜色都更改为“#2b2b2b”。
复制按钮样式并应用于其他按钮
通过右键单击按钮设置并单击“复制按钮样式”来继续复制按钮样式。 然后，将按钮样式添加到页面上剩余的每个按钮模块。
移除额外的设计设置（如盒子阴影）
删除按钮框阴影
我们还将删除其他元素，例如 Box Shadow。 打开您正在处理的同一个按钮模块并完全删除框阴影。
复制按钮模块框阴影设置
复制此 Button Module 的 Box Shadow Styles 并将其添加到剩余的 Button Modules 中。
在英雄和联系人部分手动移除盒子阴影
唯一需要手动移除 Box Shadow 的两个按钮是 Fullwidth Header Module 和 Contact Module 中包含的一个。 这些按钮是具有多个设计元素的模块的一部分，这就是我们需要手动删除它们的原因。
为突出显示的部分提供与 CTA 相同的背景颜色
然后，向下滚动，直到遇到“突出显示”部分。 在这里，使用“#2b2b2b”部分的背景颜色。 CTA 使用相同的颜色。
确定图像尺寸
前往媒体库
要完全删除布局的布局主题，我们将用包含所需图像尺寸的占位符替换所有图像模块。 要查找这些尺寸，请转到您的媒体库。
单独打开使用的图像
分别打开页面中包含的每张图片。
在页面上写下图像的不同尺寸
完成后，您将能够特别看到该图像的尺寸。 在进行下一步之前，通过在某处写下它们来跟踪页面上需要的所有尺寸。
创建带尺寸的占位符
打开 Photoshop
是时候创建占位符了！ 打开 Photoshop 或任何其他图像编辑软件。
为维度创建新项目
为页面上的每组维度创建一个新项目。 在我们的例子中，我们需要为以下每个维度单独的项目：
- 800 x 1029
- 400×400
- 48×48
选择灰色
选择“#e7e8ed”作为您的颜色。
解锁背景层
解锁背景图层。
选择油漆桶工具并为图层添加颜色
然后，使用油漆桶工具将画布涂成灰色。
添加带尺寸的文本
为了帮助您跟踪图像尺寸，您还可以在占位符的中间添加尺寸。 这样，一旦您编辑了将要替换它们的图像，您就会知道您的页面需要哪些图像尺寸。
保存为网络
完成后，将图像占位符保存为网络。
对页面上的每个图像尺寸重复
对页面上的每组维度重复这些步骤。 对于此页面，您总共需要三个不同的集合：
- 800 x 1029（关于我们部分
- 400 x 400（画廊部分）
- 48 x 48（图标）
用占位符替换图像
导出所有图像占位符后，继续替换图像。
使线框易于重复使用
在计算机上创建线框图
完成创建线框后，建议您将其外观保存在某处。 在计算机的某个位置创建一个新文件夹。
屏幕截图布局和本地保存
然后，使用您选择的屏幕捕获插件/扩展来捕获您的页面。 在下图中，我们使用了 Mozilla Firefox 的 FireShot 插件。 确保在保存屏幕截图时，给它一个正确的名称。
将布局保存到同名库
使用您用于屏幕截图的相同名称将线框布局保存到您的 Divi 库。 这使您可以先查看计算机上的线框，然后再将其上传到您的一个页面。
更改个性化线框的设计设置
添加部分分隔线
您不仅限于每页创建一个线框。 您可以轻松调整设计设置以创建新的线框。 例如，您可以使用部分分隔线来创建独特的设计。
玩转排版
在标题字体上启用查找和替换
或者，您也可以使用排版。 在你的英雄部分打开全角标题模块，然后右键单击标题字体。 通过启用查找和替换功能继续。
更改字体
将页面上使用的字体更改为另一种字体，您就有了一个全新的线框！
使用类别保存单独的设计元素
单击“添加到库”图标
您可以做的另一件事是将特定的设计元素单独保存在您的页面上。 比如说，你想创建一个英雄部分的集合，你可以轻松地将你的英雄部分添加到你的 Divi 库中。
添加新类别并为设计元素命名
要拥有更有条理的结构，请继续添加一个名为“英雄部分”的新类别，以便您可以轻松找到您选择的英雄部分并探索您商店中的所有设计。
预览
现在我们已经完成了所有步骤，让我们来看看最终结果。
最后的想法
在这篇用例博客文章中，我们向您展示了如何将 Divi 布局转换为可重复使用的线框。 将布局转换为线框有助于您保持对网站结构外观的整体看法。 他们还非常适合在网站构建过程的第一阶段向客户介绍设计风格。 如果您有任何问题或建议，请务必在评论部分发表评论！
