河东建站：如何在Divi抽象空间中塑造和定位图像

图像是网页设计的一个关键方面。现代的网页设计似乎需要新的和抽象的方式来在你的网站上显示图像。divi的转换选项使您可以轻松地在页面上设置样式和位置。这为创建独特的布局打开了大门，这将把您的网站带到下一个层次。

在本教程中，我将向您展示几种方法，您可以在您的网站上的抽象位置样式和位置图像。这将允许您创建无数的图像设计变化，您可能认为，只有在照片编辑器，如Photoshop或Sketch可能。

我们开始吧!

偷窥

这里是我们将在本教程中构建的设计的一个偷窥。

开始

要开始，请确保已经安装了Divi主题并处于活动状态。然后创建一个新页面并在前端部署DiviBuilder。选择“从头开始构建”选项。

现在你准备好设计了！

将图片部分定位在视图端口之外(向右或向左)

在第一个例子中，我将向您展示如何将图像部分定位在视口之外。这是为您的图像添加更多抽象显示的好方法，它将非常类似于您的内容的自定义背景图像。然后，你可以为更独特的设计风格的形象。

这是怎么做的。

创建文本模块并将其样式化

首先，我们将创建一个文本模块，它将作为本节的主要内容。

如果您还没有这样做，请创建一个具有一列行的常规节。然后将文本模块添加到行中。

更新内容，包括以下内容：

然后按以下方式更新设计设置：

文本字体：罗利威
标题2字体：拉利威
标题2字体重量：粗体
标题2文本大小：44 px(桌面)，24 px(电话)
宽度：680 px(桌面)，60%(平板电脑)，80%(电话)
定制填充物：顶部10%，底部10%，左10%，右5%。

添加图像#1

现在我们准备添加第一个图像。继续添加一个图像模块，直接在文本模块之上。

然后将图像上传到图像模块。确保图像足够大，使其在使用变换属性放大图像时不会丢失质量。我使用的图像是400乘580像素。

接下来，将图像模块的宽度向下，并将其与左侧对齐，如下所示：

宽度：5%
模块对齐：左

缩小图像模块，像这样，最初允许我们减少负空间的布局。这样，我们就不用负边距来调整间距了。

现在，我们可以使用转换选项放大图像如下：

变换标度X轴：416%
变换标度Y轴：416%

然后，我们可以使用转换来定位图像，如下所示：

变换转换X轴：-36%
变换平移Y轴：41%

最后，您可以使用转换旋转来旋转图像：

变换转Z-轴：11度

现在我们准备添加第二个图像。继续，直接在文本模块下添加一个图像模块。

然后将新图像上传到图像模块。

接下来，将图像模块的宽度向下，并将其与左侧对齐，如下所示：

宽度：10%
模块对齐：左

宽度不一定是10%。您所要做的就是对模块进行足够的收缩，这样它就不会在布局上占用太多的垂直空间。

然后按以下方式更新转换选项：

变换标度X轴：464%
变换标度Y轴：464%

变换转换X轴：7%河东建站
变换平移Y轴：-80%

变换旋转Z轴：-10度

然后为一个额外的设计元素添加一个框阴影。

框影：见截图
框影水平位置：-20 px
框影垂直位置：-7 px

确保文本模块保持在顶部

我们希望确保当图像在移动上开始重叠时，文本模块保持在图像的顶部。这将确保图像在设计中继续充当背景图像。

为此，打开文本模块并将以下自定义CSS添加到主元素：

主要内容CSS：河东建站

然后将Z-索引设置为1。