运城企业网点建设:如何用Divi创建显示英雄部分

2019.05.25 运城企业网点建设

107

英雄阶层;他们为各种目的服务。它们是访问者在访问您的运城企业网点建设网站时首先看到的东西,它们会立即显示您网站的风格,并影响访问者在您的网站上的感受和行为方式。我们已经习惯了各种各样的英雄部分,但大多数都包括英雄形象,标语和行动号召。不过,还有其他可能性。在这篇文章中,我们将向您展示关于英雄部分的另一种方法,然后我们将以一个可以使用Divi重新创建的示例来跟踪它。

如何让你的英雄队脱颖而出

在我们向您展示如何重新创建该示例之前,让我们先看看区分此英雄部分与其他部分的一些因素。

1。大型、描述性和集中式标志

我们在我们的示例中使用的第一件事,帮助我们的英雄部分突出,是一个居中的标题格式,而不是默认的。除此之外,我们还使用了一个透明的菜单,它将有助于将菜单项与英雄部分设计重叠。当使用透明的背景时,徽标、菜单和网站之间的链接更加清晰,因为英雄部分中少了一个部分。

2。集中书面内容

你可以做的另一件事,使你的英雄部分脱颖而出,是集中你的书面内容,你有。这样的话,你就会把访问者的注意力吸引到屏幕上的一个地方,这样他们阅读的机会就会更大。另一方面,如果你在整个英雄部分划分书面内容,那么这些变化很可能会错过你想要传达的信息的一部分。

3。突出独特的销售主张

通常,英雄部分包含共享产品或公司标语的普通文本模块。但是,您也可以在英雄部分使用Blurb模块。这些Blurb模块是完美的,如果您想分享您的产品或服务的独特销售主张,立即。除此之外,您还可以选择是否立即将操作调用包括在内。在我们的示例中,这些对操作的调用是内置在blurb模块本身中的。

4。清洁产品形象

为了更好地解决这个问题,为了平衡您所提供的书面内容,我们建议使用一个干净的产品图像作为您的英雄部分背景图像。你希望你的英雄形象尽可能定性和自我解释,而不接管整个英雄部分。

如何用Divi创建显示英雄部分

用Divi重新创建示例

既然我们已经超越了理论层面,现在是我们重新创造它的时候了。

标头格式

您需要做的第一件事是选择“居中”作为标题样式,方法是转到WordPress仪表板>定制>标题&导航>标题格式>并选择“居中”作为标题样式。

 

主菜单栏设置

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

· 菜单高度:211 px

· 徽标最大高度:100 px

· 文本大小:16

· 字母间距:2

· 字体:拉托灯

· 字体样式:大写

· 文本颜色:#FFFFFF

· 活动链接颜色:#FFFFFF

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

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

增加新科

完成后,添加一个新页面、启用DiviBuilder、启用VisualBuilder和添加一个新的标准部分。

梯度背景

对本节使用以下梯度背景:

· 第一颜色:#e2e2e2

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

· 梯度型:线性

· 梯度方向:180度

· 起始位置:40%

· 最后职位:40% 

背景图像

接下来,上传背景图像,并选择“乘”作为背景图像混合。 

加两列行

背景色

在刚刚创建的部分中添加一个两列行,并使用‘#b7afa 1’作为背景色。

 

第1栏梯度背景

向下滚动并使用第一列的下列梯度背景:

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

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

· 第1栏梯度类型:径向

· 第1列梯度方向:左上角

· 第1栏起始位置:49%

· 第1栏末端位置:49% 

第2列梯度背景

并对第二列使用以下梯度背景:

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

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

· 第2列梯度类型:径向

· 第2栏径向方向:右下角

· 第2栏起始位置:49%

· 第2栏末端位置:49%

 

上浆

转到运城企业网点建设的“设计”选项卡,启用“使用自定义Gutter宽度”选项,并对Gutter宽度使用“1”。 

间距

打开间隔子类别,使用以下填充和页边距:

· 顶部填充:0 px(桌面),20 px(平板和电话)

· 右垫:25 px

· 底垫:20 px

· 左填充物:25 px

· 底限:200 px 

第一个Blurb模块

启用图标

向行的第一列添加一个Blurb模块,启用“UseIcon”选项并选择一个图标。 

图标设置

然后,转到“设计”设置,对Image&Icon子类别进行以下更改:

· 图标颜色:#FFFFFF

· 图像/图标放置:左

· 使用图标字体大小:是

· 图标字体大小:40 px 

标题文本设置

然后,将下列设置应用于标题文本子类别:

· 头字体:机器人灯

· 字体样式:粗体

· 页眉字体大小:25 px

· 标题文本颜色:#FFFFFF

· 标头线高度:1.5厘米

 

正文设置

正文文本子类别需要进行以下更改:

· 车身字体:拉托灯

· 体型尺寸:13 px

· 正文颜色:#FFFFFF

 

上浆

接下来,使用“300 px”作为内容宽度。 

间距

最后,对Blurb模块使用以下边距和填充:

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

· 顶部填充物:100 px

· 右垫:10 px

· 船尾填充物:30便士

· 左填充物:10 px

 

克隆Blurb模块&放置在第二列

继续克隆以前创建的Blurb模块,并将其放在另一列中。

改变背景色

在这个克隆的Blurb模块中,首先要更改的是背景色。将其改为“RGBA(89,60,31,0.5)”。 

变图标

接下来也是最后一件需要更改的事情是Content选项卡中的图标。

额外:添加Divi的新框阴影选项到行

通过最近的更新,您现在还可以向行、模块和部分添加框阴影。对于这个例子,我们将向行添加一些框阴影。这将有助于创造一些深度,并强调我们的英雄部分的书面内容。

· 框影水平位置:-3 px

· 框影垂直位置:31 px

· 盒影模糊强度:79 px

· 盒影扩展强度:-4PX

· 阴影颜色:#424242

· 盒影位置:外阴影

 

结果

按照以上操作即可得到完美结果。

最后思想

在这篇文章中,我们向您展示了一种关于英雄部分的不同方法。我们给出了一些技巧,并通过向您展示如何重新创建我们预先创建的Divi示例来阐述这些技巧。如果您有任何问题或建议,请确保在运城企业网点建设下面的评论部分留下评论!

 


热门分享

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP