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

如何使用Elementor制作部粘性侧边栏?(附视频)

文章导航

本文介绍如何使用Elementor制作部粘性侧边栏,我会通过一个实际的案例来介绍如何在页面中制作和实现粘性侧边栏的效果。

本文基于Elementor的Containner制作,如果你还在使用老板的Section需要将插件升级到最新版本并开启Containner功能。关于Elementor Containner的详细教程你可以阅读我写的文章《Elementor Containner超详细讲解教程》

本站提供Elementor Pro官方正版授权,如有需要可通过页脚二维码联系购买。

这里我用demo002中的产品列表页面作为案例进行讲解和说明。设置页面中左边的侧边栏在页面向下滑动时黏在顶部位置,并且设置一旦产品列表滑动到底部,继续向下滑动时,侧边栏不再固定在顶部。

所以,案例中粘性侧边栏有2个特点,一个是向下滑动产品列表时,侧边栏黏在页面顶部,用户始终可以看到侧边栏;另外一个是,用户浏览完产品列想要继续向下滑动页面时,侧边栏不在黏在顶部,用户可以继续向下阅读页面内容。

了解这两个特点之后,让我们从头到尾来实现一下:

如果不想看图文,客户滑动到文章末尾看视频教程

1、创建一个侧边栏Containner

创建一个侧边栏Containner用于堆放侧边栏需要的内容,比如搜索框、产品分类、询盘表单等等你想放在侧边栏中的内容。

不建议在侧边栏Containner中放太多内容,大概排列一屏的高度差不多。

在创建侧边栏Containner之前,建议先创建一个页面结构Containner,通过Flexbox添加一个布局结构。

image 106 - 如何使用Elementor制作部粘性侧边栏?(附视频) - NUTSWP

然后拖拽Containner元素到页面布局Containner左侧,用于排放侧边栏需要布局的内容和元素。

image 107 - 如何使用Elementor制作部粘性侧边栏?(附视频) - NUTSWP

然后可以向这个Containner中添加你要放在侧边栏中的内容。

image 108 - 如何使用Elementor制作部粘性侧边栏?(附视频) - NUTSWP

2、向侧边栏Containner中添加元素

添加好侧边栏Containner之后,你可以向Containner添加你需要放在侧边栏中的元素,比如搜索框、产品分类、询盘表单等等。

添加好侧边栏Containner之后,你可以向Containner添加你需要放在侧边栏中的元素,比如搜索框、产品分类、询盘表单等等。

添加好侧边栏内容如下:

image 109 - 如何使用Elementor制作部粘性侧边栏?(附视频) - NUTSWP

侧边栏右边的内容跟你的需求添加即可,这里我不在做说明。

3、设置侧边栏Containner粘性效果

选中侧边栏的Containner,让后进入Containner的Advanced设置选项卡。(注意如果你想要整个侧边栏都有粘性效果,就要选中Containner)

image 1 - 如何使用Elementor制作部粘性侧边栏?(附视频) - NUTSWP

打开Motion Efficts菜单。

image 2 - 如何使用Elementor制作部粘性侧边栏?(附视频) - NUTSWP

设置Sticky为Top,Sticky On设置在哪些终端生效粘性效果。一般情况下手机端我不会设置粘性效果。

image 4 - 如何使用Elementor制作部粘性侧边栏?(附视频) - NUTSWP

设置Offset为120像素(这个选项代表粘性页面生效时和顶部保持的距离,如果你设置了粘性页眉,那么建议高度要大于粘性页眉的告诉,都则粘性侧边栏会遮挡粘性页眉的内容)。

Effects Offset设为0或者1,代表基于Offset设置的值向上偏移多少像素之后粘性页面生效,一般数值越小生效越早。

Stay In Colum设为Yes,代表粘性侧边栏只在包裹它的上一级Containner生效,一旦用户滑动过了上级Containner之后,粘性效果将不再生效,用户可以继续阅读下面的内容。

image 5 - 如何使用Elementor制作部粘性侧边栏?(附视频) - NUTSWP

设置完成之后保存或者更新可以看到实际的效果。

视频教程

相关内容
Elementor的操作记录和修订版本

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

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

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

阅读全文 »
RankMath面包屑使用教程详解(附视频)

本文介绍RankMath面包屑使用教程,如果你安装的RankMath SEO就可以使用它提供的面包屑功能,免费版的通常是通过短码来实现,但是RankMath SEO Pro提供集成到Elementor的面包屑元素,你可以通过Elementor来编辑它的外观。 RankMath面包屑设置详解 在使用之

阅读全文 »
Elementor元素管理器

Elementor元素管理器是Elementor的一项基础功能,通过它你可以管理网站中所有的Elementor元素,包括Elementor第三方插件的元素。通过Elementor 元素管理器禁用不需要的Elementor 元素,可以加快网站加载的时间,并避免一些兼容性问题。 Elementor 元素

阅读全文 »
什么是Elementor第三方插件?

Elementor第三方插件就是非Elementor团队开发的,基于Elementor页面编辑器的插件(比如:Unlimited Elements for Elementor Premium,Unlimite Addons For Elementor等等),这些插件都依赖于Elementor的基础插

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