文章分类
新手入门学习建站主机推荐
非常适合外贸新手入门的一款共享主机,非常简洁的管理面板,第一年费低至300元!
文章标签

Elementor响应式设置详解(附视频)

文章导航

本文介绍Elementor响应式如何设置,Elementor Page Buider 是一款响应式页面编辑器。能够帮助你快速适配不同的终端展示效果。

高清视频请转到B站观看→

Elementor响应式断点(BreakPoints)设置

Elementor响应式断点设置在Elementor的Site Setting里面的Layout里面进行设置。

默认的断点有2个Mobile和Tablet对应的默认断点分别是767和1024像素,这是根据实际终端设置的宽度进行设置的。一般情况下不需要修改。

Elementor响应式断点(BreakPoints)设置

另外你还可以添加其它终端断点,Elementor总共提供6个终端断点。

Elementor响应式断点(BreakPoints)设置

实际情况下你不需要设置这多,如果设置的断点较多,意为的工作量会变大,另外我自己亲测,有些断点设置其实是不生效的。

所以建议是一般使用默认的设置即可,内容上去做一些优化和调整,确保每个终端看上去的效果都相对美观。

进入Elementor页面编辑的响应式模式

当我们需要对页面进行响应式优化时,可以进入Elementor的响应式模式

image 44 - Elementor响应式设置详解(附视频) - NUTSWP

进入之后,编辑窗口顶部会出现终端切换的工具栏。

你可以切换不同的终端进行编辑。

image 45 - Elementor响应式设置详解(附视频) - NUTSWP

Elementor元素可以在不同终端修改的内容

Elementor元素提供可以在不同终端设置的项目有很多,就一个标题而言,我们可以在不同终端设置其文字大小,外距和内距。

元素修改编辑的项目旁边只要有响应式设置标志,就代表该设置可以在不同终端设置不同的值。

如果没有则代表该设置项目只能设置一次,不能实现三个终端不同的效果。

image 46 - Elementor响应式设置详解(附视频) - NUTSWP

大部分元素的背景也支持不同终端上传不同的图片,但是不支持不同终端使用不同的背景颜色。

image 53 - Elementor响应式设置详解(附视频) - NUTSWP

文本的对其方式也可以实现不同终端设置不同。

image 54 - Elementor响应式设置详解(附视频) - NUTSWP

在响应式的使用过程中你可以仔细观察哪些设置选项可以实现不同终端不同效果,并利用这些特点来帮助你实现页面制作和设计的目标。

Elementor元素的响应式可见性设置

在Elementor元素的高级设置中有一个响应式选项设置,它可以设置响应式可见性。

比如某一个元素不想让它在手机端显示,则开启【Hide On Mobile】即可。

image 47 - Elementor响应式设置详解(附视频) - NUTSWP

这个功能我在做Header的过程中经常用到。思路如下:

image 48 - Elementor响应式设置详解(附视频) - NUTSWP
image 49 - Elementor响应式设置详解(附视频) - NUTSWP

这样就做可以实现在不同的终端展示不同的Header Section,可以提升美观效果。

Elementor Secion的响应式反转列

只有在Section中可以设置反转列,反转列的作用可以实现切换到平板或者手机端之后,原本在左边显示的内容会变到右边或者下面。

image 50 - Elementor响应式设置详解(附视频) - NUTSWP

比如,我在产品列表页面模板时,通常我可能会将产品的侧边栏菜单放在页面的左边,但是当用户切换到手机端时,默认情况下左边的内容是放在上面显示的,这样用户最先看到就是长长的侧边栏目内容,但是我希望用户在手机端最先看到是我的产品目录,那么我就可以使用响应式反转来实现。

image 51 - Elementor响应式设置详解(附视频) - NUTSWP
image 52 - Elementor响应式设置详解(附视频) - NUTSWP

以上便是Elementor响应式布局设置的详解内容,更多更加详细的Elementor内容推荐阅读我整理的《Elementor教程》

相关内容
2种方法Elementor表单实现电话字段国家代码教程

本教程介绍2种Elementor表单实现电话字段国家代码,默认的Elementor表单电话字段没有国家区号,本教程提供了2个有效的方案,实现根据用户位置自动显示电话号码的国家区号效果。 方案一:Ali Addons For Elementor插件实现表单手机号码国家代码 方案一实现效果如下图,可以根

阅读全文 »
Elementor Popup设置点击连接弹出的2种方法

本文介绍Elementor Popup设置点击连接弹出的2种方法法,在Elementor中创建一个Popup弹出框,我们可以通过多种方式进行点击有弹出设置。 方法一:通过Elementor元素Link的动态标签设置弹出 这种方法仅限于在Elementor编辑中使用,任何带有Link选项的链接都可以进

阅读全文 »
Zapier Webhook 实现询盘提交关键词过滤和邮件转发教程

本文介绍如何使用Zapier Webhook 实现询盘提交关键词过滤和邮件转发教程,将Zapier流程集成到Elementor Form中可以实现表单消息关键词过滤和转发。 此方法适合需要过滤垃圾关键词询盘邮件消息的用户,一般表单安全验证主要是防止机器人提交垃圾信息,但是无法阻止人工发送的垃圾询盘,

阅读全文 »
Elementor的操作记录和修订版本

本文介绍如何借助Elementor的操作记录和修订版本进行Elementor页面恢复操作? 如果你在找古腾堡编辑器的修订版本的操作方法,请阅读《古腾堡编辑器的修订版本》 Elementor目前有2种画布窗口模式,所以我会分别介绍修订版本操作在哪里进入编辑。 如果你是传统的画布窗口 在编辑窗口左侧工具

阅读全文 »
Elementor Floating Buttons移动端全宽不生效

Elementor新出的Floating Buttons功能,发现了Mobile Bar的移动端全宽不生效,这个问题我在本地测试发现所有的Mobile Bar模版的移动端全宽开启都不生效。 根据排查的方法,我也进行了一些的排查工作,发现问题任然存在。 于是通过自定义CSS代码,修复了这个问题。 CS

阅读全文 »
文章分类
新手入门学习建站主机推荐
非常适合外贸新手入门的一款共享主机,非常简洁的管理面板,第一年费低至300元!
文章标签
想快速搭建一个完全属于自己的外贸独立站?
本站提供专业的外贸建站服务,如果你不想自己花时间精力搭建网站,可以将你的需求告诉我,我来帮助你搭建一个专业外贸独立站!
文章导航
文章分类
文章标签
建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!