如何使用 Divi 创建不规则形状的截面过渡
已发表: 2017-10-26提升网站设计的最佳方法之一是使用不同的部分过渡。 在上一篇文章中，我们向您展示了如何仅使用 Divi 内置选项来做到这一点。 但是，如果您希望创建更高级或更个性化的内容，您也可以创建不规则形状的部分过渡。 由于它们的复杂性，解决此问题的最佳方法是使用具有透明边框的图像。
在这篇文章中，我们将向您展示如何做到这一点。 我们不仅将向您展示在 Divi Builder 中的操作，而且还将向您展示如何使用 Photoshop 通过几个步骤在图像上创建这些透明边框。
示例结果
让我们来看看具有令人惊叹的不规则形状截面过渡的布局示例：
您可以注意到，您可以在整个站点和不同部分中使用这些透明边框。 重要的是要记住，根据透明边框的大小，您应该在各部分中留出足够的空间以适应您尝试共享的不同内容。 它还将在各个部分之间创造一个很好的平衡。
如何使用 Divi 创建不规则形状的截面过渡
订阅我们的 YouTube 频道
使用 Photoshop 创建透明边框
您可以使用 Photoshop 随心所欲地获得原始形状。 您还可以选择名为 GimpShop 的免费替代品。 在本教程中，我们将使用 Photoshop。
打开 Photoshop
首先在您的计算机上打开 Photoshop。
打开图片
完成后，打开您要处理的图像。
双击图像并创建图层
在 Photoshop 中上传图像后，双击图像层并为其创建一个新层（层 0）。
添加另一层
要添加透明边框，您还需要另一个图层，因此请继续单击我们在下面的打印屏幕中标记的图标来添加它。 创建图层（图层 1）后，请确保将其放置在包含图像的图层上方。
选择画笔和大小
在激活第 1 层时，继续并单击画笔图标。
完成后，您可以根据自己的喜好调整用于画笔的大小和图案。 互联网上有大量免费的 Photoshop 画笔，因此根据您创建的网站类型，选择合适的画笔。 此外，请确保不透明度设置为 100%。
开始在边框上使用画笔
一旦你的刷子就位，开始在你想要透明的一侧使用它。 确保用刷子覆盖整个边框，以便之后全部变得透明。
CTRL (Windows) 或 Command (Mac) + 选择新图层
完成后，您可以按键盘上的 CTRL（适用于 Windows）或 Command（适用于 Mac）并同时单击第 1 层。 您将看到 Photoshop 将选择您添加到该图层的所有内容，在本例中，即形状边框。
使新图层不可见
接下来，通过移除下面打印屏幕中标记的眼睛，使第 1 层不可见。
选择图像并删除新图层
然后，单击包含图像的图层并按键盘上的删除按钮。 一旦你这样做了，你会看到边框将变得透明。
选择矩形选框工具并单击图像
单击矩形选框工具并随机按图像上的某处。
将图像另存为 PNG
最后，您需要将图像另存为 PNG，以便您可以在您的网站上使用它。
为 Divi 添加背景
一旦你创建了你想要在你的 Divi 网站中使用的不同图像（通过使用上面的 Photoshop 技术），剩下的就很简单了。 您创建的图像用作特定部分的背景。 我们只会向您展示如何构建我们示例的英雄部分，因为相同的方法也适用于不同的部分。
添加新标准截面
添加一个新页面，切换到 Visual Builder 并向该页面添加一个新的标准部分。
上传背景图片
将要显示的所有模块放置在英雄部分后，您可以继续添加您在本文前一部分中创建的图像。
添加背景颜色
完成此操作后，您可以决定在图像的透明部分显示什么颜色。 在本例中，我们使用“#dddddd”作为背景色。 您可以立即看到颜色将出现在图像的透明部分。
确保有足够的填充
根据您在英雄部分使用的模块数量和透明边框的大小，您可能需要添加一些自定义填充。 使用不同的部分填充值，看看哪一个能给你最好的结果。
为下一节添加相同的背景颜色
为了确保不同的部分彼此很好地融合，请在下一部分中使用您在英雄部分使用的相同背景颜色。 这并不一定意味着您必须为下一部分使用一种颜色的背景颜色，您可以使用渐变背景，只要两个部分的颜色融合得很好。
例子
如前所述，您可以根据需要创建任意数量的图像边框，并在整个网站中以创造性的方式使用它们。 为了让您体验一下，我们创建了以下示例预览：
最后的想法
在这篇文章中，我们向您展示了如何轻松使用不规则形状的截面过渡。 通过使用这种方法，您基本上可以创建您想要的任何类型的部分过渡。 除了向您展示如何在 Photoshop 中通过几个步骤创建这些不规则形状外，我们还向您展示了如何在 Divi Builder 中使用它。 如果您有任何问题或建议； 确保您在下面的评论部分发表评论！
请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！