晋城网站的制作：如何用Divi创建不规则截面过渡

2019.05.25 晋城网站的制作

一个最好的方法，以提高您的网站的设计是通过使用不同的部分转换。在以前岗，我们已经向您展示了如何使用Divi内置选项来做到这一点。但是，如果您想要创建一些更高级或更个性化的内容，您也可以创建不规则形状的节转换。由于它们的复杂性，最好的方法是使用带有透明边框的图像。

在晋城网站的制作这篇文章中，我们将向你展示你如何做到这一点。我们不仅将向您展示在Divi Builder中应该做什么，而且还将向您展示如何使用Photoshop通过几个步骤在图像上创建这些透明的边框。

实例结果

让我们来看一个布局示例，它具有惊人的不规则形状的部分转换：

undefined

您可以注意到，您可以在整个站点和不同部分中使用这些透明边框。重要的是要记住，取决于您的透明边框有多大，您应该在各部分中有足够的位置来满足您想要共享的不同内容。它还将在各个部分之间创建一个很好的平衡。

如何用Divi创建不规则截面过渡

订阅我们的YOUTUBE频道

用Photoshop创建透明边界

你可以用Photoshop实现你想要的原始形状。你也可以选择一种叫做Gimpshop。在本教程中，我们将使用Photoshop。

开放Photoshop

从在您的计算机上打开Photoshop开始。

开放图像

一旦你这样做了，打开你想要处理的图像。

undefined

双击图像创建层

一旦你的图像上传到Photoshop中，双击图像层并为其创建一个新层(0层)。

undefined

添加另一层

要添加透明边框，您还需要另一层，所以继续单击我们在下面的打印屏幕中标记的图标来添加它。一旦创建了该层(第1层)，确保它位于包含图像的层之上。

undefined

选择刷子和大小

在激活第一层时，继续单击画笔图标。

undefined

一旦你这样做了，你可以调整大小和模式，正在使用的刷子，以您自己的喜好。互联网上有很多免费的Photoshop刷子，所以根据你创建的网站类型，选择一个合适的。另外，确保透明度设置为100%。

undefined

开始在边界上使用刷子

一旦你把你的刷子就位，就开始在你想要透明的一侧使用它。确保你用你的刷子覆盖整个边界，这样它就会变得透明。

undefined

Ctrl(Windows)或Command(Mac)+选择新层

晋城网站的制作完成后，您可以在键盘上按CTRL(用于Windows)或命令(用于Mac)，同时单击第一层。您将看到Photoshop将选择添加到该层的所有内容，在这种情况下，就是形状的边框。

undefined

使新层不可见

接下来，通过移除眼睛使第一层不可见，如下面的打印屏幕中所标记的那样。

undefined

选择图像&删除新层

然后，单击包含图像的图层，然后按下键盘上的删除按钮。一旦你这样做，你会看到边界将变得透明。

undefined

选择矩形选择工具&点击图像

单击矩形框工具，然后在图像上随机按下某个位置。

undefined

将图像保存为PNG

最后，您需要将图像保存为PNG，以便在您的网站上使用它。

undefined

向Divi添加背景

一旦你创建了你想要在你的Divi网站中使用的不同的图像(通过使用上面的Photoshop技术)，其余的都是简单明了的。您创建的图像作为特定部分的背景。我们将只向您展示如何构建示例的英雄部分，因为同样的方法也适用于不同的部分。

增加新的标准部分

添加一个新页面，切换到VisualBuilder，并向该页面添加一个新的标准部分。

上传背景图像

一旦你把你想要出现在英雄部分的所有模块，你可以继续添加你已经创建的图像在这篇文章的前一部分。

undefined

添加背景色

一旦你这样做了，你可以决定什么颜色会出现在你的图像的透明部分。在本例中，我们使用了‘#DDDDDD’作为背景色。您可以立即看到，颜色将出现在图像的透明部分。

undefined

确保有足够的填充物

根据模块的数量和在英雄部分中使用的透明边框的大小，您可能需要添加一些自定义填充。玩不同的部分填充值，看看哪个给你最好的结果。

undefined

向下一节添加相同的背景色

为了确保不同的部分很好地融合在一起，使用相同的背景颜色，您已经在您的英雄部分在您的下一节以及。这不一定意味着您必须使用一个颜色背景颜色为您的下一个部分，您可以使用梯度背景，以及只要两个部分的颜色混合美丽。

例

正如前面提到的，您可以创建任意多的图像边框，并在整个网站中以创造性的方式使用它们。为了让您体验一下，我们创建了以下示例预览：

undefined

最后思想

在晋城网站的制作这篇文章中，我们向您展示了如何轻松地利用不规则形状的节转换。通过使用这种方法，您基本上可以创建您想要的任何类型的节转换。除了向您展示如何在Photoshop中使用几个步骤创建这些不规则形状之外，我们还向您展示了如何在DiviBuilder中使其工作。如果您有任何问题或建议，请确保在下面的评论部分留下评论！