如何使用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

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

视频教程

分类
标签
Load WordPress Sites in as fast as 37ms!
建站交流群
建站咨询请联系企业微信
技术支持/服务

推荐阅读

UE插件Ajax Search元素按钮颜色透明度CSS重写

本文记录我使用UE插件Ajax Search元素按钮颜色透明度CSS重写的代码的过程。 在使用UE的Ajax Search元素时,发现其按钮被默认设置了透明度。于是只能手动对代码中的CSS进行修改。

Elementor如何隐藏页面标题?

如何在Elementor编辑中隐藏页面标题呢?在使用Elementor编辑一个新的页面时,页面顶部会出现当前页面标题?这个标题是无法删除的,但是我们可以通过Elementor的页面设置来隐藏它。 1、

Elememtor设置全局的内容宽度

本文介绍如何使用Elememtor设置全局的内容宽度,默认情况下Elementor Containner的宽度是Boxed 1140px,你可以针对这个Containner去修改内容的宽度,但是如果你

目录

搜索你想找的内容

站长自用主机推荐
前三个月享85折优惠
注册无需身份验证
点击下方LOGO注册【无需绑卡】免费试用3天
外贸建站服务
提供外贸建服务:模板建站、定制建站、小语种建站,通过微信联系咨询
建站咨询请联系企业微信
WP建站技术交流群
建站咨询请联系企业微信
建站咨询购买主题插件模板