让您的 Elementor 网站更加适合移动设备响应

移动响应网站是任何在线业务的重要组成部分。

谷歌一直将移动页面加载速度作为任何网站搜索排名的关键决定因素。 这主要是因为全球一半以上的网络流量来自移动流量。

因此，移动响应网站对于您的网站健康和在 Google 搜索引擎中获得更好的排名是不可避免的。 在本文中，我们将重点介绍如何使用 Elementor 页面构建器移动响应式网站

• Elementor 的响应式网站设计是什么
• 如何调整移动设备、桌面和选项卡设置
• 调整移动显示中的标题
• 调整移动设备的内边距或边距
• 水平创建每一列，它将在所有设备上完美调整
• 根据移动/桌面视图更改背景图像
• 更改桌面/移动视图上任何部分的可见性
• 更改列顺序
• 创建替代部分
• 调整列宽
• 结论

Elementor 的响应式网站设计是什么

响应式布局通过根据每个屏幕尺寸自动缩放所有内容来创新。 它会自动调整移动屏幕上的图像和内容的大小，以便您的观看者可以轻松查看您的内容。

我们大多数人都会购买一个声称具有移动响应能力的主题； 然而，当您的主题设计在移动屏幕上完全崩溃时，事情可能会令人沮丧。

为了克服这种情况，我们提出了一种移动响应式解决方案，您可以使用Elementor 页面构建器的响应式布局工具从头开始构建网站设计。 借助这些移动响应工具，您可以调整网站布局的任何角落，尤其是版式、填充、边距和移动对齐。 此外，您还可以在移动设备上更改列设置和顺序。

现在，您可以通过切换到移动视图模式来编辑页面的移动设置，并选中以下选项以根据移动布局进行调整。

1. 检查是否有任何标题在移动屏幕上看起来太大。
2. 检查内容的填充或内容两侧的空间
3. 检查页面栏对齐情况，看起来是否完美； 居中、靠右或靠左
4. 检查列顺序，如果它们以正确的顺序出现，或者您需要更改它。

现在，让我们更深入地挖掘并了解 Elementor 页面构建器的工作原理。

如何调整移动设备、桌面和选项卡设置

几乎所有可编辑功能都可以选择调整移动设备、桌面和选项卡设置。 如果您单击菜单底部的响应模式

调整移动显示中的标题

有时我们希望在桌面网站上有一个粗体且突出的标题，并且它在桌面显示上看起来非常好，但是当您打开移动视图时，标题会占据整个屏幕并且看起来不适合。

您可以调整选项卡和移动设备上任何文本元素的文本大小。 您还可以为移动标题设置不同的文本大小，使其在移动屏幕上看起来很棒，并以更好的方式适合屏幕。 在此演示页面中，我创建了一个在桌面网站上看起来很棒的标题，而在移动屏幕上它占据了整个屏幕。

如果我单击标题列的编辑选项，我可以进入版式部分，在其中可以调整标题大小，使其在桌面和移动屏幕上看起来都很好。 我可以分别控制两者。 对于我的桌面站点视图，标题大小为 49px，但在移动视图上，它不适合

要重新调整，我将单击移动响应模式 > 样式 > 版式 > 将 px 大小调整为 30，这样可以轻松适应移动屏幕。

调整移动设备的内边距或边距

调整padding时，建议不要使用Pixels中的值，而是使用EM或百分比中的设置值，因为它会保持相对于整个屏幕尺寸的尺寸。

你可以看到我们使用了左右内边距为 70px，这在桌面网站上看起来很好； 然而，此设置的移动视图完全是一团糟。

我们可以将每边的内边距重新调整为 17 px，这样就完全没问题了。

或者，您可以将整列设置设置为 750 px，这样您的内容将显示在一个框中，而无需在桌面或移动视图上调整屏幕； 它会自动调整框中的内容。

水平创建每一列，它将在所有设备上完美调整

一旦您水平创建列（设计师最喜欢的），您就可以复制这些部分并节省时间。 一次创建一个部分，如果效果良好的话可以重复使用它以节省时间。

根据移动/桌面视图更改背景图像

某些背景图像在桌面视图上看起来不错，但图像可能不会像在移动屏幕上看起来那么大。 因此，创造性地思考并在移动屏幕上选择不同的图像。 要选择不同的移动视图，请单击部分 > 样式选项卡 > 单击设备图标并选择移动视图。 现在，无论您选择哪个图像，它都只会出现在移动视图上。

更改桌面/移动视图上任何部分的可见性

您还可以根据设备控制任何部分或列的可见性。

有时，我们会在两三个部分或不同的列中显示内容或图像，但我们不喜欢在移动设备上显示它。 这就是为什么 Elementor 可以隐藏您不喜欢在移动视图上显示的部分。

转到 > 部分设置 > 高级 > 响应式，您将看到不同的可能性或视觉偏好； 您可以根据您的喜好隐藏桌面上的部分、隐藏在选项卡上或隐藏在移动设备上。

更改列顺序

您还可以从设置部分更改列顺序。 去; 部分设置>高级>响应式>反转列，然后单击是。

创建替代部分

在移动和桌面视图上创建替代部分。 有时，滑块部分在移动设备上看起来不像在桌面上那么有用，因此您可以使用任何其他部分而不是使用滑块部分。 您可以通过转到“高级”选项卡 > 打开/关闭您不想显示的部分的可见性并在其上添加备用图像来执行此操作。

调整列宽

当您在移动视图上查看时，所有列部分都会获得 100% 宽度。 但是，宽度可以根据移动设备上的列宽度进行更改。 如果有两列，则可以将每个部分的最大宽度设置为 50%。

结论

Elementor配备了所有强大的功能来控制所有屏幕尺寸的响应式列布局。 它允许您根据视图模式选择重新调整每个部分。 保持一个适合移动设备的网站是不可避免的，因为谷歌算法认为对移动设备友好的网站排名最高。 响应式网站不仅对于获得更好的 SEO 至关重要，而且还需要获得更多流量，因为超过 80% 的流量来自移动浏览。

现在，Elementor 页面构建器具有独特的功能，允许用户轻松创建适合移动设备的网站。 希望我的文章对您有用，并获得有关如何使用 Elementor 创建响应式网站的所有答案。