如何使用 Divi 在移动设备上精美展示服务（免费下载！）

如果您专注于移动优先设计，这篇文章可能会对您有所帮助。 我们创建了两个漂亮的服务展示示例，它们在较小的屏幕尺寸上看起来很棒。 更重要的是，它们专门设计为在移动设备上看起来最好，同时在桌面上仍然保持良好的设计。 在这篇文章中，我们将逐步向您展示如何从头开始重新创建它们。 我们希望本教程能够激发您在为您构建的任何网站设计服务部分时发挥您的创造力。 在本教程结束时，您还可以下载这两个部分的 JSON 文件。

让我们开始吧！

预览

在我们深入学习本教程之前，让我们快速浏览一下我们将重新创建的两个移动示例。

示例#1

示例#2

让我们开始重新创建示例 #1

订阅我们的 YouTube 频道

添加新部分

渐变背景

创建一个新页面并向其添加常规部分。 打开部分设置并添加渐变背景。

• 颜色 1：#ff0f83
• 颜色 2：rgba(255,255,255,0)
• 渐变类型：径向
• 径向：左
• 起始位置：20%
• 结束位置：20%

添加第 1 行

列结构

继续使用以下列结构向该部分添加新行：

添加文本模块 #1

添加内容

我们需要的第一个模块是文本模块。 向内容框中添加一些内容。

文字设置

然后，转到设计选项卡并修改文本设置。

• 文字字体： Poppins
• 文字字体粗细：重
• 文字颜色：#ffffff
• 文字大小：20vw
• 文本行高：1em

• 文字阴影模糊强度：0.95em
• 文字阴影颜色：rgba(0,0,0,0.13)
• 文字方向：居中

添加文本模块 #2

添加 H2 内容

在上一个文本模块的正下方添加另一个文本模块。 输入您选择的一些 H2 含量。

H2 文本设置

然后，转到设计选项卡并修改 H2 文本设置。

• 标题 2 字体：Poppins
• 标题 2 字体粗细：粗体
• 标题 2 文本对齐：居中
• 标题 2 文本颜色：#000000
• 标题 2 文字大小：10vw（手机和平板电脑），10vw（桌面）

间距

使用一些负上边距在两个文本模块之间创建重叠。

• 最高边距：-12vw（手机）、-10vw（平板电脑）、-8vw（桌面）

添加第 2 行

列结构

继续使用以下列结构添加另一行：

渐变背景

尚未添加任何模块，打开行设置并添加渐变背景。

• 颜色 1：#3239ff
• 颜色 2：rgba(255,255,255,0)
• 渐变类型：径向
• 径向：右
• 起始位置：30%
• 结束位置：30%

浆纱

接下来转到大小设置并允许行占据屏幕的整个宽度。

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

间距

也添加一些间距值。 这些值将确保所有屏幕尺寸上的一切看起来都很好。

• 左填充：0vw（手机和平板电脑），15vw（桌面）
• 右填充：0vw（手机和平板电脑），15vw（桌面）

自定义 CSS

我们还通过在高级选项卡中添加一行 CSS 代码将两列彼此并排放置。

display: flex;

将文本模块添加到第 1 列

添加 H3 和链接内容

现在我们可以开始添加模块了！ 将文本模块添加到带有一些 H3 副本和链接的第一列。

背景颜色

然后，转到模块的背景设置并添加背景颜色。

• 背景颜色：rgba(255,255,255,0.95)

文字设置

继续在模块的文本设置中更改文本方向。

• 文字方向：居中

链接文字设置

还要修改链接文本设置。

• 链接字体： Poppins
• Linke 字体粗细：粗体
• 链接字体样式：下划线
• 链接下划线颜色：#000000
• 链接文字颜色：#000000
• 链接文字大小：3vw（手机）、2vw（平板电脑）、1vw（桌面）

H3 文本设置

随着 H3 文本设置。

• 标题 3 字体：Poppins
• 标题 3 字体粗细：超轻
• 标题 3 文本颜色：#000000
• 标题 3 文字大小：4vw（手机）、3vw（平板电脑）、2vw（桌面）
• 标题 3 文本行高：圆形为 1.9em，椭圆形为 3em

间距

要使用此模块创建形状，我们将在间距设置中添加一些自定义边距和填充值。

• 左边距：5vw
• 右边距：-5vw
• 顶部填充：17vw（手机）、20vw（平板电脑）、15vw（桌面）
• 底部填充：17vw（手机）、20vw（平板电脑）、15vw（桌面）

边界

我们通过在每个角上添加“100vw”，使用圆角将正方形变成圆形。

盒子阴影

为了创造一些深度，我们将添加一个微妙的框阴影。

• 框阴影模糊强度：100px
• 阴影颜色：rgba(0,0,0,0.12)

克隆文本模块 4 次

现在我们已经完成了对第一个文本模块的修改，我们可以继续克隆它四次。 将两个重复项放在第二列中。

修改重复 #1

间距

继续修改第一个副本的间距设置。

• 最高利润率：20vw
• 左边距：-5vw
• 右边距：5vw

修改重复 #2

背景颜色

接下来打开第二个副本并更改背景颜色。

• 背景颜色：rgba(255,248,209,0.92)

间距

也修改间距设置。

• 最高利润率：-5vw

修改重复 #3

背景颜色

然后，打开第三个副本并更改背景颜色。

• 背景颜色：rgba(219,255,223,0.95)

间距

接下来修改间距设置。

• 最高利润率：-5vw
• 左边距：-5vw
• 右边距：5vw

修改重复 #4

间距

也打开最后一个副本并添加一些负上边距以完成设计。

• 最高利润率：-5vw

让我们开始重新创建示例 #2

添加新部分

进入第二个例子！ 向您的页面添加一个新部分。

添加第 1 行

列结构

继续使用以下列结构添加新行：

添加文本模块

添加 H2 内容

我们需要的第一个模块是文本模块。 输入您选择的一些 H2 含量。

H2 文本设置

然后，转到设计选项卡并修改 H2 文本设置。

• 标题 2 字体：Poppins
• 标题 2 文本对齐：居中
• 标题 2 文本颜色：#333333
• 标题 2 文字大小：7vw（手机和平板电脑），4vw（桌面）

添加分频器模块

能见度

在文本模块正下方添加一个分隔线模块。 确保启用了“显示分隔线”选项。

颜色

然后，转到设计选项卡并修改分隔线颜色。

• 颜色：#333333

浆纱

也可以调整大小设置。

• 分隔线重量：5px
• 宽度：12%
• 模块对齐：居中

添加第 2 行

列结构

继续使用以下列结构向该部分添加新行：

背景颜色

尚未添加任何模块，打开行设置并添加白色背景色。

• 背景颜色：#ffffff

浆纱

接下来转到大小设置并允许行占据屏幕的整个宽度。

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

间距

添加一些自定义边距和填充值，以优化所有屏幕尺寸的设计。

• 最高利润率：2vw
• 底边距：2vw
• 顶部填充：10vw（手机和平板电脑），5vw（桌面）
• 底部填充：10vw（手机和平板电脑），5vw（桌面）
• 左填充：2vw（手机和平板电脑），20vw（桌面）
• 右填充：2vw（手机和平板电脑），20vw（桌面）

盒子阴影

我们也使用了一个微妙的盒子阴影。

• 框阴影模糊强度：50px
• 阴影颜色：rgba(0,0,0,0.07)

自定义 CSS

最后但并非最不重要的一点是，通过向高级选项卡中的主要元素添加一个 CSS 代码行，将两列彼此相邻。

display: flex;

将 Blurb 模块添加到第 1 列

选择图标

我们现在可以开始添加模块了！ 我们在第 1 列中唯一需要的模块是 Blurb 模块。 选择您选择的图标。

渐变背景

然后，添加渐变背景。

• 颜色 1：#7b28ef
• 颜色 2：#29b6e5
• 梯度方向：142度

图标设置

接下来修改图标设置。

• 图标颜色：#ffffff
• 图标位置：顶部
• 使用图标字体大小：是
• 图标字体大小：5vw（手机和平板电脑），4vw（桌面）

浆纱

并更改大小设置。

• 宽度：48%（手机和平板电脑），78%（桌面）

间距

我们还添加了一些自定义边距和填充值，以优化所有屏幕尺寸的设计。

• 最高利润率：2vw（电话）
• 顶部填充：8.5vw（手机）、9vw（平板电脑）、6vw（桌面）
• 底部填充：3vw（手机）、5vw（平板电脑）、4vw（桌面）

边界

接下来通过将“100vw”添加到边框设置中的每个角将模块变成一个圆圈。

盒子阴影

我们也添加了一个框阴影。

• 框阴影垂直位置：10px
• 框阴影传播强度：5px
• 阴影颜色：rgba(2,185,252,0.35)

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

添加H3内容

进入第二列！ 我们需要的第一个模块是标题文本模块。 添加一些H3内容。

H3 文本设置

然后，转到设计选项卡并修改 H3 文本设置。

• 标题 3 字体：Poppins
• 标题 3 文字大小：4vw（手机）、3vw（平板电脑）、2vw（桌面）

间距

接下来添加一些自定义间距值。

• 上边距：0vw（手机），3vw（平板电脑和台式机）
• 左边距：-20vw（手机和平板电脑），0vw（桌面）
• 右边距：0vw
• 底部填充：2vw（手机和平板电脑），1vw（桌面）
• 左填充：5vw（手机和平板电脑），2vw（桌面）

边界

随着左边框。

• 左边框宽度：5px
• 左边框颜色：#f4f4f4
• 左边框样式：双

将分隔模块添加到第 2 列

显示分隔线

我们需要的第二个模块是分频器模块。 确保启用了“显示分隔线”选项。

• 显示分隔线：是

颜色

然后，转到设计选项卡并更改分隔线颜色。

• 颜色：#f4f4f4

样式

接下来在样式设置中更改分隔线样式。

• 分隔线样式：双

浆纱

继续修改大小设置中的不同选项。

• 分隔线重量：5px
• 高度：0px

间距

也可以使用间距值。

• 左边距：-20vw（手机和平板电脑），0vw（桌面）

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

添加内容

第二列中我们需要的下一个模块是另一个文本模块。 添加一些选择的正文内容。

文字设置

然后，转到设计选项卡并修改文本设置。

• 文字大小：2vw（手机）、1.7vw（平板电脑）、0.8vw（桌面）
• 文本方向：左

间距

也可以使用间距值。

• 最高利润率：0vw
• 左边距：-20vw（手机和平板电脑），0vw（桌面）
• 右边距：0vw
• 顶部填充：3vw（手机和平板电脑），2vw（桌面）
• 左填充：5vw（手机和平板电脑），2vw（桌面）

边界

并添加左边框。

• 左边框宽度：5px
• 左边框颜色：#f4f4f4
• 左边框样式：双

将按钮模块添加到第 2 列

添加副本

第二列中我们需要的下一个也是最后一个模块是按钮模块。 添加一些副本。

按钮设置

然后，转到设计选项卡并更改按钮设置。

• 为按钮使用自定义样式：是
• 按钮文字大小：2.5vw（手机）、2vw（平板电脑）、1vw（桌面）
• 按钮文字颜色：#4f77e8
• 按钮边框宽度：1px
• 按钮边框颜色：#4f77e8

• 按钮边框半径：1px
• 按钮字体： Poppins

间距

还要修改间距值。

• 上边距：4vw（手机和平板电脑），2vw（桌面）
• 左边距：-20vw（手机和平板电脑），0vw（桌面）

克隆行两次

现在我们已经完成了对行及其所有模块的修改，我们可以克隆它两次。

更改图标

确保更改了两个 Blurb 模块的图标。

更改渐变背景

还要修改渐变背景。

• 颜色 1：#ff2885
• 颜色 2：#d6ac24

• 颜色 1：#70ff1e
• 颜色 2：#2699ff

更改框阴影颜色

将框阴影颜色与新的渐变背景相匹配。

• 阴影颜色：rgba(255,208,2,0.37)

• 阴影颜色：rgba(42,255,0,0.37)

更改按钮边框和文本颜色

并通过更改按钮边框和文本颜色来完成设计。

• 按钮文字颜色：#e96c54
• 按钮边框颜色：#e96c54

• 按钮文字颜色：#4dcb93
• 按钮边框颜色：#4dcb93

免费下载流动服务部分

要使用免费移动服务部分，您首先需要使用下面的按钮下载它们。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

预览

现在我们已经完成了所有步骤，让我们最后看看这两个示例的移动结果。

示例#1

示例#2

最后的想法

在这篇文章中，我们向您展示了如何仅使用 Divi 的内置选项在移动设备上展示服务的两种创造性方法。 我们希望这种移动优先的方法也能激发您的创造力。 如果您有任何问题或建议，请务必在下方评论区留言！