2019.05.27

徐汇区设计网页:如何漂亮地使用滑翔机模块与Divi一起做推荐信

毫无疑问,推荐信是每个销售产品或服务的网站的重要组成部分。他们为你的网站提供了人们对你的公司和/或产品产生积极印象所需要的社会证明和信誉。在Divi中,我们有一个认证模块,专门帮助您以一种美丽的方式展示推荐信。然而,使用证言模块并不是唯一的方法。例如,您也可以使用SliderModule展示推荐信。

徐汇区设计网页在这篇文章中,我们将向您展示如何重新创建一个漂亮的部分,其中包括一个带有推荐信的Slider模块。跟着本教程,你需要的唯一的东西是Divi的内置选项和人物肖像图片谁是谁把你的品牌良好的话。

结果

在我们开始本教程之前,让我们快速查看一下我们将逐步在不同屏幕大小上重新创建的示例。

桌面

徐汇区设计网页

药片

徐汇区设计网页

论移动

开始重新创建示例

添加新的标准部分

背景色

在将标准部分添加到新的或现有的页面后,首先要做的是选择‘e7e0d6’作为该部分的背景色。

间距

然后,转到Design选项卡,并将以下自定义填充添加到您的节中,以增加节的开头和结尾与我们接下来添加的行之间的距离:

· 顶部:100 px

· 右:0 px

· 底部:100 px

· 左:0 px

增加一个新行

柱结构

编辑完部分后,向其中添加一个新行,其列结构如下:

背景色

在不添加任何模块的情况下,打开行设置并添加‘#fcfaf2’作为背景色。

第2栏背景颜色

向下滚动相同的选项卡,并给你的第二列‘#a2eaf2’背景色。

上浆

接下来,移到“设计”选项卡上,打开“大小”子类别,并使用以下设置来增加行的宽度,并移除两列之间的空间:

· 使用自定义宽度:是

· 自定义宽度:1200 px

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

· 排水沟宽度:1

· 等分柱高:是

间距

然后,在Design选项卡中打开间隔子类别,并使用以下自定义填充:

· 上、右、下、左:0 px

· 第1栏底部:50 px

· 第2栏底部:50 px

盒影

最后,选择第一个预先制作的Box Shadow并对其进行以下修改:

· 盒影扩展强度:-3 px

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

将文本模块#1添加到第一列

文本设置

既然我们已经修改了行,就可以开始向列中添加模块了。需要添加到第一列的第一个模块是文本模块。添加内容后,移到“设计”选项卡中的“文本子类别”,并对其使用以下设置:

· 文本字体:Allerta

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

· 文本大小:22 px

· 文本颜色:#ffd 870

· 文本方向:左

间距

徐汇区设计网页向下滚动“设计”选项卡,打开“间隔”子类别,然后应用以下自定义填充:

· 顶部填充物:200 px

· 左填充物:15.7%

将文本模块#2添加到第一列

文本设置

将第二个文本模块添加到第一列后,将下列设置应用于文本子类别:

· 文本字体:Allerta

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

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

· 文本颜色:#433b7f

· 文本线高度:1.2em

· 文本方向:左

间距

将“15%”添加到此文本模块的左侧填充。

将文本模块#3添加到第一列

文本设置

第一列的最后一个文本模块需要文本子类别中的中心文本方向。

上浆

将文本方向放在文本子类别中后,打开“大小”子类别并使用“74%”作为宽度。

间距

最后,在本文本模块的间隔子类别中添加以下值:

· 最高保证金:50便士

· 左填充物:15.7%

向第一列中添加按钮模块

按钮设置

第一列中的最后一个模块是Button模块。添加“复制和链接”后,移到“设计”选项卡上,并为Button子类别使用以下设置:

· 为按钮使用自定义样式:是

· 按钮文本大小:15 px

· 按钮文本颜色:#000000

· 按钮背景颜色:#a2eaf2

· 按钮边框宽度:0 px

· 按钮字体:Allerta

· 字体重量:普通字体

间距

然后,打开间隔子类别并添加以下值:

· 顶部:30 px

· 底部:70 px

· 左:15.7%

向第二列中添加滑块模块

标题文本设置

现在,我们已经完成了向第一列添加模块(并对其进行编辑),让我们继续讨论第二列。需要添加到第二列的第一件事是SliderModule。我们将使用这个模块来创造性地展示推荐信。在添加滑块之前,我们将修改滑块模块的总数。这些更改将适用于将添加到此模块的所有幻灯片。转到“设计”选项卡,打开标题文本子类别,并将下列设置应用于H2选项卡:

· 标题字体:Allerta

· 标题字体重量:普通字体

· 标题字体风格:斜体

· 标题文本对齐:左

正文设置

然后,打开正文文本子类别并应用以下设置:

· 体形:Allerta

· 体型重量:规则

· 正文对齐:左

· 正文颜色:#ffd 870

间距

最后,将“180 px”添加到间隔子类别中的顶部和底部填充。

滑块含量

现在您已经做了一般性的更改,继续并将不同的证明滑块添加到模块中。对于其中的每一个,使用标题字段作为证词本身,使用内容框表示作证人的姓名。

滑块背景色叠加

对于每一个滑块,添加‘#605550’作为背景颜色。

滑块背景图像

随着背景颜色,添加一个背景图像和应用‘乘’为背景图像混合。

将文本模块添加到第二列

文本设置

现在,在您创建的SliderModule下面添加一个文本模块以及以下文本设置:

· 文本字体:Allerta

· 文本字体权重:粗体

· 文本大小:24 px

· 文本颜色:#3f3f3f

· 文本线高度:1.3em

· 文本方向:左

间距

最后,还向该文本模块添加以下自定义填充:

· 顶部:30%(桌面),20%(平板电脑和电话)

· 底部:10%

· 左:10%

向第二列中添加按钮模块

按钮设置

最后需要添加到第二列的是Button模块。添加“复制”和“链接”后,根据下列设置修改Button子类别:

· 为按钮使用自定义样式:是

· 按钮文本大小:15 px

· 按钮文本颜色:#000000

· 按钮背景颜色:#ffd 870

· 按钮边框宽度:0 px

wps342.jpg

间距

若要使Button模块与其他模块相匹配,请使用以下自定义页边距:

· 底部:70 px

· 左:10%

结果

现在我们已经完成了关于如何创造性地使用Slider模块进行验证的所有步骤。

最后思想

徐汇区设计网页在这篇文章中,我们已经向您展示了如何创造性地使用Slider模块在您的一个部分中包含推荐信。此设计可用于任何网站,并结合您的调色板的选择。如果您有任何问题或建议,请确保您在下面的评论部分留下评论!

 


Previous Next

最新推荐

浦东网站建设哪家比较好:如何构建网站以更有利于业务发展

2018.8.8

浦东网站建设哪家比较好:如何构建网站以更有利于业务发展

浦东网站建设哪家比较好:如何构建网站以更有利于业务发展随着互联网的不断发展,用户对网站的体验要求也越来越高。我们应该怎样做才能使网站更高质量,更贴近用户?在竞争风暴中更好地发展。让我们来谈谈如何构建网站以更有利于业务发

more >

上海网站建设工作室:网站导航设计要注意什么?

2018.8.8

上海网站建设工作室:网站导航设计要注意什么?

上海网站建设工作室:网站导航设计要注意什么?网站导航是大多数网站必备的工具上海网站建设工作室,也是用户访问网站的目录。每个网站也通过网站导航设计和设计。良好的导航可以快速使用用户了解相关业务。基本信息还可以有序地显示公司内容。

more >

杨浦企业网站设计公司:制作网站的过程有哪些?

2018.8.8

杨浦企业网站设计公司:制作网站的过程有哪些?

杨浦企业网站设计公司:制作网站的过程有哪些?如何在网站上解决这个问题与学习其他知识是一样的。它需要一定的计算机基础。拥有良好的计算机基础后,学习起来会容易得多。让我们仔细看看制作网站的过程。首先,确定主题在创建网站之前,您需

more >

普陀做网站的公司:在网站建设中如何改进内容设计呢??

2018.8.8

普陀做网站的公司:在网站建设中如何改进内容设计呢??

普陀做网站的公司:在网站建设中如何改进内容设计呢??在网站建设工作中,内容是改善用户体验的主要部分。与搜索引擎优化和博客相比,提高设计内容质量更为重要。它是您的网站和品牌标识的一部分,也是用户可以积极参与网站互动的重要

more >

浦东网站建设公司排名:如何更好得进行网站内容构建

2018.8.8

浦东网站建设公司排名:如何更好得进行网站内容构建

浦东网站建设公司排名:如何更好得进行网站内容构建网站建设的重点是内容的构建。如果内容不好,则用户不会浏览产品,也不会销售产品。因此,网站的建设主要是内容的构建,这与网站的成功有关。那么网站内容构建的技巧是什么?首先

more >

普陀网站开发公司:如何设计符合网站建设用户体验的内容?

2018.8.8

普陀网站开发公司:如何设计符合网站建设用户体验的内容?

普陀网站开发公司:如何设计符合网站建设用户体验的内容?在网站建设工作中,内容是改善用户体验的主要部分。与搜索引擎优化和博客相比,提高设计内容质量更为重要。它是您的网站和品牌标识的一部分,也是用户可以积极参与网站互动的

more >

普陀网站设计建设公司:在网站建设中要注重哪些细节?

2018.8.8

普陀网站设计建设公司:在网站建设中要注重哪些细节?

普陀网站设计建设公司:在网站建设中要注重哪些细节?如今,越来越多的人掌握了网站建设的技术,建立了自己的网站。但是,在网站建设过程中,有必要注意哪些方面可以使其建立的网站能够迅速发展。普陀网站设计建设公司Internet可以连接到rails

more >

奉贤网站建设公司排名:网站建设中要注重哪些细节?

2018.8.8

奉贤网站建设公司排名:网站建设中要注重哪些细节?

奉贤网站建设公司排名:网站建设中要注重哪些细节?网站制作标准与公司的不同定义不同,不同的需求有不同的优先级。因此,这不是一个非常明确的,但它可以做得很详细。网站建设中有很多细节。成功的关键,无论是网站的整理,还是网

more >

虹口高端建站:如何进行网站制作?

2018.8.8

虹口高端建站:如何进行网站制作?

虹口高端建站:如何进行网站制作?网站制作是网站建设中最重要的一步。用户对公司网站印象的主要来源是网页。一个好的企业虹口高端建站网站不仅可以让用户感受到网站的美感和氛围,还可以让公司通过网页隐藏起来。语言传达了公司的概念,提

more >

金山网站设计公司:网站设计的美感是什么?

2018.8.8

金山网站设计公司:网站设计的美感是什么?

金山网站设计公司:网站设计的美感是什么?有人问,网站设计的美感是什么,不同的人的美学是如何不同的,以及如何让观众喜欢这个网站。在当前的互联网时代,网站已经开始普及,每家公司都有自己的网站,每个网站。他们都有自己的风格。

more >