如何使用 Divi 创建移动优先设计

已发表: 2019-02-22

许多网站从移动设备获得了大量访问者。这导致了您的设计是否针对较小的屏幕尺寸进行了充分优化的问题。借助 Divi，专为桌面体验而打造的设计最终也能立即响应。但仅仅因为某些东西具有响应性并不意味着它也被优化了。

如果移动设备是您的主要访问者来源，那么从移动设备的角度而不是桌面设备的角度开始设计和构建确实会有所帮助。在这篇文章中，我们将向您展示如何做到这一点。在经历了一些您应该记住的提示和技巧之后，我们还将从头开始重新创建一个示例，将这些提示考虑在内。

让我们开始吧！

预览

如前所述，我们将首先介绍一些提示和技巧。之后，我们将从头开始重新创建一个使用这些技巧的示例。让我们来看看结果。

移动的

移动优先

桌面

移动优先

方法

订阅我们的 YouTube 频道

1. 添加新页面后立即切换到移动视图

添加新页面后，您需要做的第一件事是立即切换到移动视图。这将使您能够创建面向移动且准确的设计。

移动优先

2. 为每个设计元素启用响应式选项并首先修改移动值

一旦您开始设计您要进行的任何设计，您将需要为设计元素启用响应式选项。这包括但不限于文本大小、填充和边距。您将添加的第一个值将是移动值（而不是桌面值），以确保首先针对移动优化设计。

移动优先

3. 删除列之间的默认空间并在需要时手动添加填充

要创建更多水平空间，还建议删除列之间的所有默认自定义填充。如果需要，您可以随时将填充手动添加到每个列或设计元素，并自行选择您想要的距离。

移动优先

4. 将 2 或 3 列彼此相邻放置以创建水平设计

Divi 中的响应式结构是垂直定向的。这意味着模块和列出现在彼此下方。然而，这需要更多的垂直滚动。根据您所从事的设计，创建更横向的流程确实会有所作为。

移动优先

5. 沿途或之后修改桌面和平板电脑视图

即使您是为移动优先目的而设计的，保持其他视图的顺序也很重要。每个设计元素中包含的响应式选项将帮助您实现这一目标。您可以选择在之后或整个设计过程中修改这些值。

让我们开始重新创建示例！

添加新部分

打开一个新页面，切换到移动视图并添加一个新部分以开始使用。

移动优先

添加第 1 行

列结构

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

移动优先

将文本模块添加到行

添加 H2 内容

在行的列中添加一个文本模块并输入一些 H2 标题内容。

移动优先

H2 文本设置

然后，转到标题文本设置并更改标题的外观。

标题 2 字体：Didact Gothic
标题 2 文本对齐：居中
标题 2 文本颜色：#333333
标题 2 文字大小：5.5vw（手机）、5vw（平板电脑）、2vw（桌面）

移动优先

将分隔模块添加到行

能见度

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

显示分隔线：是

移动优先

颜色

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

颜色：#333333

移动优先

浆纱

还要修改大小设置。

宽度：48%
模块对齐：居中

移动优先

添加第 2 行

列结构

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

移动优先

背景颜色

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

背景颜色：#ffe69e

移动优先

第 2 列背景颜色

还将背景颜色添加到该行的第二列。

第 2 列背景颜色：#ffd65b

移动优先

结盟

然后，更改行对齐方式。

行对齐方式：左

移动优先

浆纱

接下来打开大小设置。在这里，我们要删除列之间的所有默认空间。我们还为列使用自定义宽度，以使其在桌面上看起来不错。

使用自定义宽度：是
单位：PX
自定义宽度：700px
使用自定义装订线宽度：是
天沟宽度：1
均衡柱高：是

移动优先

间距

继续转到间距设置并手动添加一些自定义边距和填充值。

最高利润率：5vw
底边距：5vw
顶部填充：0px
底部填充：0px
第 1 列顶部填充：10vw（手机）、8vw（平板电脑）、4vw（桌面）
第 1 列底部填充：10vw（手机）、8vw（平板电脑）、4vw（台式机）

移动优先

边界

也向该行添加一些圆角。

右上角：10px
右下角：10px

移动优先

盒子阴影

并给它一个微妙的盒子阴影。

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

移动优先

自定义 CSS

最后但并非最不重要的一点是，我们将在较小的屏幕尺寸上将列彼此相邻放置，以确保我们充分利用我们拥有的水平空间。转到高级选项卡并向主元素添加一行 CSS 代码。

display: flex;

移动优先

将文本模块添加到第 1 列

添加H3内容

是时候开始添加模块了！将标题文本模块添加到第一列并输入一些 H3 内容。

移动优先

H3 文本设置

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

标题 3 字体：Didact Gothic
标题 3 字体粗细：粗体
标题 3 文本对齐：居中
标题 3 文本颜色：#ee6f49
标题 3 文字大小：4vw（手机）、3vw（平板电脑）、1.5vw（桌面）

移动优先

将分频器模块添加到第 1 列

能见度

接下来添加一个分隔模块。确保启用了“显示分隔线”选项。

显示分隔线：是

移动优先

颜色

然后，更改分隔线的颜色。

颜色：#ffffff

移动优先

浆纱

随着尺寸设置。

分隔线重量：4px
宽度：30%
模块对齐：居中

移动优先

间距

也向模块添加一些自定义上边距。

上边距：4vw（手机）、2vw（平板电脑）、1.5vw（手机）

移动优先

将按钮模块添加到第 1 列

添加副本

第一列中所需的下一个也是最后一个模块是按钮模块。输入一些副本。

移动优先

结盟

然后转到设计选项卡并更改按钮对齐方式。

按钮对齐：居中

移动优先

按钮设置

在按钮设置中修改按钮的外观。

为按钮使用自定义样式：是
按钮文字大小：3vw（手机）、2vw（平板电脑）、1.5vw（桌面）
按钮文字颜色：#ffffff
按钮背景颜色：#ee6f49
按钮边框宽度：0px
按钮字体：Didact Gothic
字体粗细：粗体

移动优先

将图像模块添加到第 2 列

上传图标

我们在第 2 列中需要的唯一模块是图像模块。您可以使用您选择的任何图像，但如果您想使用本示例中使用的完全相同的图标，您可以转到家具店布局包并在文章末尾下载它们。

移动优先

结盟

然后，转到设计选项卡并更改图像对齐方式。

图像对齐：居中

移动优先

克隆行 #2

完成对行的修改后，您可以继续克隆它。

移动优先

更改行背景颜色

我们需要对这个副本进行一些更改，从行背景颜色开始。

背景颜色：#8ee5cf

移动优先

删除第 2 列的背景颜色

继续删除第 2 列的背景颜色。

移动优先

添加第 1 列背景颜色

我们改为向第一列添加背景颜色。

第 1 列背景颜色：#47e5bd

移动优先

更改列中的模块

我们还为模块切换列。

移动优先

更改图像模块中的图标

然后，更改图像模块中的图标。

移动优先

将滤镜添加到图像模块

并通过更改过滤器设置中的色调使其与新的行和列背景颜色匹配。

色相：65度

移动优先

更改行对齐方式

接下来更改行对齐方式。

行对齐：右

移动优先

更改行边框

随着圆角。

左上角：10px
左下角：10px

移动优先

更改第 2 列中文本模块的文本颜色

我们还在第 2 列中为文本模块使用了另一种文本颜色。

标题 3 文本颜色：#7b9710

移动优先

更改按钮背景颜色

我们对按钮背景使用相同的颜色。

按钮背景颜色：#7b9710

移动优先

克隆两行

现在我们有了行的两边，我们可以根据需要克隆它们，并按顺序放置它们。

移动优先