如何创建相关文章弹出窗口

在文章末尾创建一个弹出窗口以向用户显示相关文章。

您将学习如何创建一个弹出窗口：

1. 是全角
2. 鼓励访问者在阅读文章后留下来。
3. 为访问者提供更好的用户体验

设计弹出窗口及其内容 #

1. 转到Templates > Popups > Add New并为您的新 Popup 命名。（另一种方法是按CMD+E或CTRL+E打开Finder，搜索Popup，选择Add New Popup并为其命名。）
2. 选择预先设计的弹出窗口模板或关闭库覆盖并从头开始设计您的弹出窗口。对于这个例子，我们将自己设计。
3. 在Popup Settings的Layout下，将Width更改为100vw，这样它将显示在视口宽度的 100% 上。
4. 接下来，将Layout > Horizo​​ntal Position设置为Center，并将Layout > Vertical Position设置为Bottom。
5. 单击添加新部分图标以添加具有 4 列的新部分。
6. 编辑每一列，将第一列的宽度设置为 55%，将其他每一列的宽度设置为 15%。
7. 将标题小部件和文本编辑器小部件添加到第一列。
8. 将图像小部件添加到其他每一列。
9. 输入每个图像小部件的链接 URL，每个小部件都指向相关文章。
10. 添加图像效果。对于一张图像，转到Normal选项卡的Style > CSS Filters并将 Saturation 更改为0。然后，在Hover选项卡下，转到Style > CSS Filters并确保 Saturation 仍为100。
11. 右键单击图像小部件，然后选择复制。
12. 右键单击其他每个图像小部件，然后选择粘贴样式。
13. 单击齿轮图标以打开“弹出设置”面板。转到Entrance Animation并选择Slide In Up。
14. 将叠加层设置为隐藏。

设置发布选项 #

1. 添加一个新条件，例如包含 > 单数 > 所有页面 > 页面名称
2. 添加一个新的触发器。将On Scroll to Element设置为Yes并在Selector字段中输入您选择的 CSS 类名称。
3. 单击齿轮图标以打开“弹出设置”面板。
4. 编辑您希望弹出窗口出现的页面。在那里，编辑当用户滚动到它时将触发 Popup 的元素。
5. 转到元素的Advanced > CSS Classes并输入与您在上面的触发器中输入的相同的 CSS 类名称。

全部完成。现在访问实时页面，向下滚动到文章末尾，然后查看相关文章弹出窗口的实际效果。