100
在房山站点建设的Divi教程中,我们将与您分享一下以前更新中添加到Divi中的新选项可以做些什么。更准确地说,我们将分享10种有趣的方法,您可以通过这些新的更改来为DividerModule设计样式。这些可能性确实是无穷无尽的,但这篇文章可能会帮助你找到你下一个项目所需要的灵感。
本教程的优点之一是我们不会使用任何额外的CSS(或任何类型的代码)。我们将要创建的所有示例都将只使用分区模块中包含的选项。在我向您展示如何一步地创建每个分隔符之前,让我们先看一下我们将要构建的分隔符:
您需要做的第一件事是创建我们将在所有10个示例中使用的部分。当然,您也可以在其他上下文中使用分隔符,但是通过首先使用本节,您将有机会使用您自己的Divi Builder,并查看您喜欢哪个。
首先,在WordPress仪表板中创建一个新页面,启用DiviBuilder并打开VisualBuilder。
在新页面上之后,创建一个标准部分,并在该标准部分中使用三列行。我们使用‘#f4f4f4’作为部分背景色。
然后,将第一个文本模块添加到行的第一列中。打开设置,键入要显示的文本,然后转到“设计”选项卡。在“设计”选项卡中,对文本子类别进行以下更改:
· 文本字体:龙虾
· 文本字体大小:35
· 文本颜色:#000000
· 文本线高度:1.7em
· 文本定位:中心
一旦添加了第一个文本模块,就可以在它下面添加另一个文本模块。添加要显示的文本并转到“设计”选项卡。在“设计”选项卡中,确保适用以下修改:
· 文本字体:Roboto
· 文本字体大小:14
· 文本线高度:1.7em
· 文本定位:中心
一旦创建了这两个文本模块,您也可以将它们放在行的其他两列中。
我们将分享10种有趣的方式,你可以风格Divi的分隔模块。每一个例子都有三个互相协调的分隔器。对于所有三个模块,大多数设置都是相同的。我们将首先向您展示对其中每一个都有意义的设置,并继续显示您需要对其他两个分隔器所做的更改。所以,每次你完成第一个除法器,克隆它,并把它放在另外两列。一旦你这样做了,你可以对其他两个除法器进行修改。
注:对于每个分隔符,您需要在Content选项卡中启用“ShowDivider”选项。
在Content选项卡中,我们将使用以下背景设置:
· 第一颜色:#e 09900
· 第二颜色:RGBA(255,255,255,0)
· 梯度型:线性
· 梯度方向:176德克
· 起始位置:13%
· 期末职位:31%
继续到“设计”选项卡,确保以下设置适用于“尺寸”子类别:
· 分压器重量:0
· 身高:25 px
· 宽度:35%
· 模块对齐:中心
向下滚动同一选项卡,并在动画子类别中使用以下动画设置:
· 动画风格:幻灯片
· 动画重复:一次
· 动画方向:中心
· 动画持续时间:1200 ms
· 动画强度:80%
在Content选项卡中,您只需要将第一个渐变颜色更改为‘#0c71c3’。
接下来,您需要在动画子类别中添加一些“250 ms”的动画延迟。
将最后一个分配器的第一个渐变颜色改为#8300e9。
您需要添加到最后一个分隔器的动画子类别的动画延迟是“500 ms”。
在“内容”选项卡中使用以下渐变背景设置:
· 第一颜色:#e 09900
· 第二颜色:RGBA(255,255,255,0)
· 梯度型:线性
· 梯度方向:180度
· 起始位置:0%
· 期末职位:72%
在“设计”选项卡中,您需要做的第一件事是将分隔符的颜色更改为“#000000”。
在同一选项卡的样式子类别中,使用“Solid”作为分隔样式,使用“top”作为分区位置。
继续向下滚动,并对SING子类别进行以下更改:
· 分压器重量:2
· 身高:20 px
· 宽度:70%
· 模块对齐:中心
最后,为动画子类别使用以下选项设置:
· 动画风格:弹跳
· 动画重复:一次
· 动画方向:中心
· 动画持续时间:2000 ms
将渐变背景的第一个渐变颜色更改为‘0c71c3’。
在动画子类别中,在动画延迟选项中添加‘350 ms’。
对第三个分隔符进行相同的更改,但使用‘#8300e9’颜色代替。
最后,添加一个动画延迟‘700毫秒’。
对于第一个分配器,使用以下渐变背景设置:
· 第一颜色:#0970a0
· 第二颜色:RGBA(255,255,255,0)
· 梯度型:线性
· 梯度方向:119 deg
· 起始位置:0%
· 期末职位:86%
在“设计”选项卡中,选择“#FFFFFF”作为分隔符的颜色。
接下来,对“样式”子类别进行以下更改:
· 分隔方式:实心
· 分隔位置:垂直中心
当仍然在同一选项卡中时,请确保以下设置适用于“大小”子类别:
· 分压器重量:3
· 身高:10 px
· 宽度:25%
· 模块对齐:左
在间隔子类别中的底部填充中添加“15 px”。
最后,对动画子类别使用以下设置:
· 动画风格:幻灯片
· 动画重复:一次
· 动画方向:左
· 动画持续时间:2000 ms
· 动画强度:100%
第二个分频器的梯度背景设置略有不同:
· 第一颜色:#0970a0
· 第二颜色:RGBA(255,255,255,0)
· 梯度类型:径向
· 径向:中心
· 起始位置:0%
· 结束位置:100%
在“大小”子类别中,将模块对齐更改为“中心”。
最后,集中动画方向。
第三个除法器还包含另一个梯度背景:
· 第一颜色:RGBA(255,255,255,0)
· 第二颜色:#0970a0
· 梯度型:线性
· 梯度方向:119 deg
· 起始位置:14%
· 结束位置:100%
我们将对第二个除法器进行同样的修改,但使用的是右,而不是中间。
首先,应用以下渐变背景设置:
· 第一颜色:#e 09900
· 第二颜色:RGBA(255,255,255,0)
· 梯度类型:径向
· 径向:中心
· 起始位置:20%
· 期末职位:21%
在“设计”选项卡中,您需要做的第一件事是为分隔符使用“#000000”颜色。
然后,选择“Solid”作为您的分区样式,选择“垂直居中”作为您的分区位置。
继续,对SING子类别进行以下更改:
· 分压器重量:2
· 高度:50 px
· 宽度:40%
· 模块对齐:中心
最后,动画子类别需要以下设置:
· 动画风格:滚动
· 动画重复:一次
· 动画方向:中心
· 动画持续时间:1500 ms
· 动画延迟:850 ms
· 动画强度:60%
将第一个渐变颜色改为‘0c71c3’。
并将动画延迟更改为“0MS”。
对于最后一个分隔符,您只需要将第一个渐变背景色更改为‘#8300e9’。
使用下列梯度背景设置:
· 第一颜色:#e0d1b1
· 第二颜色:#e 09900
· 梯度类型:径向
· 径向:中心
· 起始位置:36%
· 结束位置:100%
确保分隔符的颜色与区域背景色相同。在本例中,是‘#f4f4f4’。
向下滚动设计选项卡,并使用‘虚空’作为您的分区风格和‘顶部’作为您的分区位置。
使下列设置应用于“尺寸”子类别:
· 分压器重量:100
· 身高:18 px
· 宽度:60%
· 模块对齐:中心
您还需要添加‘15 px’到顶部,右和左填充。
最后,使用以下动画设置:
· 动画风格:缩放
· 动画重复:一次
· 动画方向:中心
· 动画持续时间:1000 ms
· 动画强度:80%
将渐变背景的颜色更改为“#87acc1”和“#0c71c3”。
接下来,房山站点建设将动画持续时间更改为“1300 ms”,将动画延迟更改为“250 ms”。
在第三个分频器中使用的渐变颜色是‘#c9a4e8’和‘#8300e9’。
将动画持续时间更改为“1300 ms”,将动画延迟更改为“500 ms”。
应用下列梯度背景设置:
· 第一颜色:#e 09900
· 第二颜色:RGBA(255,255,255,0)
· 梯度型:线性
· 梯度方向:179德克
· 起始位置:0%
· 期末职位:45%
选择“#000000”作为分隔颜色。
在“样式”子类别中,使用“双”作为分区样式,使用“垂直居中”作为分区位置。
继续,为“大小”子类别使用以下设置:
· 分压器重量:5
· 身高:25 px
· 宽度:35%
· 模块对齐:左
最后,使用以下动画设置:
· 动画风格:滚动
· 动画重复:一次
· 动画方向:左
· 动画持续时间:1000 ms
· 动画强度:50%
将第一个渐变颜色改为‘0c71c3’。
接下来,对第二个分隔器使用不同的动画:
· 动画风格:淡出
· 动画重复:一次
· 动画持续时间:1400 ms
对于第三个分光镜,使用‘#8300e9’作为第一个渐变背景色。
在“设计”选项卡中,唯一需要更改的是“动画方向”,在本例中是“右”。
首先,将‘#8300e9’分配给背景。
继续使用部分背景色作为分隔颜色,在本例中为“#f4f4f4”。
接下来,使用“虚线”作为您的分区样式和“顶部”作为您的分区位置。
在“大小”子类别中,使用以下设置:
· 隔板重量:15
· 身高:7 px
· 宽度:70%
· 模块对齐:左
我们还需要一些定制的填充:
· 顶部填充物:7 px
· 右垫:-7 px
· 左填充物:-7 px
我们将要使用的动画具有以下设置:
· 动画风格:幻灯片
· 动画重复:一次
· 动画方向:左
· 动画持续时间:800 ms
· 动画延迟:400 ms
· 动画强度:30%
对于第二个分隔符,将背景改为‘0c71c3’。
我们还将使用不同的动画:
· 动画风格:缩放
· 动画重复:一次
· 动画方向:中心
· 动画持续时间:800 ms
· 动画强度:30%
第三个除法器将使用‘#8300e9’作为其背景色。
第三个分隔器的动画也略有不同:
· 动画风格:缩放
· 动画重复:一次
· 动画方向:右
· 动画持续时间:800 ms
· 动画延迟:400 ms
· 动画强度:30%
首先,向第一个分配器添加以下渐变背景:
· 第一颜色:#000000
· 第二颜色:RGBA(255,255,255,0)
· 梯度类型:径向
· 径向:中心
· 起始位置:20%
· 期末职位:20%
使用‘#8300e9’颜色为您的分隔器。
接下来,使用‘点’作为您的分区样式‘和’垂直中心‘作为您的分区位置。
我们也需要一个‘40便士’的顶部填充。
和具有下列设置的动画:
· 动画风格:弹跳
· 动画重复:一次
· 动画方向:向下
· 动画持续时间:1000 ms
对于第二个分隔符,将颜色更改为‘0c71c3’。
动画还需要一些修改:
· 动画方向:中心
· 动画持续时间1500 ms
第三个分隔符将使用‘#8300e9’作为它的颜色。
并将以“UP”作为其动画方向。
为渐变背景选择下列设置:
· 第一颜色:#8300e9
· 第二颜色:RGBA(255,255,255,0)
· 梯度类型:径向
· 径向:中心
· 起始位置:0%
· 期末职位:38%
在SING子类别中,您需要以下设置:
· 分压器重量:0
· 身高:4PX
· 宽度:100%
最后,我们将要使用的动画具有以下设置:
· 动画风格:弹跳
· 动画重复:一次
· 动画方向:向上
· 动画持续时间1800 ms
对于第二个分频器,将第一个渐变背景色改为‘0c71c3’。
对第三个分隔符做相同的更改,但使用‘#8300e9’紫色代替。
使用最后一系列分配器的下列梯度背景设置:
· 第一颜色:
· 第二颜色:
· 梯度类型:径向
· 径向:中心
· 起始位置:0%
· 期末职位:38%
选择部分背景颜色作为您的分隔颜色以及,在本例中,它是‘#f4f4f4’。
接下来,使用‘虚线’作为您的分区样式和‘垂直中心’作为您的分区位置。
在“大小”子类别中,使用以下设置:
· 分压器重量:70
· 身高:20 px
· 宽度:100%
最后,我们将使用具有以下选项的动画:
· 动画风格:淡出
· 动画重复:一次
· 动画持续时间:1800 ms
· 动画延迟:800 ms
对于第二个分频器,将第二个渐变背景色改为‘0c71c3’。
并添加动画延迟‘250毫秒’。
对于最后一个分隔符,将第二个渐变背景色更改为‘#8300e9’。
最后把动画延迟到‘0MS’。
房山站点建设与新的Divi选项,许多新的创造性的东西是可能的内建设置的每个模块。在这篇文章中,我们特别向您展示了这些选项如何帮助您通过分区模块来增强您的设计。如果您有任何问题或建议,请确保在下面的评论部分留下评论!
热门分享
最新文章
2019.07.01
房山建站:与企业家聊一聊网页设计影响
2019.07.01
房山建站:可视化地管理反馈和跟踪Bugs
2019.07.01
房山建站:Web设计中不对称分割屏幕的例子
2019.07.01
房山网站建设:获取Web开发问题的答案
2019.07.01
房山网站建设:使用免费IP地理定位API个性化用户体验
2019.05.25
房山站点建设:如何重置WordPress网站(以及为什么您想要)
2019.05.25
房山站点建设:如何用WordPress创建Wiki
2019.05.24
房山站点建设:15+命令行Prompt对WordPress用户有用
2019.05.24
房山站点建设:如何创造性地使用Divi的新行调整选项
2019.05.24
房山站点建设:2017年最佳合作主题
随机推荐
2019.05.24
房山站点建设:divi插件亮点-J.E.D.I
2019.07.01
房山建站:Web设计中不对称分割屏幕的例子
2019.07.01
房山网站建设:使用免费IP地理定位API个性化用户体验
2019.07.01
房山建站:与企业家聊一聊网页设计影响
2019.05.24
房山站点建设:如何创造性地使用Divi的新行调整选项
2019.05.24
房山站点建设:2017年最佳合作主题
2019.05.24
房山站点建设:Wp-内容-WordPress最重要目录的初学者指南
2019.05.25
房山站点建设:如何重置WordPress网站(以及为什么您想要)
2019.05.24
房山站点建设:15+命令行Prompt对WordPress用户有用
2019.07.01
房山网站建设:获取Web开发问题的答案