北辰网站建设企业:如何创建一个开放的职位布局与Divi

2019.05.31 北辰网站建设企业

200

每周,我们为您提供新的和免费的Divi布局包,您可以使用您的下一个项目。对于其中一个布局包,我们也共享一个用例,它将帮助您将您的网站提升到下一个级别。

本周,北辰网站建设企业作为我们正在进行的Divi设计计划的一部分,我们将向您展示如何创建一个与Divi的数字营销布局包相匹配的惊人的空缺职位布局。此布局是已包含在布局包中的职业布局的补充。一旦创建了布局,就可以为每个空缺职位重用它,并相应地更改内容。不想从头开始创建布局吗?在这篇文章的末尾,你可以免费下载布局并上传到你的Divi库。

我们开始吧!

预览

在开始本教程之前,让我们先看看我们将在不同屏幕大小上重新创建的布局(以及您可以下载的布局):

北辰网站建设企业

用数字营销主页布局创建新页面

添加新页面&用VisualBuilder打开

首先添加一个新页面,给您的页面一个标题,发布它,然后立即切换到VisualBuilder。

上传数字营销主页布局

我们将重用数字营销布局包中包含的布局之一。这将使它更容易保持相同的风格贯穿整个网站。转到您预先制作的布局,向下滚动,直到您遇到数字营销布局包,并使用主页布局。

删除不相关的部分

我们上传的布局包含了一些不需要用于空缺职务布局的部分。所以我们马上就把它们移走。以下是您不需要的部分:

将页面转换为空缺职位布局

删除“英雄”部分文本模块

现在,我们可以开始将页面转换为一个开放的职务职位布局!从删除英雄部分中的以下描述文本模块开始:

更改“英雄”部分的内容

也可以更改英雄部分中剩余模块的副本。

在“英雄”栏下增加新的一节

然后,在英雄部分的正下方,添加一个新的标准部分。

添加两列行

我们将向其添加一个具有以下列结构的行:

克隆英雄段文本模块&放置在新行第1列

为了让事情变得更简单,我们将重用英雄部分的文本模块之一,并将其放在新行的第一列中。这将节省我们的时间,使我们能够根据我们的需要作出改变:

删除文本模块中的H1文本

打开此文本模块并删除包含的H1副本。我们还将H3副本更改为“职务说明”。

更改H3文本设置

我们的英雄部分中的文本颜色是白色的,所以我们肯定需要将其更改为‘fcb6ab’,这是一个与这个布局包的调色板相匹配的颜色。我们还将使用左文本对齐。

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

北辰网站建设企业一旦应用了这些更改,就克隆文本模块并将其放在第二列中。确保您在这里也更改了副本。

添加职务说明文本模块

在第一列前面的文本模块下面,继续并添加一个新的文本模块。您可以使用此文本模块添加您需要显示的职务说明。我们使用段落,H3标题和列表的组合。没有必要为其中的每一个创建单独的文本模块。我们将只使用一个文本模块,并修改文本设置中所有三种文本类型的设置。

列表设置

我们将跳过段落设置,然后立即转到列表设置。在这里,我们将使用以下设置:

· 无序列表样式类型:圆圈

· 无序的列表项目:12 px(这会将列表项稍微推到右边)

H3文本设置

接下来打开H3文本设置,并使用以下设置:

· 标题3字体:Roboto

· 标题3字体重量:粗体

· 标题3文本大小:40 px(桌面)、35 px(平板电脑)、28 px(电话)

将Blurb模块放置在第2列中

数字营销布局包的主页布局包含许多令人惊叹的设计元素,我们可以简单地重用而不是从头开始创建一些东西。例如,下一节中的Blurb模块非常适合共享其他细节,如何应用、截止日期、位置和可用性等信息。完成此操作后,我们将删除本节,而不是使用您选择的颜色调色板克隆BlurbModules,只需将它们放在上一节的第二列中即可。

删除Blurb模块的底部边缘

这些Blurb模块由于分配给它们的零底部裕度而被推到一起。继续,并删除‘OPX’底部填充的每一个模块,您正在使用。

更改Blurb内容和图标

现在,您可以一个地更改这些BlurbModules的内容。选择一个与您共享的内容相匹配的图标。

移走剩余部分

如前所述,我们只使用Blurb模块的部分来简化我们的工作流程。一旦您替换了所需的Blurb模块,就可以继续删除此部分。

将布局保存到Divi库&用于其他开放位置的重用

将布局保存到Divi库

我们就完了!我们现在有一个惊人的布局,我们可以很容易地重用所有目前和未来的空缺职位。唯一要做的是通过单击以下图标将布局保存到Divi Library,为布局指定名称并单击“保存到库”按钮:

窗体底端

预览

现在我们已经完成了所有步骤,让我们最后看看不同屏幕大小上的空缺职务职位布局:

最后思想

北辰网站建设企业在这个用例博客文章中,除了Divi的数字营销布局包之外,我们还向您展示了如何创建一个优雅而惊人的空缺职位页面。我们已经使用Divi的VisualBuilder从头创建了布局,并且我们还共享了布局。你可以免费下载它并上传到你的Divi库。如果您有任何问题,请确保您在下面的评论部分留下评论!

 


联系电话 400-6065-301

留言