Responsive Design

响应式设计

现代网站需要适应各种设备尺寸，Elementor 为响应式设计提供了便捷的工具。

移动端编辑基础

切换设备模式：

• 位置：编辑器底部，有 Desktop（桌面）、Tablet（平板）、Mobile（移动端）三个图标。
• 作用：切换后，可以针对特定设备进行设计和调整。

特定设备设置：

• 字体大小、边距、布局等，可以为不同设备单独设置。
• 在相应的设置项旁边，如果看到一个设备图标，表示该属性支持响应式设置。

在设备上隐藏元素

Visibility（可见性）设置：

• 位置：在元素的“Advanced”选项卡下，找到“Responsive”（响应）部分。
• 设置方法：开启“Hide On Desktop”（在桌面上隐藏）、“Hide On Tablet”（在平板上隐藏）或“Hide On Mobile”（在移动设备上隐藏）。

使用场景：

• 在移动设备上隐藏大型图片或视频，提升加载速度。
• 针对不同设备展示不同的内容，提高用户体验。

响应式控制

调整布局：

• Column Ordering（列顺序）：在移动端，Columns 会默认堆叠。可以在“Advanced”选项卡的“Responsive”中调整“Reverse Columns”（反转列）选项。
• 调整列宽度：为不同设备设置 Columns 的宽度比例，优化布局。

自适应字体和图片：

• 字体大小：为不同设备设置合适的字体大小，确保可读性。
• 图片尺寸：根据设备尺寸，使用不同分辨率的图片，优化加载性能。