帮客户做网站这么多年了，几乎每一个来询价的客户都会问同一个问题：「你们的网页设计服务有没有包括手机版的设计？」
这个问题问得很好：因为现在大多数的访客都是用手机来浏览网站的。如果你的网站只是在电脑上看起来很专业，但是在手机上一打开就排版乱掉，那前面所有的设计工作都可能白费了。
这个问题，Elementor 一个功能就解决了。Elementor 在处理手机版设计这方面是非常的方便简单。更棒的是，对于那些对网站的使用体验有严格要求的客户，Elementor 还可以分开设定手机纵向和横向的显示效果，让网站可以在不同尺寸的屏幕上都能有最好的呈现。
今天这篇文章，我会手把手教你怎么用 Elementor 的响应式设计功能，确保你的网站在手机上也能让网站的访客有更好的使用体验。
什么是响应式设计？
响应式设计（Responsive Design）是指网站可以根据访客使用的设备屏幕大小，自动的去调整网页的版面和内容的显示方式。简单来说就是同一个网站在电脑、平板、手机上打开，都能有适合那个屏幕大小的显示效果。
响应式设计对 SEO 也是有直接影响的。Google 从 2019 年已经开始全面采用「手机优先索引」（Mobile-First Indexing），意思就是说 Google 在评估你的网站手机搜索排名时，是以手机版的内容为主要参考依据。如果你的手机版网页设计显示效果很差，不单单只是会影响到网站的用户体验而已，也可能会影响到网站的 Google 搜索排名哦。
Elementor 的响应式编辑模式
Elementor 的编辑器在顶部会有展示一排设备切换按钮，让你可以随时的切换去不同的设备视图来预览和编辑网页设计的显示效果。Elementor 一共提供了以下几种设备视图：
| 设备视图 | 说明 |
|---|---|
| Desktop（桌面版） | 桌面电脑屏幕的显示效果 |
| Laptop（笔记本电脑版） | 笔记本电脑屏幕的显示效果，默认的编辑模式 |
| Tablet Landscape（平板横向） | 平板电脑横放的显示效果 |
| Tablet Portrait（平板纵向） | 平板电脑竖放的显示效果 |
| Mobile Landscape（手机横向） | 手机横放的显示效果 |
| Mobile Portrait（手机纵向） | 手机竖放的显示效果，最常用的手机浏览方式 |
💡 小贴士：一般用户最常用的是「手机纵向（Mobile Portrait）」这个视图，如果你的时间有限，可以先把这个视图的显示效果处理好，对于网站的大部分访客来说已经是足够的了。
怎么进入手机版设计编辑模式？
操作步骤很简单：
- 登入 WordPress 后台，然后找到“Page (页面)”的列表，并点击“Edit 编辑”以开始编辑页面设计；如果是已经使用过 Elementor 编辑过页面，可以直接点击“Edit with Elementor (使用 Elementor 编辑)” 进入 Elementor 编辑器
- 点击页面上方的“Edit with Elementor (使用 Elementor 编辑)” 进入 Elementor 编辑器 （“Edit with Elementor (使用 Elementor 编辑)”可以直接跳过这个步骤）
- 在编辑器顶部中间找到设备切换图标
- 点击手机图标，切换到 Mobile Portrait（手机纵向）视图
- 右边的预览区会自动变成手机屏幕的比例
- 在这个模式下做的任何调整，只会影响手机版设计的显示，通常都是不会直接改变电脑版的设计
手机版网页设计最常需要调整的 5 件事
1. 字体大小
电脑上看起来合适的字体大小，在手机上可能会太小或者太大。在手机版编辑模式下，点击任何文字元素，然后在左边的设置面板里找到「Typography（字体排版）」，点击“地球的标示图案”选择对应的字体设定（建议使用设定好的全局字体设定，因为当要改动网站的字体大小的时候，不需要一一去点击调整）。
网站全局字体设定操作步骤：
- 点击界面左上角的 Elementor 的 Logo →
- 在下拉菜单找到「Site Settings（站点设置）」并点击 →
- 找到「Typography（全局字体）」→
- 把“系统字体”里找到「Primary」点击“铅笔表示图案” →
- 在下拉设定表单里我们可以根据不同设备来调整字体的大小。
好坏示范：
❌ 差：
电脑版字体大小设为 18px，手机版没有调整，结果手机上文字看起来很拥挤
✅ 好：
手机版字体大小单独设为 14px 或 16px，阅读起来更舒适
2. 列数（Column）调整
电脑版的网页设计我们可以用 3 列或 4 列的排版，但是在手机版网页设计上 3 列并排会让每一列都变得非常窄，如果这个部分的内容是很多的话，内容会看起来很挤、不美观又很难阅读。在手机版设计编辑模式下，把多列的 Section 改成单列显示，让内容垂直排列，阅读体验就会好很多了。
3. 图片大小和位置
有时候在电脑版网页上设计的图片大小和位置，在手机上看会显示得太小或者位置不对。在手机版设计编辑模式下，我们可以单独的去调整图片的宽度、高度、和上下左右的间距。
4. 隐藏某些元素
有一些在电脑版设计上用来装饰的元素，比如大型的背景图案、复杂的动画效果，在手机上不只是没有必要，还有可能会拖慢网站的加载速度。Elementor 可以让你设定某些元素只是在电脑版设计上显示，在手机版设计会自动隐藏起来。
操作步骤：
- 点击你想要隐藏的元素 →
- 在左边设置面板找到「Advanced（进阶）」→
- 找到「Responsive（响应式）」→
- 把 Mobile 的「Hide（隐藏）」打开就完成了。
5. 间距和内边距（Padding & Margin）
电脑版网页设计的间距设定在手机上通常都会显得太大不合适，让页面的左右两旁看起来很空。在手机版设计编辑模式下，我们可以单独的去调整每个 Section 和 Widget 的 Padding 和 Margin，让设计版面在手机上看起来更整齐和更紧凑。
怎么设定手机纵向和横向的不同设计？
这是 Elementor 其中一个很多人都没有善用到的一个进阶功能。
对于那些对网站体验有严格要求的客户，Elementor 是可以让我们去分开设定手机竖版（Portrait）和手机横版（Landscape）的网页设计显示效果；因为手机竖放（9:16）和横放（16:9）的屏幕比例是完全不一样的。手机竖放的显示尺寸上垂直长方形的，显示的尺寸会较长，可以显示的内容比较多；手机横放的显示尺寸上呈正长方形的，这样变成显示的尺寸会高度较短，可以显示的内容变成压缩到了很小，可能需要调整“间距和内边距（Padding & Margin）”或“列数（Column）”来达到更好的显示效果。
如果想要同时让两种方向的屏幕都有最好的网页设计显示效果，就需要我们自己去分开来一一调整了。
操作步骤：
- 点击界面左上角的 Elementor 的 Logo →
- 在下拉菜单找到「Site Settings（站点设置）」并点击 →
- 找到「Layout（布局）」→
- 把 Breakpoint 断点里勾选「Mobile Landscape（手机横向）」就行了。
操作方式和一般的响应式编辑一样，只是在顶部的设备切换按钮里，分别选择 Mobile Portrait 和 Mobile Landscape 来进行单独调整就行了。
💡 小贴士：大部分普通网站是不需要特别去处理横版的设计，Mobile Portrait（手机纵向）处理好就足够了。横版设计主要适合那些对用户体验有非常高要求的网站，比如高端品牌官网或专业的电商网站等等。
完成之后：怎么测试手机版的显示效果？
在 Elementor 编辑器里提供的预览设计显示效果只是作为一个参考，最准确的解决方法其实是用真实（或虚拟真实）的手机来直接做测试，这样我们才能确保网站能在最确定完好的状态下运行。
推荐的测试方法：
1. 发布页面之后，用你自己的手机打开网站的每一个重要页面
2. 检查文字有没有被截断、图片有没有超出屏幕、按钮有没有可以正常点击
3. 同时用两个不同的 Android 和 iOS 的手机来做测试，因为这两个系统的浏览器设定方式有时候会有些微的差别。（如果没有同时拥有两个系统的手机的朋友，可以使用 TestMu AI 这类型的网上模拟真实工具做测试）
4. 用 Google 的 PageSpeed Insight 工具来检查你的网站，它会告诉你 Google 方认为你的手机版网站是否存在问题，但是不一定需要勉强做到完美，手机版其实有 80 分或以上就合格了。
总结：Elementor 响应式设计速查表
现在大多数网站的访客都是用手机浏览网站的，可能你会觉得我很烦，但是重要的事情还是要讲两遍：手机版网页的显示效果不单单只是会影响到网站的用户体验而已，同时也可能会直接影响到网站的 Google 搜索排名。用 Elementor 来处理手机版设计的问题，并不需要写任何代码，我们只需要在编辑器里自由的切换到手机视图或平板电脑视图，然后逐一的去调整就好了。
| 要调整的项目 | 在哪里调整 |
|---|---|
| 字体大小 | 点击文字元素 → Typography → 选择对应的全局字体的设定 |
| 列数调整 | 点击 Section → Column 设置 → 调整手机版列数 |
| 隐藏元素 | 点击元素 → Advanced → Responsive → 隐藏手机版 |
| 间距调整 | 点击 Section / Widget → Advanced → Padding & Margin |
| 纵向/横向设计 | 顶部部切换 Mobile Portrait / Mobile Landscape |
如果你在调整手机版设计的过程中遇到任何问题，欢迎留言告诉我你卡在哪里，我来帮你一起看看。
常见问题解答
不会。大多数 Elementor 的响应式设定是独立的，在手机版编辑模式下做的调整只会影响手机版的显示，电脑版的设计不会被改变。但是还是需要注意有些设定是没有备用响应式设定功能的，那么这个设定调整就会影响到电脑版的显示了。
这通常可能是因为你的 WordPress 主题本身的 CSS 样式和 Elementor 的设定产生了冲突。建议换用 Hello Elementor 或 Astra 这类专门为 Elementor 优化的轻量主题，可以减少这类冲突的情况。
基本的响应式编辑功能（Desktop、Tablet、Mobile）在免费版就可以用了。但是要分开设定手机纵向和横向、以及更多进阶的响应式控制选项，是需要安装 Elementor Pro 版本的。
手机版速度慢通常有两个原因：一是页面上有太多动画和大型图片；二是 Hosting 的服务器响应速度不够快。建议安装 LiteSpeed Cache Plugin 来优化速度，同时搭配一个有 Cache 和 CDN 功能的 Hosting 方案。
