南开建站:如何使用Divi创建移动第一设计

2019.07.01 南开建站

153

许多网站都有大量来自移动设备的访问者。这就引出了这样一个问题:您的设计是否为较小的屏幕尺寸进行了足够的优化。有了Divi,一个为桌面体验而构建的设计最终也会立即得到响应。但是,仅仅因为某些东西是有反应的,并不意味着它也是优化的。

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

我们开始吧!南开建站

预览

正如前面提到的,我们将首先介绍一些技巧和技巧。之后,我们将从零开始重新创建一个利用这些技巧的示例。让我们来看看结果。

移动式

image.png

台式机

南开建站

进场

订阅我们的YOUTUBE频道

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

在添加新页面之后,首先要做的是立即切换到移动视图。这将允许您创建一个面向移动和准确的设计。南开建站

南开建站

2.为每个设计元素启用响应选项&首先修改Mobile值

一旦您开始设计您要进行的任何设计,您将希望启用设计元素的响应选项。这包南开建站括但不限于文本大小、填充和页边距。您将添加的第一个值是移动值(而不是桌面值),以确保设计首先为移动优化。

南开建站

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

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

南开建站

4.将2或3列放置在一起,以创建水平设计

Divi的响应结构是垂直导向的.这意味着模块和列出现在彼此下面。然而,这需要更多的垂直滚动。根据您所从事的设计,创建更多的水平流确实会产生不同的效果。

南开建站

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

即使你是为了移动第一目的而设计的,保持其他视图的有序也是很重要的。每个设计元素中包含的响应选项将帮助您完成这一任务。您可以选择在设计之后或整个设计过程中修改这些值。南开建站


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP