Create A Related Articles Popup

The Related Posts popups are especially useful to show users who are interested in your content. Just when they are finishing up your article you can assign a popup display that will show them other content with the same value as the one they are reading. 

Design and Build a Popup

1. From the WordPress Dashboard > Templates > Popup
2. Click on Add New and name your template 
3. Once you click Create Template you will be redirected to the stunning library of pre-made popup templates that you can insert with just a click, or you can always start from scratch. 

Popup Settings

Layout

1. Width - 100 VW. This will make the popup take up the entire viewport of the screen. 
2. Height - Fit to Content 
3. Content Position - Center
4. Horizontal Position - Bottom
5. Overlay - OFF
6. Button - ON

Design

Popup

1. Background Type - Classic 
2. Set a background color for the popup

Button

1. Vertical Position - 10px 
2. Horizontal Position - 40px 
3. Size - 23px 

Add the content for the Popup 

1. Drag an inner section to the page. Next on we will add a heading element to introduce our popup. Let’s write the content. Align it to the left.
2. From the Style tab. We will set the text color and we will also tweak the typography options as per usual.
3. Right under the heading element, we will drag in a button to entice users to engage with our popup. Change the text and align the button to the left.
4. Go straight to the Style tab and tweak the typography options. Set the text color and background color. To make our button more appealing let’s border radius of 5 pixels value. We will also add some text padding values of 8px for the Top and Bottom and 13px for the Left ad Right. 
5. Click on the inner column’s handle to open the settings and set the Vertical Align to Middle and the Horizontal Align to Center.
6. Search for the Posts element and drag it onto the page. Let’s quickly set the column’s value to one and the post per page to 1 as well. Set the Image Position to Left. We will set the image size to Full as well as configure the image size and ratio.
7. We will show the title but we will hide the excerpt. From the metadata, we will only show the category. Switch the handle ON to show the Read More text.
8. From the query’s tab, we will set the Source to Post. We can include posts either by term or author. We’ll select - term and define a certain category, depending on where you want the popup to be displayed. 
9. Let’s style the post element. Set the column gap and the row gap to the value of 0.
10. Open the Box tab and set the content padding the value of 10 on all sides. Next, open the Image section and set the spacing to be 0.
11. From the Content section let’s change the text color and tweak the typography options. The same procedure will be applied to the metatext as well as the learn more button.
12. Lastly, open the Content Order section and allow ordering. We want the meta to be displayed on top of the title. Let’s just drag it, and you’re done.

Publish the Popup

1. Click on Publish when you are done designing our popup.
2. Conditions - From the Conditions tab we will assign our popup to be displayed on Singular > Posts > and we will determine the category for the popup.  
3. Triggers - From the triggers tab and switch the On Scroll to Element option On. We first set a class for the element. Let’s name it .related. Note that when you set a class from the triggers tab you always type the dot before the name.
4. Now let’s go and edit the single post template. We want the popup to appear after the user reaches the last section on the page.
5. Click on the section’s handle to open its options. From the Advanced tab locate the CSS class and type here the same class we set from our triggers tab. Only this time without the dot.
6. Click on Update and watch your popup live in action.