本文介绍Elementor响应式如何设置，Elementor Page Buider 是一款响应式页面编辑器。能够帮助你快速适配不同的终端展示效果。
高清视频请转到B站观看→
Elementor响应式断点(BreakPoints)设置
Elementor响应式断点设置在Elementor的Site Setting里面的Layout里面进行设置。
默认的断点有2个Mobile和Tablet对应的默认断点分别是767和1024像素，这是根据实际终端设置的宽度进行设置的。一般情况下不需要修改。
另外你还可以添加其它终端断点，Elementor总共提供6个终端断点。
实际情况下你不需要设置这多，如果设置的断点较多，意为的工作量会变大，另外我自己亲测，有些断点设置其实是不生效的。
所以建议是一般使用默认的设置即可，内容上去做一些优化和调整，确保每个终端看上去的效果都相对美观。
进入Elementor页面编辑的响应式模式
当我们需要对页面进行响应式优化时，可以进入Elementor的响应式模式
进入之后，编辑窗口顶部会出现终端切换的工具栏。
你可以切换不同的终端进行编辑。
Elementor元素可以在不同终端修改的内容
Elementor元素提供可以在不同终端设置的项目有很多，就一个标题而言，我们可以在不同终端设置其文字大小，外距和内距。
元素修改编辑的项目旁边只要有响应式设置标志，就代表该设置可以在不同终端设置不同的值。
如果没有则代表该设置项目只能设置一次，不能实现三个终端不同的效果。
大部分元素的背景也支持不同终端上传不同的图片，但是不支持不同终端使用不同的背景颜色。
文本的对其方式也可以实现不同终端设置不同。
在响应式的使用过程中你可以仔细观察哪些设置选项可以实现不同终端不同效果，并利用这些特点来帮助你实现页面制作和设计的目标。
Elementor元素的响应式可见性设置
在Elementor元素的高级设置中有一个响应式选项设置，它可以设置响应式可见性。
比如某一个元素不想让它在手机端显示，则开启【Hide On Mobile】即可。
这个功能我在做Header的过程中经常用到。思路如下：
这样就做可以实现在不同的终端展示不同的Header Section，可以提升美观效果。
Elementor Secion的响应式反转列
只有在Section中可以设置反转列，反转列的作用可以实现切换到平板或者手机端之后，原本在左边显示的内容会变到右边或者下面。
比如，我在产品列表页面模板时，通常我可能会将产品的侧边栏菜单放在页面的左边，但是当用户切换到手机端时，默认情况下左边的内容是放在上面显示的，这样用户最先看到就是长长的侧边栏目内容，但是我希望用户在手机端最先看到是我的产品目录，那么我就可以使用响应式反转来实现。
以上便是Elementor响应式布局设置的详解内容，更多更加详细的Elementor内容推荐阅读我整理的《Elementor教程》
