上海高级网页设计:如何使用Divi为您的自由职业者站点设计出色的工作体验部分

2019.05.28 关键词:

上海高级网页设计展示工作经验和技能在网上是一个伟大的方式,使自己与众不同的自由职业者。使用Divi,您可以创建一个独特的时间线,以一种既干净又专业的方式显示您的工作历史记录。而且,通过在Divi的圆圈计数器模块中获得一点创造性,您还可以添加一个动画信息图表来突出您的技能。

在本教程中,我将向您展示如何使用DiviBuilder为您的网站设计一个出色的工作体验和技能部分。

我们开始吧。

偷窥

以下是我们将在本教程中创建的内容的预览。

上海高级网页设计

创建标题部分

“创建标题”部分添加带有文本模块的一列行。

上海高级网页设计

对于文本模块的内容,输入以下html:

01

02

03

<h2>Here's my</h2>

<h3>Education, Work Experience and Some Skills</h3>

<p>Proin eget tortor risus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec rutrum congue leo eget malesuada.</p>

按照以下步骤更新文本模块的“设计”选项卡设置:

文本字体:源SANS Pro
文本大小:16 px

因为我们的内容中同时有h2和h3标题,所以我们需要同时设计它们。

标题2字体:档案窄
标题2字体重量:粗体
标题2字体样式:TT
标题2文本大小:24 px
标题2文字颜色:#06a08c

标题3字体:Julius Sans One
标题3字体重量:粗体
标题3字体样式:TT
标题3文本大小:62 px
标题3文本颜色:#3d394 b

更新行设置

现在,您已经输入了该节标题的内容,请更新行设置,使其有更多的间距,如下所示:

使用自定义宽度:是
自定义宽度:1245 px
使用自定义水槽宽度:是
排水沟宽度:1

创造你的工作经验时间线

若要创建您的工作体验时间线,请添加一个新行,其中包含四分之一的半列布局。

在添加第一个模块之前,我们需要将上面一行的样式与我们的新行匹配。为此,使用右键单击选项复制上面第一行的样式,并将样式粘贴到刚才添加的行。

在第一列中,添加一个blurb模块。

然后按以下方式更新blurb模块设置:

标题:2001-2003年
内容:Quisque velit nisi,益生菌乳中,Elum id enim。正因为如此。库拉比图尔球拍,酒后,全速下降。大皂角马萨(Praesent Sapien Massa),这是一种很有吸引力的NEC。
使用图标:是的
图标:选择一个图标

在“设计”选项卡设置下,按以下方式更新图标设计的选项:

图标颜色:#06a08c
圆圈图标:是的
圆形颜色:#ffffff
展示圈边界:是的
圆形边框颜色:#06a08c
图像/图标放置:左
使用图标字体大小:是
图标字体大小:40 px

现在,更新标题和正文文本设计选项如下:

标题字体:档案窄
字体重量:半粗体
标题字体样式:TT
标题文本大小:24 px
标题线高度:60 px

按以下方式更新正文文本设置:

Body字体:源SANS Pro
正文大小:16 px

现在,让我们定位我们的blurb模块,这样它将重叠我们稍后为我们的行创建的左侧边框。更新如下:

自定义页边距:-30 pxtop,-30 px左侧
自定义填充:30 px右,40 px底部

我们需要为第二列的持续时间线创建一个正确的边界线。为此,我们将在这个blurb模块上创建一个右边框。更新如下:

边框样式:右边框
右边框宽度:2px
右边框颜色:#06a08c

现在,我们准备复制我们的blurb模块来创建额外的时间线内容。复制blurb模块三次,在第一列中总共创建4个blurb模块。

接下来,复制相同的blurb模块并将其粘贴到第二列中。然后取出位于第二列中的blurb模块的右边框。

现在,复制该blurb模块两次,以便在第二列中总共创建三个blurb模块。

我们需要去掉第二列下的额外行空间,方法是在第一列中删除最后两个空白的右边框。为此,请使用以下内容更新第一列中的最后两个blurb模块:

右边框宽度:0 px

现在,我们需要将左边框添加到我们的行中,以便将blurb图标附加到第一行。为此,请按以下方式更新行设置:

边框样式:左边框
左边框宽度:2px
左边框颜色:#06a08c

现在,稍微更新行间距。

自定义填充:28 px顶部,0 px底部

由于我们的图标是通过行的左边框扩展的,所以我们需要添加一行自定义CSS,以确保图标的其余部分是可见的。为此,请转到行设置的“高级”选项卡,并在“主元素”框下输入以下内容:

01

overflow: visible;

为了隐藏第一列中最后一条边框旁的左边边框,我们需要给该blurb模块一个白色的背景色。这是因为blurb模块已经以-30 px的左边距移到左边。

重叠圈计数器模块创建技能信息图形

而不是间隔出4个不同的圆圈计数器模块来说明您的技能水平在一个页面上,您可以创建不同大小的每个圆圈计数器,并重叠,以创建一个单一的信息图表。内置的动画,它真的是一个令人印象深刻的插图。

添加第一个圆形计数器模块

上海高级网页设计要做到这一点,首先,我们必须创建我们的第一个圆计数器模块。让我们将第一个列添加到排在时间线旁边的最右边的列中。

因为我们要和其他人一起分层我们的圆计数器模块,所以我们不希望这个第一个模块实际显示数字值。但我们确实希望设置一个数字值,以显示动画颜色栏。按以下方式更新圆圈计数器设置:

编号:60
百分比符号:关闭

在“设计”选项卡…下

条形背景色:#06a08c
文本颜色:光线(这将隐藏在白色背景上的文本)

宽度:350 px
模块对齐:中心

350 px的宽度将随着每个圆模块的增加而逐渐减小,我们在前面的模块上添加一个,以完成信息图形的设计。

自定义边距:-2px左(这是隐藏绿色左边框,将显示在移动环模块旁边)

由于我们将做一些模块重叠,部署线框视图来完成接下来的三个循环模块。然后重复循环模块三次,这样在行的最右边列中总共有四个圆形计数器模块。

现在,我们需要更新设计和放置三个重复的圆计数器模块,以完成其余的插图。

第二圈计数器的设计与放置

使用以下内容更新第二个圆圈计数器(原计数器下的计数器)的设置:

号码:80
条形背景色:#187d6f
宽度:330 px

注意,我将圆形计数器的宽度从第一个减少20 px。这样,它就能很好地适应大圆圈的中间。现在,我们需要把我们的圆圈计数器带负值。

自定义页边距:-338 px顶

现在保存您的设置并预览您的页面。你应该看看另一个里面的圆圈。

使用下两个圆圈计数器继续此过程。

第三圈计数器的设计与放置

对于第三圈计数器,更新以下设置:

编号:70
条形背景色:#eec42d
宽度:310 px

注意,我又把圆圈的宽度缩小了20 px。这是为了确保重叠圆之间的间隔是一个偶数的距离。

自定义页边距:-318 px顶

注意,自定义边距也减少了20 px,以说明重叠圆之间的适当垂直间距。

第四圈计数器的设计与放置

对于第四个圆圈计数器,更新以下设置:

号码:90
条形背景颜色:#3d394 b

此时,您可能需要在圆圈计数器的中间包含数字。如果是这样,您可以简单地将文本颜色更新为黑暗。

文字颜色:深色

实际上,您可以选择以这种方式显示四个圆圈计数器中的任意一个数字值。只需确保您只选择一个具有深色文本颜色,这样您就不必将数字重叠。

宽度:290 px

自定义页边距:-298 px顶部,80 px底部

对于最后一个圆模块,不仅有必要用负边距提出它,而且我们还想在下面添加一些正边距,以弥补所创建的负空间。这将确保下一个模块放置在圆模块下将有适当的间距。

现在看看结果。

用与圆圈计数器颜色相对应的彩色标签列出您的技能

最后一步是创建一个颜色键,以帮助理解每个圆圈计数器中每个条形颜色对应的技能。

创建自定义列表项的一个很好的方法是使用blurb模块。在切换出线框视图之前,在右列的圆圈计数器下添加一个新的blurb模块。然后切换桌面视图以完成本教程的其余部分。

按以下方式更新blurb模块设置:

标题:JavaScript
使用图标:是的
图标:选择正方形图标

在“设计”选项卡…下

图标颜色:#187d6f
图像/图标放置:左
标题字体:档案窄
标题字体重量:粗体
标题字体样式:TT
标题文本大小:24 px
标题文本颜色:#187d6f
标题线高度:1.4em

注意,我将标题颜色与图标颜色相匹配,该颜色对应于上面一个圆圈计数器的颜色。

提示:我使用标题线高度垂直中心我的标题,以便它与图标对齐左边。在将来这样做的时候要记住这一点。

海关保证金:37%

给我的音符一个左边框,让你把它放在圆圈计数器下面。

添加第二个彩色标签

若要创建第二个彩色标签,请复制刚才创建的标签,并更新以下内容:

标题:HTML/CSS
图标颜色:#06a08c
标题文本颜色:#06a08c

添加第三个彩色标签

若要创建第三个标签,请复制刚才创建的标签,并更新以下内容:

标题:WordPress
图标颜色:#eec42d
标题文本颜色:#eec42d

添加第四个彩色标签

若要创建第四个标签,请复制刚才创建的标签,并更新以下内容:

标题:WordPress
图标颜色:#3d394 b
标题文本颜色:#3d394 b

保存您的更改。

在您的部门中添加一个分区

最后,回到您的区段设置,添加一个分隔符以添加一些背景纹理,如下所示:

隔板:顶部
分隔风格:见截图
除法器颜色:RGBA(6,160,140,0.08)
分隔高度:1100 px

就这样。

这是最后的结果。

包起来

在上海高级网页设计,一旦你的设计完成,你所需要做的就是回去更新你的图标,内容,技能等等。为了满足你的需要你们都准备好了。如果您需要用自己的图标/图像替换图标,可以随意使用。只需确保他们是40 px乘40 px,以适应这个布局。

我希望这个工作经验部分将帮助您作为一个自由职业者脱颖而出。我认为这个布局在其他用例中会很好的工作。例如,可以使用此时间线布局在“关于”页上显示公司历史记录。

我期待着在评论中听到你的意见。

 


关键词
最新推荐
联系电话 400-6065-301

微信咨询 寒总监