How To Create A Related Articles Popup

Create a popup at the end of an article to show users related articles.

You’ll learn how to create a popup that:

1. Is full-width
2. Encourages the visitor to stick around after reading an article.
3. Provides a better user experience for your visitors

Design The Popup and Its Content

1. Go to Templates > Popups > Add New and give your new Popup a name. (An alternative method is to press CMD+E or CTRL+E to open Finder, search for Popup, choose Add New Popup, and give it a name.)
2. Choose a pre-designed Popup template or close the Library overlay and design your Popup from scratch. For this example, we’ll design our own.
3. In the Popup Settings, under Layout, change the Width to 100vw, so it will display across 100% of the viewport width.
4. Next, set the Layout > Horizontal Position to Center, and the Layout > Vertical Position to Bottom.
5. Click the Add New Section icon to add a new section with 4 columns.
6. Edit each column, setting the first column’s width to 55%, and each of the other columns to 15%.
7. Add a Heading widget and a Text Editor widget to the first column.
8. Add an Image widget to each of the other columns.
9. Enter the link URL for each of the Image widgets, with each pointing to the relevant article.
10. Add image effects. For one image, go to the Normal tab’s Style > CSS Filters and change the Saturation to 0. Then, under the Hover tab, go to Style > CSS Filters and make sure the Saturation is still at 100.
11. Right-click the image widget, and choose Copy.
12. Right-click each of the other image widgets, and choose Paste Style.
13. Click the cog icon to open the Popup Settings panel. Go to Entrance Animation and choose Slide In Up.
14. Set the Overlay to Hide.

Set The Publish Options

1. Add a new Condition such as Include > Singular > All Pages > Pagename
2. Add a new Trigger. Set On Scroll to Element to Yes and enter a CSS class name of your choice in the Selector field.
3. Click the cog icon to open the Popup Settings panel.
4. Edit the page where you wish the popup to appear. Once there, edit the element that will trigger the Popup when the user scrolls to it.
5. Go to the element’s Advanced > CSS Classes and enter the same CSS class name as you entered into the Trigger above.

All done. Now visit the live page, scroll down to the end of the article, and see your Related Articles Popup in action.