蓟县建站：使用转换选项设计Divi中独特的分区背景

2019.07.02 蓟县网站建设

98

开始

要开始本教程，您需要的只是Divi主题和用于示例内容的图像。我们将从头开始建造这个设计。您所需要做的就是创建一个新页面并在前端部署Divi构建器。那你就可以走了。

用剖分器创建抽象形状背景

image.png

第一个例子是为您的内容创建一些抽象形状背景的非常酷的方法。基本蓟县建站上，这包括使用分隔符自定义一个空部分，并将该区段分隔器定位到页面上其他内容后面的任何位置。

这是怎么做的。

创建内容部分

在开始向页面添加节分隔符之前，让我们先添加一些示例内容。创建一个具有两列行的新规则节。

image.png

添加文本模块

然后将文本模块添加到第1列，并具有以下模拟内容：

01
02
<h2>About Divi Meetups</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings</p>

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

文本大小：16 px
文本线高度：1.9em
标题2字体：Roboto
标题2字体重量：轻型蓟县建站
标题2文本大小：50 px(桌面)、40 px(平板电脑)、32 px(电话)
标题2线高：1.4em

image.png

添加图像模块

接下来，将图像模块添加到第2列，并上载您想要显示的图像。在本例中，我使用的是我们的布局包中的一个图像，即800 px乘1156 px。

image.png

然后调整图像的宽度和对齐方式如下：

宽度：80%(桌面)，70%(平板电脑)蓟县建站
模块对齐：左

image.png

将填充添加到第1列

在我们的文本和图像就位后，我们需要在第1列中添加一些顶部填充，以降低文本模块。打开行设置并更新以下内容：

第1栏：自定义填充(桌面)：250 PX顶部蓟县建站
第1列自定义填充(平板)：50 px顶部

image.png

用剖分器增加顶部剖面

在这一点上，我们准备添加我们的第一部分分隔设计。为此，我们需要创建一个新的部分。因此，继续创建一个新的常规部分(不要向该部分添加列，因为我们不需要列)，并将其拖到包含文本和图像的部分之上。

image.png

然后，通过更新以下内容，给出部分和透明背景以及顶部分隔符：

背景颜色：RGBA(0，0，0，0)
顶级分区风格：见截图
分色：RGBA(120，168，193，0.45)
分隔高度：500 px(桌面)，400 px(平板电脑)，300 px(电话)

image.png

接下来，转到高级选项卡，将Z索引值设置为1，这样它将保持在它下方的部分之上。

image.png

然后按以下方式更新该节的大小和间距：

宽度：500 px(桌面)，400 px(平板电脑)，320 px(电话)
截面对齐：中心
自定义页边距：-100 px
自定义填充：100 px顶部，100 px底部

image.png

请注意，宽度等于我们前面添加的分隔符的高度(桌面500 px，平板400 px，电话320 px)。这将给我们一个完美的方形设计，我们的分割器。同样重要的是缩小宽度和分隔高度来调整平板电脑和手机的高度，因为如果你不这样做，这个部分就会倾斜和破坏设计，或者在浏览器视图上造成溢出。

自定义填充只是为了给该部分一定的高度，这样我们就不必在稍后调整转换值了。

现在，我们的节设计就位，我们可以使用转换选项，以定位和旋转的分区分配器，我们希望它在页面上。

更新如下：

转换X轴(桌面)：-100%
转换翻译Y轴(桌面)：200%

转换X轴(片剂)：-50%
转换翻译Y轴(桌面)：100%

image.png

变换旋转Z轴：-45度

image.png

复制和粘贴科

我们将在页面中再添加一个分段分隔器的设计。但是要想在设计上取得先机，可以部署线框视图模式，并复制顶部部分(使用区段分隔器样式)，并将其粘贴到包含文本和图像的部分下面。

image.png

更新节设置

然后按以下方式更新自定义边距：

自定义页边距：-100 px底部

image.png

接下来，我们可以使用TransformScale选项缩小节的大小，如下所示：

变换标度(X和Y轴)：50%

image.png

使用Transform，我们可以将该部分向上并向右移动，如下所示：

转换X轴(桌面)：-20%
转换翻译Y轴(桌面)：-100%

转换X轴(片剂)：80%

转换X轴(片剂)：30%

image.png

现在按以下方式旋转该部分：

变换旋转Z轴(桌面)：225 deg

Z轴变换旋转(片)：-225 deg

image.png

最终结果

让我们看看最后的结果。注意这些部分是如何重新定位在平板电脑和手机上，以获得一个美丽的设计。

image.png

image.png



相关推荐
分享： 1 2 3

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

热门分享

最新文章

随机推荐

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监
TOP