本文介绍如何使用Elementor制作文章列表页面。通过本篇文章你讲了解如何制作一个带有侧边栏的文章列表页面。
在网站中我常说的文章列表页面实际上是文章的归档页面,所以我们需要通过Elementor的Theme Builder来制作文章归档模板来实现。而不是通过创建和编辑单个页面来实现。
Elementor的Theme Builder是Elementor Pro的功能,本站提供Elementor Pro官方授权49元/年,如有需要可以联系获取。
在制作文章列表页面之前,你需要先录入几个文章,可以是你真实的数据,也可以是一些Demo数据,用于来展示我们的制作效果。如果没有数据,就没法看到制作的效果。
如果你还要对文章进行分类,也可以提前做好规划。比如将文章划分为News,Projects等不同的分类,来归档文章。
以上就绪之后,我们来开始制作。
1、创建Archive模板
进入Theme Buider
切换到Archive模板,并点击【Add New】创建模板
点击创建之后会自动跳转到编辑页面,同时会弹出模板库,你可以选择模板导入进行编辑
也可以关闭模板,自己手动编辑
2、使用Elementor制作文章列表页面内容
1)创建文章列表页面标题
创建一个新的Section,并设置背景,和padding
然后拖放一个Archive Title元素,设置居中,并取消Include Context显示,这个Archive Title是一个动态内容元素,将会自动显示归档标题,如果是浏览的News分类的文章目录页,Archive Title将显示为News。
拖放一个面包屑元素放在页面标题下方,如果你安装的Woocommerce插件,就可以拖拽WooCommerce Breadcrumbs元素,设置文字颜色及居中对其。
2)章列表页面侧边栏设置
创建一个新的Section,包含两个Column,左边的Column设置的窄一些
通过拖动可以设置Section布局Column的宽度,调整到自己觉得合适的布局大小即可。
处于视觉美观角度,我会设置一下Section的上下内距
然后向左边的Column中添加侧边栏目内容
我添加一个搜索框,文章分类,这里的文章分类是使用IKSMenu制作。
然后又通过模板调用展示了一个表单。
3)文章列表数据展示
在右侧的Column中添加Post元素来动态展示文章列表。
下面3个元素都可以用来动态展示文章列表。
1、UAE的Post元素是一个Elementor元素扩展插件是付费的,作为本站读者可以直接领取1个终身授权,需要可以联系我获得。
使用这个元素来获取动态的文章列表数据,需要将Query的数据源 Query Type设置为Main Quey。
2、Elementor Pro的Post元素也可以实现文章列表的动态展示,但是需要设置Query的Source为Current Query。
3、Elementor Pro自带的Archive Posts元素也可以制作,并且不需要设置Query,因为Archive Posts元素本身就是一个动态内容元素。只需要设置好展示风格即可。
博客列表的风格样式设置有很多,具体的操作还是需要自己摸索好设置选项。你可以通过上文的视频了解我是如何设置展示风格,并作为参考设置自己的文章列表风格。
3、响应式优化
如何做页面的响应式优化,你可以阅读《Elementor响应式设置详解(附视频)》。
这里我着重讲一下如何实现侧边栏在手机端显示的文章列表的下方。
按照上文,我的侧边栏是在页面的左侧显示,默认情况下,如果切换到移动端,侧边栏的内容会显示到文章列表的上方。
通过Section的 Advanced设置中的Responsive的Reverse Columns可以是实现Section中的Column在移动端交换位置。
4、发布文章列表页面模板
设置编辑完成之后点击左下角的【Publish】按钮进行发布。
如果你已经点击过【Publish】按钮,则按钮会变成【Update】,一旦修改编辑之后就会高亮为绿色提示你进行更新发布。
第一次【publish】会提示设置Display Condition
你可以按照你想要调用的内容及进行设置
我设置了这个模板应用到所有的分类,如果你还有标签或者其它归档页面需要展示,可以进行修改Display Condition设置,比如你直接设置成【All Archive】代表所有文章归档的目录页面都是调用这个模板来显示,设置完成之后点击【Save & Close】保存并关闭。
我也有专门的文章介绍Elementor Pro的Display Condition设置,你如果不熟悉Display Condition设置可以阅读了解。
关闭之后左下角的按钮变成【Update】灰色代表当前页面没有做过修改,如果是绿色高亮则代表当前页面已经编辑修改,需要保存。
完成之后访问网站的News分类目录页面
5.总结
如果你需要针对某一个分类目录单独做不同的展示效果的列表页面模板,则需要在之前做好的应用到这个分类的模板中将Display Conditon设置中的该分类给排除掉。
然后创建一个新的Archive模板,按照自己想要目录展示效果进行编辑,保存发布的时候单独选择你需要通过改模板展示的分类即可。
在WordPress中你可以设置一个默认的Blog页面,这个设置和Woocommerce中设置Shop页面的逻辑和作用相似。
设置为Post Page的页面将会作为默认的文章列表汇总页面。
但是如果通过Elementor的Archive模板来显示,则会出现无法显示标题。
为了避免这个问题,我通常是不设置Post Page默认页面。单独编辑Blog页面,将布局调整成和Archive模板一样即可,在Post元素的Quey数据设置为Post,就是代表所有文章的意思,这样话Blog页面任然是我网站的文章汇总列表页面。