临猗企业网站建设:如何创造性地利用Divi中的行盒阴影

2019.05.25 临猗企业网站建设

162

临猗企业网站建设最近的Divi更新之一是期待已久的:将框阴影集成到节、行和模块中。在这篇文章中,我们将关注行框阴影如何改善您网站的整体外观和感觉。

为了说明深度框阴影可以为您的网站带来,我们已经创建了一个例子,我们将向您展示如何逐步重新创建。

结果

台式机

我们将向您展示如何在桌面上重新创建如下布局:

 

移动式

就像这样在手机上:

 

如何创造性地利用Divi中的行盒阴影

订阅我们的YOUTUBE频道

标头格式

您必须做的第一件事是选择正确的头格式。去你的WordPress仪表板>定制>标头&导航>标头格式>并选择“居中”作为标题样式.

主菜单栏

回到标题和导航>主菜单栏>并进行以下调整:

· 隐藏Logo图像:启用

· 菜单高度:211

· 徽标最高高度:30

· 文本大小:16

· 字母间距:2

· 字体:拉托灯

· 字体样式:大写

· 文本颜色:#FFFFFF

· 活动链接颜色:#FFFFFF

· 背景颜色:RGBA(255,255,255,0)

· 下拉菜单背景颜色:RGBA(255,255,255,0)

 

第一组

一旦您在主题定制器中进行了更改,就该开始布局了。创建一个新页面,启用DiviBuilder并切换到VisualBuilder。然后,向页面添加第一个标准部分。

剖面梯度背景

本节将需要以下梯度背景:

· 第一颜色:#ea2e7d

· 第二颜色:#edd 900

· 梯度型:线性

· 梯度方向:110度

· 起始位置:0%

· 结束位置:100%

 

间距

继续到“设计”选项卡。在间隔子类别中,顶部填充使用“100 px”,底部填充使用“200 px”。

 

单列排

行梯度背景

继续向该节添加一列行,并使用以下渐变背景:

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

· 第二颜色:#ea2e7d

· 梯度类型:径向

· 径向:中心

· 起始位置:56%

· 结束位置:100%

 

柱梯度背景

向下滚动,并对该行的列使用以下渐变背景:

· 第一颜色:RGBA(237,217,0,0.77)

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

· 柱梯度类型:线性

· 柱梯度方向:180度

· 列起始位置:0

· 柱端位置:100

 

上浆

转到“设计”选项卡,对“尺寸”子类别进行以下更改:

· 使用自定义宽度:是

· 定制宽度:27%

 

间距

然后,使用“20 px”作为行的上、右、下和左自定义填充。

 

文本模块

完成行设置后,添加文本模块,并为文本子类别使用以下设置:

· 文本字体:Arvo

· 文本字体大小:98 px

· 文本颜色:#FFFFFF

· 文字间距:32 px

· 文本行高:1.4em

· 文本定位:中心

 

第二组

在第一节的正下方添加另一节。本节将包含布局中存在的所有其他行。

剖面梯度背景

首先,本节使用以下梯度背景:

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

· 第二颜色:#592851

· 梯度型:线性

· 梯度方向:180度

· 起始位置:80%

· 结束位置:80%

 

间距

接下来,转到“设计”选项卡,将“100 px”添加到底部填充。

 

前两列排

行背景色

将前两列行添加到这个新部分,并使用‘#DDDD’作为背景色。

 

第1栏梯度背景

第一列需要以下梯度背景:

· 第一颜色:#6ac922

· 第二颜色:#b6c1b2

· 第1列梯度类型:线性

· 第1栏梯度方向:136度

· 第1栏起始位置:23%

· 第1栏末端位置:100%

 

第2栏背景颜色

向下滚动并使用‘#DDDDDD’作为列2的背景颜色。

 

上浆

继续到“设计”选项卡,并为“尺寸”子类别使用以下设置:

· 使用自定义宽度:启用

· 使用自定义水槽宽度:是

· 排水沟宽度:1

 

间距

间隔子类别将需要以下填充和页边距:

· 上、右、下、左填充物:0 px

· 最高保证金:-150便士

· 第1栏顶部填充:235 px(桌面),0 px(平板和电话)

· 第1栏底部填充:235 px(桌面),0 px(平板和电话)

· 第2栏顶部填充物:150 px

· 第2栏底部填充物:150 px

 

盒影

打开Box Shadow子类别并使用以下设置:

· 框影水平位置:-3 px

· 盒影垂直位置:-18 px

· 盒影模糊强度:77 px

· 盒影扩展强度:23 px

· 阴影颜色:RGBA(0,0,0,0.3)

 

第一文本模块

然后,将第一个文本模块添加到第二列,并为文本子类别使用以下设置:

· 文本字体:Arvo

· 文本字体大小:34 px

· 文本颜色:#7a7a7a

· 文本定位:中心

 

第二文本模块

在临猗企业网站建设添加另一个文本模块,但使用以下设置:

· 文本字体:拉托灯

· 文本定位:中心

 

打开“大小”子类别,使用“75%”的宽度并选择中心模块对齐。

 

最后,添加一个‘50 px’的最高边距。

 

第二列

行背景色

向该部分添加另一个两列行,并选择‘#b99bc1’作为其背景色。

 

第1栏背景颜色

向下滚动并选择“#DDDDDD”作为第1列的背景颜色。

 

上浆

移至“设计”选项卡,并将下列设置应用于“尺寸”子类别:

· 使用自定义水槽宽度:是

· 排水沟宽度:1

 

间距

接下来,使用以下填充:

· 上、右、下、左填充物:0 px

· 第1栏顶部填充:150 px(桌面),0 px(平板和电话)

· 第1栏底部填充:50 px(桌面),0 px(平板和电话)

· 第2栏顶部填充物:150 px

· 第2栏底部填充物:150 px

 

盒影

打开Box Shadow子类别并使用以下设置:

· 方框阴影水平位置:-4PX

· 盒影垂直位置:24 px

· 盒影模糊强度:77 px

· 盒影扩展强度:23 px

· 阴影颜色:RGBA(0,0,0,0.3)

· 盒影位置:外阴影

 

第一列中的第一图像模块

继续向第一列添加图像模块。上传图像后,将下列设置应用于间隔子类别:

· 在图像下面显示空间:是的

· 最高利润率:-500 px(桌面),0 px(平板电脑和手机)

· 右边框:-50 px(桌面),0 px(平板电脑和手机)

· 左边沿:200 px(桌面),0 px(平板电脑和电话)

 

打开Box Shadow子类别并使用以下框阴影:

· 方框阴影水平位置:2PX

· 盒影垂直位置:2PX

· 盒影模糊强度:0 px

· 盒影扩展强度:30 px

· 阴影颜色:RGBA(255,255,255,0.68)

· 盒影位置:外阴影

 

第一列中的第二图像列

向同一列中添加另一个图像模块,并使用以下边距:

· 最高利润率:-50 px(桌面),0 px(平板电脑和手机)

· 右距:100 px(桌面),0 px(平板电脑和电话)

· 底限:30 px

· 左边框:100 px(桌面),0 px(平板电脑和电话)

 

然后,向下滚动并使用以下框影:

· 方框阴影水平位置:2PX

· 盒影垂直位置:2PX

· 盒影模糊强度:0 px

· 盒影扩展强度:30 px

· 阴影颜色:RGBA(255,255,255,0.68)

· 盒影位置:外阴影

 

克隆文本模块&放在第二列中

最后,克隆上一行的两个文本模块,并将它们放在此行的第二列中。你只需要改变一件事:文字的颜色。打开每个文本模块的设置,并将文本颜色更改为“#FFFFFFF”。

结果

台式机

这篇文章中的所有步骤将导致桌面上的下列结果:

 

移动式

在移动平台上的结果如下:

 

最后思想

在临猗企业网站建设这篇文章中,我们向您展示了如何创造性地使用行上的框影。我们已经创建了一个五颜六色的例子,您可以清楚地注意到深度框阴影给一个布局。如果您有任何问题或建议,请确保在下面的评论部分留下评论!

 


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP