Elementor教程-Widget 概述-文章小部件

上一篇文章,我们讨论了 Elementor教程-Widget 概述-表单 小部件,widget还包含了很多其他的小部件,我们继续介绍,文章小部件Posts Widget

使用 Posts Widget ,您可以以各种布局和方式显示任何类型文章的列表,包括自定义文章类型。这个实用的小部件可用于显示特定类别或特定分类最近帖子等。

Posts Widget - Elementor教程-Widget 概述-文章小部件
Posts Widget – Elementor教程-Widget 概述-文章小部件

Posts Widget主要分为2种展现方式:Classic & Card。

  • Classic:传统的以列表方式显示
  • Card:以卡片方式显示

内容标签中包含了:Layout、 Query 、Pagination三个参数组。我们来依次看下每个参数的设置意思。

Posts Widget – Layout

  • Columns: 设置每行显示的文章列数
  • Posts Per Page: 设置每个块Section显示的文章的总数
  • Image Position: 相对于内容设置图像位置。选项包括: Top / left / right / none.
  • Masonry: 设置滑动效果的开关
  • Image Size: 设置文章图片的大小。选项包括: Thumbnail / Medium / Medium Large / Large / Post-thumbnail / Full size。
  • Image Ratio: 设置图片的比例
  • Image Width: 设置图片的宽度
  • Title: 设置是否显示标题
  • Title HTML Tag: 如果显示标题,设置标题的H标签,从H1~H6
  • Excerpt: 设置是否显示摘要
  • Excerpt Length: 设置摘要显示的字数
  • Meta Data: 选择需要显示的meta元素,包括:作者姓名、发布时间等
  • Separator Between: 设置Meta Data分割的字符
  • Read More: 设置是否显示Read More字样
  • Read More Text: 自定义Read More显示的内容

我们可以从下面的gif图了解一下,修改图片比例和图片宽度,页面的变化。

Set Images Ratio & Set Images Width – – Elementor教程-Widget 概述-文章小部件

Posts Widget – Query

  • Source:设置显示文字的来源。选项包含:Posts / Pages / Manual Selection / Current Query / Related
  • 文章筛选包含2种方式:Include 和 Exclude。
  • Include (Exclude)  By:设置筛选的方式,可以根据Term / Author ( Current Post / Manual Selection / Term / author ) 进行筛选
  • Date:设置显示文章发布的时间范围
  • Order By:设置在该职位将被显示的顺序。选项包括: Date / Title / Menu Order / Random
  • Order:设置排序的顺序。选项包含: ASC / DESC

Posts Widget – Pagination

  • Pagination:设置分页的显示方式。选项包含: None / Numbers / Previous/Next / Numbers + Previous/Next

下期预告:Elementor教程-Widget 概述-按钮小部件

发表评论

电子邮件地址不会被公开。 必填项已用*标注