许多网站从移动设备获得大量访问者。 这就引出了一个问题，即您的设计是否针对较小的屏幕尺寸进行了充分优化。 使用 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（桌面）
将分隔模块添加到行
能见度
在您添加的文本模块正下方，继续添加一个分隔模块。 确保启用了“显示分隔线”选项。
颜色
然后，转到设计选项卡并更改分隔线的颜色。
浆纱
同时修改大小设置。
- 宽度：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内容
是时候开始添加模块了！ 在第一列添加标题 Text Module 并输入一些 H3 内容。
H3 文字设置
然后，转到设计选项卡并修改标题文本设置。
- 标题 3 字体：Didact Gothic
- 标题 3 字体粗细：粗体
- 标题 3 文本对齐：居中
- 标题 3 文本颜色：#ee6f49
- 标题 3 文字大小：4vw（手机）、3vw（平板电脑）、1.5vw（桌面）
将分隔模块添加到第 1 列
能见度
接下来添加一个分隔模块。 确保启用了“显示分隔线”选项。
颜色
然后，更改分隔线的颜色。
浆纱
连同尺寸设置。
- 分隔线重量：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
更改列中的模块
我们还在为模块切换列。
更改图像模块中的图标
然后，更改图像模块中的图标。
将滤镜添加到图像模块
并通过更改过滤器设置中的色调使其与新的行和列背景颜色匹配。
更改行对齐
接下来更改行对齐方式。
更改行边框
与圆角一起。
- 左上角：10px
- 左下角：10px
更改第 2 列中文本模块的文本颜色
我们还在第 2 列中为文本模块使用了另一种文本颜色。
- 标题 3 文本颜色：#7b9710
更改按钮背景颜色
我们使用相同的颜色作为按钮背景。
- 按钮背景颜色：#7b9710
克隆两行
现在我们已经拥有了行的两边，我们可以根据需要多次克隆它们并将它们按顺序放置。
修改重复#1
更改行背景颜色
我们将从更改第一个副本的行背景颜色开始。
- 背景颜色：#ffc9cf
更改列颜色
然后，我们还将修改第 2 列的背景颜色。
- 第 2 列背景颜色：#ffadb6
更改图像模块中的图标
将图像模块中的图标更改为您选择的另一个图标。
将滤镜添加到图像模块
并更改过滤器设置中的色调，使其与新的行和列背景颜色相匹配。
更改文本颜色
我们也在改变文本颜色。
- 标题 3 文本颜色：#f862b0
更改按钮背景颜色
我们使用相同的颜色作为按钮背景。
- 按钮背景颜色：#f862b0
修改副本#2
更改行背景颜色
到下一个也是最后一个副本！ 更改行背景颜色。
- 背景颜色：#b2c4ff
更改列颜色
对第 1 列的背景颜色执行相同的操作。
- 第 1 列背景颜色：#9eb4ff
更改图像模块中的图标
然后，更改正在使用的图标。
将滤镜添加到图像模块
连同图像模块的过滤器设置中的色调。
更改文本颜色
接下来修改Image Module的文字颜色。
- 标题 3 文字颜色：#6287f9
更改按钮背景颜色
并为按钮背景使用相同的颜色。
- 按钮背景颜色：#6287f9
预览
现在我们已经完成了所有步骤，让我们来看看最终的结果。
移动的
桌面
最后的想法
如果您的主要访问者来源来自移动设备，那么针对特定屏幕尺寸优化所有内容非常重要。 使用 Divi，一切都会立即响应。 但仅仅因为某些东西是响应式的，并不意味着它也针对特定的屏幕尺寸进行了优化。 为移动设备设计的另一种方法是从移动优先的角度开始您的设计。 在这篇文章中，我们分享了一些关于如何做到这一点的提示和技巧。 之后，我们重新创建了一个符合这些规则并允许我们创造惊人结果的示例。 如果您有任何问题或建议，请务必在下面的评论部分发表评论！
