在本视频中，我们将介绍两种不同的方法来创建一个不可见的进度跟踪器，它会在读者滚动浏览帖子时出现，从而增强用户体验并使我们的帖子更具吸引力。
我们会将其添加到 Elementor 中的单个帖子模板中，以便它出现在每篇博文中。
此提示和技巧视频是我们如何在 Elementor 中构建博客课程的奖励课程。如果您还没有看过，我们鼓励您去看看，但即使您还没有观看课程，您仍然可以继续学习。
本教程确实需要基本熟悉 Progress Tracker 小部件和单一帖子模板功能，因此如果您还不熟悉这些，我们建议您先观看我们的专门教程。
请参阅说明中的课程和教程链接。
好的，让我们开始吧！
回到 Xander Banks 的博客，我们将使用单一帖子模板。或者，如果您愿意，可以随意使用您自己的 Single Post 模板。让我们从为我们的帖子设计一个简约的进度跟踪器开始。
首先，在帖子部分上方添加一个包含单列的新部分。将部分的内容宽度设置为“完整”，将“列间隙”设置为“无间隙”。
接下来，从小部件菜单中拖入进度跟踪器小部件。最终，我们会将进度跟踪器设置为相对于发布内容，但为了最好地预览我们对进度跟踪器小部件的更改，我们将在设置样式后进行设置。
转到“样式”选项卡。现在我们将稍微调整一下设计，使这个小部件与 Xander 的博客风格相匹配。使用全局颜色设置进度颜色，并对跟踪器的背景颜色执行相同的操作。完美的！
不过，这个小部件有点太大，不适合 Xander 的简约风格。让我们调整它的高度并将其设置为 10 像素。好多了！
现在，这款追踪器非常时尚，但我们可以通过使用 Motion 效果使它粘在顶部来赋予它更多个性！在“高级”选项卡中，展开运动效果选项并确保小部件位于顶部。
现在进度跟踪器已全部设置好，让我们返回“内容”选项卡，并设置与帖子内容相关的进度。然后我们将更新…并隐藏编辑器以查看实际效果。
进度跟踪器一开始是不可见的，但一旦我们在文章中向下滚动，它就会粘在顶部并跟踪我们的阅读进度。
如果我自己这么说，也不会太寒酸。但让我们再提高一个档次。
对于我们的第二个示例，我们将在进度跟踪器上方添加另一个部分，但不是从头开始，我们将单击文件夹图标以从“我的模板”选项卡导入标题模板。随意使用您自己的标题，或在我们博客课程的第 5 课中查看如何创建此标题。
伟大的。稍微调整一下高度……并在中间添加另一列。将小部件空间设置为零并调整左右列的列宽。
现在复制我们已经创建的进度跟踪器，并将其粘贴到我们刚刚添加的列中。让我们对其样式进行一些调整，例如背景颜色和高度。接下来，我们将添加帖子标题以显示在进度跟踪器中。为此，首先我们将拖入帖子标题小部件，然后更改其 HTML 标签，使其不显示为标题。然后，在风格上，更新排版。
接下来，转到高级并添加一些边距。在底部使用负边距，将小部件向下移动到进度跟踪器中。如果您的小部件被其他小部件隐藏，请更改其 Z-index 以将其堆叠在上方。
完美的！
现在让我们对整个部分进行一些调整，以确保它仅在我们需要时出现。单击该部分并转到高级下的运动效果。然后将其设置为粘在页面顶部，但仅限于桌面。我们可以通过单击平板电脑和手机旁边的 x 图标来设置它。
通过激活滚动效果添加一些很酷的入口效果！
我们将使用一个简单的透明效果，并再次将其仅应用于桌面。由于此效果仅适用于台式机，因此我们将转至响应以隐藏平板电脑和移动设备上的整个部分。
现在每次向下滚动时，该部分都会淡出并留在页面顶部。说到透明度，这个部分的背景是透明的，这使得徽标和汉堡菜单很难看清，所以让我们给它一个纯色背景。
我们剩下要做的就是将第二个进度跟踪器设置为仅出现在平板电脑和手机上。单击进度跟踪器部分。在运动效果下，确保它粘在顶部，适用于平板电脑和移动设备。最后但同样重要的是，在响应下，将其从桌面隐藏。
这样，我们的新进度跟踪器就完成了。
让我们看看它的实际效果！
在台式机上看起来不错……在平板电脑上看起来不错。
而且，当然，在移动设备上看起来不错！
你有它！
通过添加新部分并将其粘在页面顶部来使用简约的进度跟踪器。
或者通过使用现有的标题模板并将其与进度跟踪器组合在一起来增加趣味性。
现在您可以使用进度跟踪器创建更具吸引力的后期设计！
