Once you have attracted traffic to your site, make an effort to have them stick around. You can achieve this by showing your viewers other related articles using a popup. Why a popup? It is hard to ignore.
It is easy to create related articles popup using Elementor. Elementor uses a drag-and-drop page builder and offers plenty of design features. You can create a user-friendly and beautifully-designed popup without any coding skills.
There are plenty of templates by Elementor that you can use. They make the process faster and easier. But we will guide you through creating one from scratch.
We will show you how to set the trigger and design the popup in a way that holds the viewer’s attention.
One of the best things about Elementor is that it works from the front end. You can view the popup’s design as it will appear on your user’s browser, and make edits needed to make it more user friendly.
Here’s a quick index to help you navigate this article:
So let’s dive in.
Create a Related Articles Popup
We will create a popup that will appear after a visitor finishes reading a blog article. When a user scrolls to the end of our single blog post, the related articles popup will appear in front of the users. It encourages visitors to read more posts.
Look at the image above; this is a single blog post template. After reading the post, when the user reaches the section that we have outlined in red, the popup opens.
We will be designing this popup.
Here we have to complete two major tasks. First, we need to design the popup, and second, we have to integrate the popup with the section so that the popup appears upon the user’s action.
To begin creating a related articles popup, log in to your WordPress dashboard.
Now go to Templates > Popup > Add New Popup.
When you click the “Add New Popup” button, this will create a condition popup form.
We will create a popup including our related articles.
For that, choose the template type: Popup.
Give your popup a name. We have chosen “Related Articles Popup”.
Now click the “Create Template” button.
After this, you will see the Elementor library on your screen. You will find plenty of templates here that you can choose for this task. Scroll down to see more popups.
For the sake of this tutorial, we will be designing the popup from scratch. Close the library by simply clicking on the “X” button.
Now your Elementor dashboard will look like the image below.
Remember, during this process, we will insert a section into the popup and that section contains two widgets named “heading” and “posts”.
Step 1: Edit the Popup Settings
First, let’s change the popup settings. Click on the popup settings icon.
Go to settings tab > Layout
Set popup width to 100(VH) and add custom height to 330 (px).
Hide the overlay and show the close button, content position: center.
Change horizontal and vertical position following the image.
Entrance animation: Fade in up. Exit animation: Fade out left.
That means when the popup opens it will be animated in ‘Fade in up’ mode and when the popup closes it will be animated in ‘Fade out left’ mode.
Go to the Style tab.
We will now change the popup’s background color. It will make the popup more attractive.
Its background type will be gradient. Select gradient and change the first color: #7CE4F2. Next, change the second color: #F2295B.
Look at the image below.
Step 2: Insert a Section & Edit a Heading Widget
Insert a section into the popup. After that, drag a heading widget from the left side and drop it into the section.
It’s time to style the heading now. Let’s give it a beautiful look.
First, change the heading text.
Go to Edit Heading > Content Tab > Title: READ MORE ARTICLES. Set its alignment to ‘Center’.
Now go to Edit Heading > Style Tab. Do the changes that we have done according to these:
Text color: #0935A4.
Typography > Family: Rubik, Weight: 500, Transform: Capitalize, Line height: 1.2.
Text Shadow > Blur: 10. Leave the default settings for the other options.
After changing everything, let’s see the heading now.
Now for step 3.
Step 3: Edit ‘post’ Widget
Now we will start editing another new widget: ‘Posts’.
First, search for ‘post’ in the search bar of the Elementor widgets library. Drag the ‘Post’ widget from the left side and drop it to below the heading. Now change the values under the properties we specify below.
Edit Posts > Content Tab:
Layout > Skin: Classic, Columns: 4, Posts per page: 4, Image position: Top, Masonry: Off, Image Size: Medium, Title: Show, Excerpt: Hide, Meta Data: Delete all Metadata, Read More: Hide, Open in a new window: No.
Edit Posts > Style Tab:
Layout > Alignment: Center. Now the image and post title will come to the center.
Go to Image: CSS Filters > ‘Normal’ Mode > Saturation: 0.
This will change how the image looks in normal mode and all the post’s featured image colors will be in black and white.
CSS Filters > ‘Hover’ Mode > Saturation: 100. When you take your mouse cursor over the image, the post’s featured image will be changed back to full color from black and white.
Edit Posts > Advanced Tab:
Padding (0, 30, 0, 30). It will move the posts to 30 px center both from the left and right sides.
Step 4: Integrate the Popup With Your Single Blog Post Pages
Now our design is ready. Let’s hit the publish button and set the condition, triggers, and advanced rules.
We want to show the popup on all of our blog posts.
Click on the ‘Add Condition’ button. Include Singular > Posts > All.
After that, click on ‘Next’.
We want the popup to appear when users reach a certain point in our article.
Let’s change ‘On scroll to Element’ to ‘yes’ from the trigger options.
Now in the selector field, type the selector class: .popup (dot popup).
After typing, click the ‘Next’ button.
After clicking the next button, it will go to the advanced rules. For this popup tutorial, we are not going to set any ‘Advanced Rules’. Click on ‘Save & Close’ to finish the entire configuration process.
Now add the class (that we set in the triggers condition) to the element where you want the popup to appear.
Earlier in this tutorial, we showed that when the users reach the ‘share button’ section at the end of our blog posts, the popup will open.
For this, you have to go to the single post template. After that, select the share button section.
Under the ‘Advanced’ tab type the CSS class (popup) that was set from the ‘triggers’ condition. Remember that you don’t need to add the dot(.) here with the class.
Lastly, hit the ‘Update’ button.
Congratulations! You have successfully created a ‘related articles popup’.
Conclusion: How to Create a Related Articles Popup Using Elementor
Creating a related articles popup is not a tricky process, and using Elementor makes it much smoother. Stick to the step by step guide we have provided.
An appealing popup will improve your visitors’ experience and entice them to click the next post, keeping them on your page for longer. You can edit the popup to meet your taste, such as applying a background color that matches your brand.
You can also set your preferred user’s action that will trigger the popup. Choose the pages where you would want the popup to appear as well as the precise location on the page.
In case you have any questions, feel free to contact us.
Read Other Elementor Tutorials:
- How to Get Started With Elementor
- Elementor Pro Discount
- Elementor vs Elementor Pro
- How to Use the Elementor Free Page Builder
- How to Use the Elementor Theme Builder
- How to Add a Popup With Elementor
- How to Create a 404 Web Page With Elementor
- How to Create a Mega Menu WIth Elementor
- Does Elementor slow down your site?
- What Happens if I Deactivate Elementor Pro?
- Elementor vs Beaver Builder
- Is the Plugin Elementor an Easy Way to Build Websites?
- How to Set Up Important WooCommerce Pages With Elementor
Leave a Reply