阳泉站点制作:如何用Divi为您的个人网站创建一个美丽的英雄区

2019.05.25 阳泉站点制作

193

创建一个个人网站既有趣又有挑战性。你希望你的网站看上去很吸引人,并且有足够的个人魅力让你的故事被告知。同时,你想拥有一个美丽而真实的网站,显示你知道自己在做什么。

为了帮助您在创建这样的个人网站的创造性过程,阳泉站点制作创建了一个美丽的英雄部分,肯定会使您的网站脱颖而出。在这篇文章中,我们将一步地向您展示如何使用Divi为每个步骤内置的设置来创建结果。

如何用Divi为您的个人网站创建一个美丽的英雄区

创建科

首先,在WordPress网站上创建一个新页面,启用DiviBuilder,切换到VisualBuilder,并在其中添加一个新的部分。

梯度背景

在本节中,您唯一需要更改的是背景。此背景将适用于我们将在本文接下来的步骤中添加的所有行。打开背景子类别并向其添加以下渐变背景:

· 第一颜色:#c2c6f3

· 第二颜色:#cea5b9

· 梯度类型:径向

· 径向:中心

· 起始位置:45%

· 期末职位:45% 

增加第一排

然后,继续将第一行添加到节中。这一行将只包含在布局顶部可以看到的文本模块。

柱结构

接下来,选择带有一列的列结构。 

上浆

移到行设置的“设计”选项卡上,并为“大小”子类别使用以下设置:

· 全宽行:是的

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

· 排水沟宽度:1

 

文本模块

如前所述,这一行只需要一个文本模块。

文本设置

输入要在“内容”选项卡中显示的文本后,转到“设计”选项卡,并将下列设置应用于文本子类别:

· 文本字体:Arizonia

· 文本字体权重:普通字体

· 文本大小:150(桌面),80(平板电脑),70(手机)

· 文字颜色:RGBA(255,255,255,0.39)

· 文本定位:中心 

增加第二排

完成第一行后,继续将第二行添加到同一节中。

柱结构

与前一行一样,该行也只有一列。

 

背景图像

打开行设置并添加要用作第一列背景图像的个人图像。确保图像位置设置为“中心”。

 

上浆

然后,打开SING子类别并进行以下更改:

· 使用自定义宽度:是

· 自定义宽度:557 px

 

间距

接下来,使用‘0px’作为行的上、下、右和左填充。 

盒影

最后,使用以下框阴影:

· 框影水平位置:0 px

· 盒影垂直位置:2PX

· 盒影模糊强度:53 px

· 盒影扩展强度:10 px

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

· 阴影位置:外阴影

 

文本模块

完成行设置后,继续将文本模块添加到阳泉站点制作的列中。

背景色

首先,这个文本模块需要一个“RGBA(0,0,0,0.66)”颜色的背景色。 

文本设置

然后,转到“设计”选项卡,并对文本子类别进行以下更改:

· 文本字体:Andika

· 文本字体权重:粗体

· 文本字体样式:大写

· 文本大小:78 px(桌面),70 px(平板电脑),50 px(电话)

· 文本颜色:#c2c6f3

· 文本行高:1em

· 文本定位:中心

 

边界

接下来,打开边界子类别并使用以下边框:

· 使用边框:是

· 边框颜色:#c2c6f3

· 边框宽度:8 px

· 边框风格:实心 

间距

继续,添加以下边距和填充:

· 上、右、下、左边距:50 px

· 顶部填充物:200 px

· 底垫:200 px 

盒影

最后,对文本模块使用以下方框阴影:

· 框影水平位置:0 px

· 盒影垂直位置:0 px

· 盒影模糊强度:0 px

· 盒影扩展强度:50 px

· 阴影颜色:RGBA(206,165,185,0.41)

· 盒影位置:外阴影

 

增加第三排

如前所述,本教程只使用一节内容。这背后的原因是,我们希望该部分的渐变背景分布在所有正在共享的不同内容上。继续添加一个新行。

柱结构

为该行选择两列。 

上浆

然后,启用“使用自定义宽度”选项,并应用“663 px”宽度。 

间距

最后,添加‘50 px’的顶部和底部边距。 

第一文本模块

向行的第一列添加第一个文本模块。

文本设置

然后,转到“设计”选项卡,使用“Andika”作为文本字体,使用“正则”作为文本字体的权重。

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

第二列中的文本模块具有完全相同的设置,所以继续,克隆文本模块并将其放在第二列中。

增加第四排

在设计完成之前,还有一行要添加到该部分。

柱结构

这个新行也有两列。 

上浆

打开“行设置”,使下列设置应用于“尺寸”子类别:

· 全宽行:是的

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

· 排水沟宽度:1 

间距

然后,添加20 px的顶部填充。 

第一图像模块

继续,并将第一个图像模块添加到这最后一行的第一列中。

盒影

并向其添加以下框阴影:

· 框影水平位置:-6PX

· 盒影垂直位置:2PX

· 盒影模糊强度:53 px

· 盒影扩展强度:10 px

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

· 盒影位置:外阴影 

克隆图像模块&放置在第二列

最后,克隆此ImageModule并将其放置在第二列中以完成此行。

结果

一旦您完成了我们添加到这个帖子中的所有步骤,您应该能够实现结果。

最后思想

你和迪维在一起的可能性是无限的。通过使用VisualBuilder,您可以使您的网站看起来与您想要的完全一样,这将实时显示您的更改。特别是这篇文章,我们向您展示了如何为个人网站创建一个美丽的英雄部分。本教程只使用Divi的内置选项。如果您有任何问题或建议,请确保在阳泉站点制作下面的评论部分留下评论!

 


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP