EP26. “手机端设计优化”
🔒 登录后可标记已读- 约 75% 的访客用手机浏览你的网站——前面 25 讲全在桌面版调整，如果手机版没做好，等于白忙一场
- 该优化网站在手机和平板上的显示效果了
- 主要调整：Hero 区域图片位置、主题区域改单栏排列、汉堡菜单样式、黏性导航，以及平板端的检查
所需工具
WordPress + Elementor（移动端视图）
重点内容
切换到移动端视图
在 Elementor 编辑器底部找到设备图标：Desktop / Tablet / Mobile。
点击 Mobile（手机）图标，进入手机端编辑模式。
📌 在手机端做的调整只影响手机显示，不会影响桌面版。
主要调整项目
1. Hero 区域：产品图位置调整
手机端产品图可能位置偏移或显示不自然。
- 点击产品图 → Advanced → Margin
- 将图片的 Top Margin 设为 -50px（负值）
- 这把图片往上拉一点，在小屏幕上视觉更平衡
2. 主题区域：改为单栏排列（上图下文）
桌面版是左右两栏（图片 | 文字），手机端需要改为上下单栏（图片在上，文字在下）。
针对每个主题区域（Hikers / Travelers / Gym goers）：
- 在手机端视图里，点击该 Section。
- 调整栏位顺序：图片栏在上，文字栏在下。
- Elementor 有「Reverse Column」或栏位顺序设置，在 Section / Column 的 Advanced 设置里操作。
- 三个主题区域都要做。
3. 黏性导航（Sticky Header）检查
确认手机端滚动时导航栏仍然固定在顶部。
如果没有显示，回到 Customize → Header 确认 Sticky Header 已经针对手机端也启用。
4. 汉堡菜单样式
手机端导航会变成汉堡菜单（三条横线图标）。
点开菜单时的样式设置：
- 菜单背景色：白色
- 菜单文字颜色：黑色
- 确保在 Customize 或 Sydney 主题设置里调整 Mobile Menu 样式
切换到平板端视图
点击 Tablet（平板）图标，检查平板端显示效果。
大部分手机端调整也会同步影响平板，逐一检查各区域，有问题再单独调整。
点击 Update 保存所有修改。
[截图：手机端最终显示效果，Hero 图片位置、单栏主题区域和汉堡菜单]
常见误区
- 不要只检查桌面版就认为网站完成了，手机端和平板端必须分别查看。
- 手机端的设置改动不会自动同步到桌面版，但桌面版的改动有时会影响手机端——改动后每次都要切换视图检查。
- 汉堡菜单弹出时背景如果不是白色，文字可能很难读，必须手动设置。
行动步骤
- 在 Elementor 底部切换到 Mobile 视图。
- Hero 区域产品图 Margin Top 设为 -50px。
- 三个主题区域（Hikers / Travelers / Gym goers）改为上图下文单栏排列。
- 确认 Sticky Header 在手机端生效。
- 在 Customize 里将汉堡菜单背景设白色、文字设黑色。
- 切换到 Tablet 视图，检查平板端显示。
- Update 保存，用手机实际访问网站确认效果。
Sources
Udemy（课程 transcript）：
- The Completed Digital Marketing Guide 27 in 1 — Section 3, Lecture 26 Mobile Design