石景山网络建设:如何利用Divi的新设计特性创建美观的截面过渡

2019.05.24 石景山网络建设

58

石景山网络建设在这个divi教程中,我们将向您展示如何使用内置的divi选项来创建漂亮的节转换。

章节是你在网站上分享的所有内容的基础。每一节都是一章,从一节到另一节是讲故事过程的一部分。使这一过渡尽可能顺利,将强调你想要表达的信息。为了帮助您,我们将向您展示如何为您的下一个网站项目创建漂亮的页面转换。

偷窥

在单独进入所有不同的部分转换之前,让我们先来看看您可以期待的是什么:


如何利用Divi的新设计特性创建美观的截面过渡

订阅我们的YOUTUBE频道

再造段

我们将从重新创建我们将在所有示例中使用的两个部分开始。在这两个部分中,我们使用了所需的填充来获得转换的最佳效果。但是,如果你使用的是不同高度的区域,那么你可能需要稍微调整渐变背景,这样才能完美地匹配这些区域。

创建第一节

首先创建第一个标准部分并选择一个全宽度行。

节设置

我们需要一个顶部和底部填充‘300 px’,您可以添加在间距子类别的设计选项卡。


第一文本模块

然后,我们将向我们的全宽度行添加一个文本模块。键入要显示的文本,然后转到“设计”选项卡。在“设计”选项卡中,对文本子类别使用以下设置:

文本字体:Comfortaa

文本字体大小:50

文本线高度:1.7em

文本定位:中心


第二文本模块

对第二个文本模块执行同样的操作,但是使用以下设置:

文本字体:Comfortaa

文本字体大小:16

文本线高度:1.7em

文本定位:中心


按钮模块

最后,石景山网络建设还将添加一个Button模块。从在“设计”选项卡中选择中心对齐开始。


然后,打开Button子类别,启用“使用自定义按钮样式”选项,并选择“20”作为按钮文本大小。


在Button子类别中,对按钮使用以下渐变背景:

第一颜色:#2b87da

第二颜色:#29c4a9

梯度型:线性

梯度方向:162度

起始位置:0%

结束位置:100%


创建第二部分

添加另一个标准部分,但选择三列行。

节设置

第二部分还将使用顶部和底部的“300 px”填充。


BLUURB模块

接下来,我们将向行的第一列添加一个Blurb模块。一旦您决定要显示的文本,向下滚动内容选项卡,启用‘使用图标’选项,并选择一个图标。


完成此操作后,转到“设计”选项卡,并为图标子类别使用以下设置:

图标颜色:#515151

图像/图标布局:顶部

使用图标字体大小:是

图标字体大小:55 px


然后,确保以下设置适用于标题文本子类别:

标题字体:Comfortaa

标题文本对齐:中心

页眉字体大小:18


最后,这些是正文文本子类别的设置:

身体字体:Comfortaa

正文对齐:中心

体型尺寸:14

身高:1.7em


克隆Blurb模块

一旦创建了BlurbModule,就克隆它两次,并将其放在行的其他两列中。

1。一路对角

现在我们已经创建了部分,现在是开始添加节转换的时候了。我们将向您展示如何创建由简单对角线组成的第一个示例。


第一剖面的梯度背景设置

打开第一部分的设置,添加以下渐变背景:

第一颜色:#DDDDDD

第二颜色:#f7f7f7

梯度型:线性

梯度方向:183度

起始位置:85%

末端位置:70.05%


第二剖面的梯度背景设置

第二部分将需要以下梯度背景设置:

第一颜色:#f7f7f7

第二颜色:#DDDDDD

梯度型:线性

梯度方向:183度

起始位置:85%

期末职位:69.05%


拆下第二段顶盖

在这个例子中,您需要做的最后一件事是移除第二部分的顶部填充。


2。中途来找我

石景山网络建设想要分享的下一个例子是一个非常优雅的例子,其中使用了两个相反的梯度背景。通过使用这一效果,各部分感觉就像相互跟进一样。


第一剖面的梯度背景设置

对于第一部分,我们需要以下梯度背景设置:

第一颜色:RGBA(255,255,255,0)

第二颜色:RGBA(224,43,32,0.07)

梯度类型:径向

径向:左上角

起始位置:60%

期末职位:50%


第二剖面的梯度背景设置

第二部分将介绍以下渐变背景:

第一颜色:RGBA(255,255,255,0)

第二颜色:RGBA(224,43,32,0.33)

梯度类型:径向

径向:右下角

起始位置:58%

期末职位:50%


3。融合

下一个示例与其他示例略有不同。它将需要在两个部分之间增加一个部分,以实现您可以在下面的图像中注意到的结果。


第一剖面的梯度背景设置

对于第一部分,您将需要以下渐变背景:

第一颜色:RGBA(12,113,195,0.19)

第二颜色:RGBA(255,255,255,0.39)

梯度类型:径向

径向:左下角

起始位置:50%

期末职位:50%


第二剖面的梯度背景设置

对于第二节,我们将使用以下梯度背景设置:

第一颜色:RGBA(224,43,32,0.17)

第二颜色:RGBA(255,255,255,0.39)

梯度类型:径向

径向:右上角

起始位置:50%

期末职位:50%


在中间添加新的标准部分

一旦将梯度背景添加到两个部分,就应该在它们之间添加一个部分了。


向新区段添加渐变背景色

该新部分还需要使用以下设置的渐变背景:

第一颜色:RGBA(12,113,195,0.19)

第二颜色:RGBA(224,43,32,0.17)

梯度型:线性

梯度方向:92度

起始位置:43%

期末职位:62%


 

4。逆

然后,我们也有一个节转换,它不像其他部分那么引人注目,但是仍然能够为您的部分添加一个微妙的触摸。


第一剖面的梯度背景设置

第一节的梯度背景如下:

第一颜色:#f2f2f2

第二颜色:RGBA(104,153,193,0.58)

梯度类型:径向

径向:右下角

起始位置:7.9%

期末职位:7.9%


第二剖面的梯度背景设置

第二个梯度背景将需要以下梯度背景设置:

第一颜色:RGBA(104,153,193,0.58)

第二颜色:#f2f2f2

梯度类型:径向

径向:右上角

起始位置:8%

期末职位:8%


5。指针

第五个例子看上去比其他例子要简洁一些。通过查看指针或圆圈(或两者),您可以通过两种方式感知转换。


第一剖面的梯度背景设置

对第一部分使用以下梯度背景:

第一颜色:#f4f4f4

第二颜色:#ffffff

梯度类型:径向

径向:顶部

起始位置:88%

末端位置:88.05%


第二剖面的梯度背景设置

最后,将以下梯度背景设置应用于第二节:

第一颜色:RGBA(43,135,218,0)

第二颜色:RGBA(12,113,195,0.43)

梯度类型:径向

径向:底部

起始位置:87%

期末职位:87%

6。拼图

最后一个例子肯定让这些部分感觉它们是属于一起的。


第一剖面的梯度背景设置

打开第一部分的设置,使用以下渐变背景:

第一颜色:RGBA(160,181,193,0.46)

第二颜色:RGBA(255,255,255,0)

梯度类型:径向

径向:顶部

起始位置:56.3%

期末职位:43%


第二剖面的梯度背景设置

然后,为第二节使用以下梯度背景设置:

第一颜色:RGBA(242,242,242,0)

第二颜色:RGBA(160,181,193,0.46)

梯度类型:径向

径向:顶部

起始位置:56%

最后职位:40%


第一节换垫

为了使这两个部分更适合,我们将把第一部分的顶部和底部填充改为‘150 px’。


拆下第二段顶盖

最后,我们将移除第二部分的顶部填充。


最后思想

节转换有助于连接不同的节及其用途。在这篇文章中,我们分享了6个例子,您可以通过使用Divi内置选项来重新创建这些示例。如果您有任何问题或建议,请在石景山网络建设的评论部分留下评论!


热门分享

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP