如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程）

作者： | 2025年5月27日
如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） – unlimited elements for elementor教程

相信很多朋友之前看到过一些wordpress网站内容有设计左边固定侧边栏，右边内容或者产品聚合页能随着点击左边侧边栏的选项发生相对应的变化，可以跳转到相应的内容，看起来很美观，有设计感。

今天就跟大家分享一下怎么做的？主要应用到几个插件，一种是elementor+Unlimited elements for elementor（简称UEE），另一种则是elementor+jet smart filter+jet engine。

UEE教程

先安装Unlimited Elements for Ementor（Premium）插件，需要的可以找我。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） – UEE

左边侧边栏下拉到unlimited elements，选择widgets（工具）进入。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） – widget

在工具页的搜索框输入taxonomy。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） –

安装分类小工具。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） –

然后回到elementor的模板，新增一个archive模板。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） –

随意命名，只要模板类型是archive（归档）即可。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） –

布局选择2 8。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） – 28布局

把UEE的taxonomy terms小工具插入左边侧边栏，前提你post的分类一定要做好，不然没有东西显示。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） –

右边添加archive post，post文章做产品页是常用的B2B产品管理方式。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） –

美化一下两边的设计，例如去除箭号，增加圆角等等。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） –

右上角display condition选择include all archives。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） –

然后发布。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） –

回到仪表盘，选择相应要设计的页面，用elementor编辑。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） – elementor编辑相应的页面

插入我们刚才做的产品聚合模板。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） –

点击insert。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） –

保存发布就能在前台看到对应的布局效果，这时候点击各种分类，无内容会跳出来no data，有内容会像过滤器一样过滤对应的内容卡片。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） –

做完了聚合归档页面，接下来要做单个的内容页面。点击single post（因为我们是用文章页发产品的）。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） – post模板

布局一样，其实就是跳转页面，但是给用户的感觉好像没有跳转，GPT说这叫SPA，single page application，不清楚是不是这个说话，有懂的朋友麻烦告知一下。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） – 28布局

左边的侧边栏一样是taxonomy分类。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） –

右边可以自定义。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） –

比如我插入了标题，轮播产品图，内容和发送询盘按钮，其他可以根据自己喜好添加。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） –

展示条件要选择posts，然后就完成了。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） –

Jet Smart Filter教程

5/5 - (1 vote)

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

滚动至顶部