本文介绍Elementor响应式如何设置和使用，响应式是目前 web 设计主流技术，Elementor Page Buider 也是一款基于 WordPress 的响应式页面编辑器。能够帮助你快速适配不同的终端展示效果。
高清视频请转到B站观看→
Elementor响应式断点(BreakPoints)设置
什么是响应式断点(BreakPoints)？
通俗一点来说响应式断点(BreakPoints)就是响应不同终端设备屏幕尺寸的宽度。比如手机屏幕的尺寸大概 360px，平板电脑的屏幕尺寸大概 1024px，台式电脑屏幕尺寸大概 1024px。通过识别这些断点去自动响应元素的一些样式，来适配不同大小屏幕尺寸的显示效果，以达到一个最佳的浏览体验。
Elementor 默认响应式的断点
Elementor 预设了三个默认的响应断点，分别是Desktop（强制默认），我们在任意编辑视图下通过顶部的工具栏可以查看。 鼠标放点击不同的终端图标可以切换编辑窗口的响应式布局，然后编辑对应断点下的元素样式。
在编辑元素样式的时候，需要注意⚠️，只有选项设置标题旁边带有响应式标志的选项，才支持在不同断点设置不同的内容，负责修改之后所有的断点都会被修改。通过点击这个小标志可以切换断点进行设置。
比如在字体设置中，字体的大小支持响应式修改，但是字体的重量、变体等就不支持响应式修改。你可以自己尝试在自己的页面中对一些元素的样式在不同断点进行修改，然后查看最终的效果。
如何自定义 Elementor 响应式断点
你可以进入 Elementor 站点设置 (Site Settings)，然后进入布局设置（layout），在布局设置中有个断点设置（BreakPoints）点开就可以添加新的断点，还可以修改断点的像素大小。
这里的像素代表断点的最大尺寸，如果超过这个像素，会自动响应更大断点的终端。比如Mobile Portrait设置为 767px，那么一旦终端屏幕尺寸小于等于 767px，那么显示的样式就会切换。
修改之后页编辑窗口需要重新加载。加载之后在顶部的响应式工具就会显示你设置的断点。
断点的设置建议使用默认的 3 个断点即可，基本满足日常的访问需求，如果设置的断点比较多，那么响应式的维护工作也会增加。如果不是有特殊的终端展示需求的，不建议再增加响应式断点。
如何使网站页面在不同终端断点响应不同的样式和布局
1、不同断点的 Elementor元素样式编辑
Elementor元素提供可以在不同终端设置的项目有很多，就一个标题而言，我们可以在不同终端设置其文字大小，外距和内距。
元素修改编辑的项目旁边只要有响应式设置标志，就代表该设置可以在不同终端设置不同的值。
如果没有则代表该设置项目只能设置一次，不能实现三个终端不同的效果。
大部分元素的背景也支持不同终端上传不同的图片，但是不支持不同终端使用不同的背景颜色。
文本的对其方式也可以实现不同终端设置不同。
在响应式的使用过程中你可以仔细观察哪些设置选项可以实现不同终端不同效果，并利用这些特点来帮助你实现页面制作和设计的目标。
2、不同断点的全局样式修改
3、不同断点的容器设置
4、Elementor 元素在不同断点的可见性
以上便是Elementor响应式布局设置的详解内容，更多更加详细的Elementor内容推荐阅读我整理的《Elementor教程》
