提供基于WordPress外贸建站·技术支持·SEO咨询服务!
文章分类
文章标签

Elementor制作文章列表页面(详细讲解付视频)

文章导航

本文介绍如何使用Elementor制作文章列表页面。通过本篇文章你讲了解如何制作一个带有侧边栏的文章列表页面。

在网站中我常说的文章列表页面实际上是文章的归档页面,所以我们需要通过Elementor的Theme Builder来制作文章归档模板来实现。而不是通过创建和编辑单个页面来实现。

Elementor的Theme Builder是Elementor Pro的功能,本站提供Elementor Pro官方授权49元/年,如有需要可以联系获取。

在制作文章列表页面之前,你需要先录入几个文章,可以是你真实的数据,也可以是一些Demo数据,用于来展示我们的制作效果。如果没有数据,就没法看到制作的效果。

如果你还要对文章进行分类,也可以提前做好规划。比如将文章划分为News,Projects等不同的分类,来归档文章。

以上就绪之后,我们来开始制作。

1、创建Archive模板

进入Theme Buider

image 42 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

切换到Archive模板,并点击【Add New】创建模板

image 43 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

点击创建之后会自动跳转到编辑页面,同时会弹出模板库,你可以选择模板导入进行编辑

image 44 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

也可以关闭模板,自己手动编辑

image 45 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

2、使用Elementor制作文章列表页面内容

1)创建文章列表页面标题

创建一个新的Section,并设置背景,和padding

image 46 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

然后拖放一个Archive Title元素,设置居中,并取消Include Context显示,这个Archive Title是一个动态内容元素,将会自动显示归档标题,如果是浏览的News分类的文章目录页,Archive Title将显示为News。

image 47 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

拖放一个面包屑元素放在页面标题下方,如果你安装的Woocommerce插件,就可以拖拽WooCommerce Breadcrumbs元素,设置文字颜色及居中对其。

image 48 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

2)章列表页面侧边栏设置

创建一个新的Section,包含两个Column,左边的Column设置的窄一些

image 49 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

通过拖动可以设置Section布局Column的宽度,调整到自己觉得合适的布局大小即可。

image 50 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

处于视觉美观角度,我会设置一下Section的上下内距

image 51 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

然后向左边的Column中添加侧边栏目内容

我添加一个搜索框,文章分类,这里的文章分类是使用IKSMenu制作

然后又通过模板调用展示了一个表单。

image 52 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

3)文章列表数据展示

在右侧的Column中添加Post元素来动态展示文章列表。

下面3个元素都可以用来动态展示文章列表。

image 56 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

1、UAE的Post元素是一个Elementor元素扩展插件是付费的,作为本站读者可以直接领取1个终身授权,需要可以联系我获得。

使用这个元素来获取动态的文章列表数据,需要将Query的数据源 Query Type设置为Main Quey。

image 58 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

2、Elementor Pro的Post元素也可以实现文章列表的动态展示,但是需要设置Query的Source为Current Query。

image 57 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

3、Elementor Pro自带的Archive Posts元素也可以制作,并且不需要设置Query,因为Archive Posts元素本身就是一个动态内容元素。只需要设置好展示风格即可。

image 54 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

博客列表的风格样式设置有很多,具体的操作还是需要自己摸索好设置选项。你可以通过上文的视频了解我是如何设置展示风格,并作为参考设置自己的文章列表风格。

image 59 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

3、响应式优化

如何做页面的响应式优化,你可以阅读《Elementor响应式设置详解(附视频)》。

这里我着重讲一下如何实现侧边栏在手机端显示的文章列表的下方。

按照上文,我的侧边栏是在页面的左侧显示,默认情况下,如果切换到移动端,侧边栏的内容会显示到文章列表的上方。

通过Section的 Advanced设置中的Responsive的Reverse Columns可以是实现Section中的Column在移动端交换位置。

image 60 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

4、发布文章列表页面模板

设置编辑完成之后点击左下角的【Publish】按钮进行发布。

image 62 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

如果你已经点击过【Publish】按钮,则按钮会变成【Update】,一旦修改编辑之后就会高亮为绿色提示你进行更新发布。

image 61 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

第一次【publish】会提示设置Display Condition

image 63 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

你可以按照你想要调用的内容及进行设置

image 64 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

我设置了这个模板应用到所有的分类,如果你还有标签或者其它归档页面需要展示,可以进行修改Display Condition设置,比如你直接设置成【All Archive】代表所有文章归档的目录页面都是调用这个模板来显示,设置完成之后点击【Save & Close】保存并关闭。

image 65 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

我也有专门的文章介绍Elementor Pro的Display Condition设置,你如果不熟悉Display Condition设置可以阅读了解。

关闭之后左下角的按钮变成【Update】灰色代表当前页面没有做过修改,如果是绿色高亮则代表当前页面已经编辑修改,需要保存。

image 66 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

完成之后访问网站的News分类目录页面

image 67 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

5.总结

如果你需要针对某一个分类目录单独做不同的展示效果的列表页面模板,则需要在之前做好的应用到这个分类的模板中将Display Conditon设置中的该分类给排除掉。

然后创建一个新的Archive模板,按照自己想要目录展示效果进行编辑,保存发布的时候单独选择你需要通过改模板展示的分类即可。

在WordPress中你可以设置一个默认的Blog页面,这个设置和Woocommerce中设置Shop页面的逻辑和作用相似。

设置为Post Page的页面将会作为默认的文章列表汇总页面。

image 68 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

但是如果通过Elementor的Archive模板来显示,则会出现无法显示标题。

image 69 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP

为了避免这个问题,我通常是不设置Post Page默认页面。单独编辑Blog页面,将布局调整成和Archive模板一样即可,在Post元素的Quey数据设置为Post,就是代表所有文章的意思,这样话Blog页面任然是我网站的文章汇总列表页面。

image 70 - Elementor制作文章列表页面(详细讲解付视频) - NUTSWP
文章分类
文章标签

最新文章

文章导航

搜索你想找的内容

建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!