如何在 Elementor 中的时间轴上显示博客文章

博客帖子沿垂直时间线显示为卡片

主要外卖

  • Elementor 帖子时间线将已发布的博客文章按日期顺序沿垂直线放置,并且每次发布新帖子时都会自行更新。
  • Elementor 和 Elementor Pro 没有时间线小部件,因此帖子时间线需要一个插件或使用 CSS 样式的自定义循环模板。
  • 主插件时间线小部件中的后时间线类型是主插件专业版的一部分,它是通过内容选项卡中的时间线类型控件选择的。
  • 帖子时间线查询有每页帖子、帖子顺序、有九个选择的顺序、类别、按标签过滤、作者、要排除的帖子和抵消帖子计数。
  • 每张帖子时间线卡片都可以显示帖子标题、特色图像、具有设定长度的摘录和"阅读更多"按钮,并且启用链接可以单击整张卡片。
  • Master Addons 小部件中的帖子时间线仅为垂直,而水平转盘布局则保留用于手写的自定义时间线项目。

Elementor 帖子时间线将您的博客档案变成一行注明日期的行:顶部是最新的帖子,每一张都有一张带有标题、图像和摘录的卡片。 元素 没有此小部件,因此下面的步骤使用"帖子时间线"类型 主插件时间线小部件的,这是一个Pro功能。

本指南涵盖了查询设置、过滤器、每张卡显示的内容以及如何样式。它还涵盖了当网格来自 博客小部件 比时间线更能为您服务。

什么是帖子时间表以及何时使用

Post时间轴是一个动态的时间轴,其条目来自您的WordPress帖子,而不是您手工输入的项目发布帖子,它会出现在行中,没有人必须编辑页面。

这使其非常适合以日期为重点的内容:

  • 公司新闻和新闻稿
  • 发布说明,其中每个帖子都是一个版本
  • 项目日记或构建日志
  • 整个赛季的活动回顾

它更适合普通的博客索引。那里的读者扫描主题,网格显示每个屏幕的帖子更多。

如何在 Elementor 中构建帖子时间线

Elementor、Master Addons Pro 以及至少几个已发布的带有特色图片的帖子,那么它需要五个步骤。

步骤 1:设置时间线类型以发布时间线

使用 Elementor 编辑页面,搜索小部件面板 时间线 并拖入。在"内容"选项卡中,打开 时间线 部分和更改 时间轴类型 从自定义时间线到 发布时间表。样条消失,你最新的帖子取而代之。

元素时间线小部件,时间线类型设置为发布时间线,沿垂直线显示博客文章
选择"帖子时间轴"后,面板将"项目"列表交换为"帖子"、"缩略图"、"日期"和"查询控件"。

此时时间线样式下拉已消失。帖子时间线始终是垂直的。

2步:设置查询

向下滚动同一部分到查询控件。这些决定哪些帖子加载以及按什么顺序。

控制它做什么
每页帖子时间表显示多少帖子
邮寄订单降(最新的先)或上升
订单由无、ID、作者、标题、姓名、日期、最后修改、随机或评论数量
偏移后计数从列表的开头跳过那么多帖子
忽略粘稠吗?阻止粘性柱子跳到顶部

如需时间线,请继续订购 日期.随机或标题排序打破了时间轴所承诺的一件事,即时间上的顺序,当故事从一开始就应该阅读时,使用上升,就像项目日记一样。

Offset Post Count 在一个特色帖子已经位于时间线上方时很方便,将其设置为 1,时间线从第二个帖子开始。

3步:按类别、标签或作者过滤

下面的顺序设置有四个过滤器: 类别, 按标签过滤, 作者 並 排除的帖子.

Elementor 中发布时间轴查询控件:每页帖子、帖子顺序、按顺序、类别、按标签过滤、作者和要排除的帖子
的查询和过滤器控件。将过滤器留空以加载整个博客的帖子。

类别过滤器是构建聚焦时间线的通常方法。将发布帖子放入 “发布” 类别中, 在此处选择它, 小部件就会变成一个自行编写的更改日志。要排除的帖子会删除不属于的单个帖子, 例如您不希望在线上的公告。

4步:选择每张卡片显示的内容

该部分的顶部控制卡内容。

  • 显示标题、与 标题链接 和一个 标题标签。H2是默认的,如果时间线位于自己的H2之下,则选择较低的级别。
  • 显示图像 並 图像分辨率 为特色图像。
  • 日期格式 並 时间格式 对于每个点旁边的日期。
  • 摘录长度, 摘录类型 並 阅读更多文字 为摘要和按钮。
  • 启用链接 将整张卡链接到帖子。

开启"启用链接"或"标题链接",而不是两者都打开。链接卡内的链接是无效的 HTML,面板会在开关下警告它。

第 5 步:设置帖子和卡片

转到"样式"选项卡。 帖子 部分风格是帖子时间线的特定内容:标题颜色、标题排版和间距、摘录颜色以及带有排版、填充、边框半径以及普通和悬停颜色的"阅读更多"按钮。

Elementor时间轴小部件的样式选项卡中的帖子部分,其中包含标题颜色,排版和阅读更多按钮控件
的帖子部分。阅读更多按钮有自己的填充、半径和悬停状态。

其余部分与每个时间线共享。 卡 设置填充、边框半径和背景,具有单独的默认、悬停和聚焦外观。 线 设置轨道和进度颜色,并在访客滚动时填充。 积分 並 日期 样式标记和日期文本。

元素器时间线小部件的样式选项卡中的卡片部分,带有后时间线预览
访客滚动到的聚焦卡可以有自己的背景,因此当前帖子脱颖而出。

的 主要时间表教程 逐一穿过线路、点和日期部分。

需要两种时间线类型吗? 的 时间轴小部件 page 将自定义时间线和后时间线与现场演示并排进行比较。

发布时间线与自定义时间线

当条目已作为帖子存在时选择帖子时间线,当您想要自己编写每个条目时选择自定义时间线。

因素发布时间表自定义时间表
内容来自已发布的帖子面板中添加的项目
更新每次发布当您编辑小部件时
布局垂直垂直或水平旋转木马
每个条目都显示标题、特色图片、日期、摘录、了解更多日期或自定义标签、内容、图像、链接
计划硕士插件专业版主插件
最好的新闻、发布说明、日记公司历史、路线图、流程步骤

如果您想要旋转木马布局,请参阅 elementor 中如何创建水平时间线.

时间表或博客网格:哪一个?

当订单不仅仅是选择时使用时间线,当读者浏览时使用网格。

如果你正在建设从头开始
新闻或新闻页面发布时间表
发布类别的注释使用类别过滤器发布时间表
主要博客索引网格或列表布局中的博客小部件
文章下的相关帖子旋转木马模式下的博客小部件
类别或标签存档模板具有当前查询的博客小部件

网格路线逐步覆盖 如何使用 Elementor 创建博客页面。您还可以同时使用:首页最近新闻的三帖时间线,以及博客页面上的完整网格。

常见问题

Elementor 有发布时间线小部件吗?

No。Elementor和Elementor Pro都不会导出时间线小部件。Elementor Pro可以列出带有帖子或循环网格小部件的帖子,但是将其转换为带有线和点的时间线需要自定义CSS。Addon时间线小部件从设置中执行。

Master Addons 中的帖子时间线是 Pro 功能吗?

是帖子时间轴类型需要主插件Pro。自定义时间轴类型,您手工添加每个项目,根本不使用帖子查询。

帖子时间表可以仅显示一个类别的帖子吗?

是时间轴部分的类别控制中选择类别,您可以将其与按标签和作者过滤器组合,并删除带有要排除的帖子的单帖。

我可以制作横向帖子时间表吗?

Master Addons小部件中没有。发布时间线是垂直的。对于水平行中的帖子,请使用帖子转盘,或将条目手动添加为自定义时间线项目,并将时间线样式切换到水平时间线。

当我发布新帖子时,时间线会更新吗?

是。widget每次页面加载时都会查询您的帖子,因此会出现与过滤器匹配的新帖子,而无需编辑页面。如果缓存插件处于活动状态,则一旦其缓存被清除,页面就会更新。

最后的想法

Elementor 帖子时间线需要三个决策:哪些帖子(类别、标签、作者、要排除的帖子)、按什么顺序(帖子顺序和订单由,通常是日期)以及每张卡片显示的内容(标题、图像、摘录、阅读更多)。帖子时间线类型处理内容选项卡中的所有三个,并保持垂直。

请参阅上的布局和演示 元素器时间线小部件 页,或检查 Master Addons Pro 定价 如果您只需要帖子来源。

罗伊·杰米的照片
罗伊·杰米
I’m Roy Jemee,Pixar Labs 的内容牧马人和营销人员,为 Elementor 编写主插件,我编写教程,录制视频,并保持文档的最新状态,所以你总是知道如何使用每个功能,我还处理支持,所以如果你遇到障碍,我就是帮助你修复它的人真正的答案,来自每天使用这些工具的人。

留下回复

您的电子邮件地址不会被发布。 标记必填字段 *