使您的Elementor网站更具移动友好性

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

Google一直使用移动页面加载速度作为任何网站搜索排名的关键因素。 这主要是因为全球Web流量的一半以上来自移动流量。

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

• 什么是Elementor的自适应网站设计
• 如何调整“移动设备”，“桌面”和“标签”设置
• 调整手机显示屏中的标题
• 调整移动的填充或边距
• 水平创建每一列，它将在所有设备上进行出色的调整
• 根据移动/桌面视图更改背景图片
• 更改桌面/移动视图上任何部分的可见性
• 更改列顺序
• 创建替代部分
• 调整列宽
• 结论

什么是Elementor的自适应网站设计

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

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

Elementor 页面构建器的响应式布局工具从头开始构建您的网站设计 借助这些移动响应工具，您可以调整网站布局的任何角落，尤其是排版、填充、边距和移动对齐。 此外，您将能够在移动设备上更改列设置和顺序。

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

1. 检查“标题”在移动屏幕上是否看起来太大。
2. 检查内容的填充或内容侧面的空白
3. 检查页面列的对齐方式，看起来如何完美； 居中，向右或向左
4. 检查列顺序（如果它们以正确的顺序出现），或者您需要对其进行更改。

现在，让我们更深入地挖掘并发现如何使用Elementor Page builder进行处理。

如何调整“移动设备”，“桌面”和“标签”设置

几乎所有可编辑的功能都可以选择调整“移动”，“桌面”和“标签”设置。 如果您点击菜单底部的响应模式

调整手机显示屏中的标题

有时，我们希望在桌面站点上使用大胆醒目的标题，并且在桌面显示器上看起来非常好，但是当您打开“移动”视图时，标题占据了整个屏幕，看起来不太合适。

您可以在标签和移动设备上调整任何文本元素的文本大小。 您还可以为移动标题设置不同的文本大小，这些标题在移动屏幕上看起来不错，并且可以更好地适合屏幕。 在此演示页面中，我创建了一个标题，该标题在桌面站点上看起来不错，而在移动屏幕上则占据了整个屏幕。

如果单击标题列的编辑选项，则可以进入排版部分，在其中可以调整标题大小，该大小在台式机和移动屏幕上看起来都不错。 我可以分别控制两者。 对于我的桌面网站视图，标题尺寸为49px，但在“移动”视图中，标题尺寸不适合

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

调整移动的填充或边距

调整填充时，建议不要使用“像素”中的值，而应使用EM或百分比中的设置值，因为这将使尺寸相对于整个屏幕尺寸保持不变。

您会看到我们已经使用了左右70px的填充，在桌面网站上看起来不错； 但是，此设置的移动视图是一团糟。

我们可以将每一侧的填充重新调整为17像素，然后证明完全正确。

另外，您可以将整列设置为750像素，在此处您的内容将显示在一个框中，而无需在桌面视图或移动视图上都调整屏幕； 它将自动调整框中的内容。

水平创建每一列，它将在所有设备上进行出色的调整

一旦设计者最喜欢水平创建列，就可以复制这些部分并节省时间。 一次创建一个部分，然后进行重用以节省时间。

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

一些背景图片在桌面视图上看起来不错，但是可能是图片看起来不如手机屏幕上的大。 因此，请创造性地思考并在移动屏幕上选择其他图像。 要选择其他移动视图，请单击部分>样式选项卡>单击设备图标，然后选择移动视图。 现在，无论您选择哪种图像，它都只会显示在移动视图上。

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

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

有时，我们将内容或图像显示在两个或三个部分或不同的列中，但我们不希望在Mobile上显示它们。 这就是为什么Elementor可以隐藏您不希望在移动视图中显示的部分的原因。

转到>区域设置>高级>响应。您将看到不同的可能性或视觉偏好； 您可以根据自己的喜好在桌面上隐藏该部分，在标签上隐藏或在移动设备上隐藏。

更改列顺序

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

创建替代部分

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

调整列宽

在移动视图上查看时，所有列部分的宽度均为100％。 但是，可以根据Mobile上的列宽更改宽度。 如果有两列，则可以将每个部分的最大宽度设置为50％。

结论

Elementor具有所有强大的功能，可以控制所有屏幕尺寸的响应列布局。

现在，Elementor页面构建器具有专有功能，使用户可以轻松创建易于移动的网站。 希望您发现我的文章有用，并获得了有关如何使用Elementor创建响应式网站的所有答案。