专注WordPress外贸建站实用教程,提供基于WordPress的外贸建站服务!
文章分类
文章标签

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教程》

想快速搭建一个完全属于自己的外贸独立站?
本站提供专业的外贸建站服务,如果你不想自己花时间精力搭建网站,可以将你的需求告诉我,我来帮助你搭建一个专业外贸独立站!
微信联系我
Whatsapp联系我
文章分类
文章标签
专注WordPress外贸建站实用教程,提供基于WordPress的外贸建站服务!
外贸建站交流群
广告勿扰
企业微信
文章导航
建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!