help center

On this page

Create a Related Articles popup

Last Update: August 10, 2023

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 plus Create a Related Articles popup 1 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 cog Create a Related Articles popup 3 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 cog Create a Related Articles popup 3 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.
file eTZ1EMnjge Create a Related Articles popup 7
file 72B7WlcCkJ Create a Related Articles popup 9

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

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Wait! You get 30-Day Money-back Guarantee

You have nothing to lose – but the discount