如何将 Divi 布局变成可重用的线框

每周，我们都会为您提供新的免费 Divi 布局包，您可以将其用于下一个项目。 对于其中一个布局包，我们还分享了一个用例，可帮助您将网站提升到一个新的水平。

本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何使用 Divi 的食品餐饮布局包将布局转换为可重复使用的线框。 线框非常适合构建网站的开始过程。 它们帮助您决定网站的整体结构和设计风格。 他们还可以帮助获得客户对设计风格的意见，而无需提前定制所有内容。

让我们开始吧！

预览

在我们深入研究之前，让我们先看看我们将创建的最终结果。

将布局变成线框

使用 Visual Builder 打开餐饮登陆页面

继续并打开您使用 Divi 的 Food Catering Layout Pack 创建的登录页面。

删除部分和全角标题背景图像、背景颜色和渐变背景

创建线框的第一步是删除页面上各个部分的所有背景图像、渐变背景和背景颜色以及英雄部分中的全角标题模块。

给交替部分改为灰色背景色

为了帮助确定页面设计中的不同部分，请继续为每个交替部分指定一个“#f9f9fb”背景色。 稍后，当您使用线框创建页面时，您将能够使用“查找和替换”功能将调色板无缝添加到您的页面。

使用修改后的样式过滤器删除设计元素中的所有颜色

在按钮模块上启用修改的样式过滤器

我们也将摆脱正在使用的调色板。 这样，我们在构建页面时就不会受到它的影响。 打开页面上的按钮模块之一并启用修改样式过滤器以查看所有当前设置。

给按钮模块深色背景和边框颜色

将按钮背景颜色和按钮边框颜色更改为“#2b2b2b”。

复制按钮样式并应用于其他按钮

继续通过右键单击按钮设置并单击“复制按钮样式”来复制按钮样式。 然后，将按钮样式添加到页面上剩余的每个按钮模块中。

删除额外的设计设置（例如框阴影）

移除按钮框阴影

我们还将删除其他元素，例如 Box Shadow。 打开您正在处理的相同按钮模块并完全删除框阴影。

复制按钮模块框阴影设置

复制此按钮模块的框阴影样式并将其添加到其余按钮模块中。

在英雄和联系部分手动删除框阴影

仅有的两个按钮需要手动移除 Box Shadow 是包含在 Fullwidth Header Module 和 Contact Module 中的一个。 这些按钮是具有多个设计元素的模块的一部分，这就是我们需要手动删除它们的原因。

为突出显示的部分提供与 CTA 相同的背景颜色

然后，向下滚动，直到遇到“突出显示”部分。 在这里，使用“#2b2b2b”部分的背景颜色。 CTA 使用了相同的颜色。

确定图像尺寸

前往媒体库

为了完全删除我们布局的布局主题，我们将用包含所需图像尺寸的占位符替换所有图像模块。 要查找这些尺寸，请转到您的媒体库。

单独打开使用过的图像

分别打开页面中包含的每张图像。

在页面上记下图像的不同尺寸

完成后，您将能够特别看到该图像的尺寸。 在进入下一步之前，通过将它们写在某处来跟踪页面上所需的所有尺寸。

创建具有维度的占位符

打开 Photoshop

是时候创建占位符了！ 打开 Photoshop 或任何其他图像编辑软件。

为维度创建新项目

为页面上的每组维度创建一个新项目。 在我们的例子中，我们需要为以下每个维度创建单独的项目：

• 800 x 1029
• 400 × 400
• 48 × 48

选择灰色

选择“#e7e8ed”作为您的颜色。

解锁背景层

也解锁您的背景图层。

选择油漆桶工具并为图层添加颜色

然后，使用油漆桶工具将画布涂成灰色。

添加带有尺寸的文本

为了帮助您跟踪图像尺寸，您还可以在占位符的中间添加尺寸。 这样，一旦您编辑将替换它们的图像，您就会知道页面需要哪些图像尺寸。

保存为 Web

完成后，保存您的网络图像占位符。

对页面上的每个图像尺寸重复

对页面上的每个维度集重复这些步骤。 对于此页面，您总共需要三个不同的集合：

• 800 x 1029（关于我们部分
• 400 x 400（画廊部分）
• 48 x 48（图标）

用占位符替换图像

导出所有图像占位符后，请继续替换图像。

使线框易于重用

在计算机上创建线框图

完成创建线框后，建议您将其外观保存在某处。 在您的计算机上的某处创建一个新文件夹。

屏幕截图布局和本地保存

然后，使用您选择的屏幕截图插件/扩展程序来捕获您的页面​​。 在下图中，我们使用了 Mozilla Firefox 的 FireShot 插件。 确保在保存屏幕截图时为其指定一个正确的名称。

将布局保存到具有相同名称的库

使用您用于屏幕截图的相同名称将线框布局保存到您的 Divi 库。 这允许您在将线框上传到您的页面之前先查看计算机上的线框。

更改个性化线框的设计设置

添加分区分隔线

您不仅限于每页创建一个线框。 您可以轻松调整设计设置以创建新的线框。 例如，您可以使用分区分隔符来创建独特的设计。

玩转排版

在标题字体上启用查找和替换

或者，您也可以使用排版。 在您的英雄部分打开全角标题模块，然后右键单击标题字体。 继续启用查找和替换功能。

更改字体

将页面上使用的字体更改为另一种字体，您将拥有一个全新的线框！

使用类别保存单独的设计元素

单击“添加到库”图标

您可以做的另一件事是在页面上单独保存特定的设计元素。 比如说，你想创建一个英雄部分的集合，你可以轻松地将你的英雄部分添加到你的 Divi 库中。

添加新类别并为设计元素命名

要使结构更有条理，请继续添加一个名为“英雄部分”的新类别部分，这样您就可以轻松找到您选择的英雄部分并探索商店中的所有设计。

预览

现在我们已经完成了所有步骤，让我们最后看看最终结果。

最后的想法

在此用例博客文章中，我们向您展示了如何将 Divi 布局转换为可重用的线框。 将布局转换为线框有助于您保持对网站结构外观的整体看法。 它们也非常适合在网站建设过程的第一阶段向客户介绍设计风格。 如果您有任何问题或建议，请务必在评论区留言！