运城企业网点建设：如何用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示例来阐述这些技巧。如果您有任何问题或建议，请确保在运城企业网点建设下面的评论部分留下评论！

 


相关推荐
分享： 1 2 3

关键词

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

热门分享

最新文章

随机推荐

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监
TOP