Sometimes, when visitors browse your blog or post archive pages, showing full content for every post can make the page look long and overwhelming. A smart way to keep things clean and organized is by displaying just a short excerpt for each post, along with a “Read More” button that opens the full post content in a modal popup.
In this guide, we’ll show you how to create a Read More modal popup in Elementor for post archives. This allows users to quickly view the complete content without leaving the page they’re on—perfect for blog listings, news updates, or service showcases. It improves user experience and keeps your layout tidy and professional.
Table of Contents
Key Takeaways
- Learn how to keep your post archive pages clean by showing only short post excerpts with a “Read More” button.
- Explore how to use Anywhere Elementor Pro and Elementor Addon Elements to display full post content in a modal popup.
- Discover how to link posts to a popup window without needing users to navigate away from the archive or listing page.
- Create a dedicated modal popup template that displays the full post content dynamically when users click the Read More button.
- Design custom block layouts using AE Templates for the Post Block Adv widget to control how individual posts are displayed.
Why Use a Read More Modal Popup in Elementor?
Using a modal popup helps you:
- Keep your archive or blog pages short and readable
- Avoid page reloads or navigation to another page
- Offer a smooth browsing experience
- Increase user engagement
This method is especially useful for websites with lots of content or service listings where full post content isn’t needed right away.
Plugins Needed to Create a Modal Popup for Post Archives
- Anywhere Elementor Pro for Post Block Adv widget
- Elementor Addon Elements for Modal Popup widget (free)
There are a couple of things that we will be doing here. First, a layout for the modal popup will be created, and second, a block layout will be used in the Post Blocks widget. Then you can use the Post Block widget anywhere on your site.
Step-by-Step: How to Create a Read More Modal Popup in Elementor
Here is a step-by-step tutorial on implementing it.
Step 1: Create a Modal Popup Layout Using Anywhere Elementor
- Go to AE Templates and click Add New.
- Set the Render Mode as Block Layout and select a post to preview.
- Edit the template with Elementor.
- Use Elementor widgets or Anywhere Elementor widgets like AE-Post Image, AE-Title, etc., to display the post details dynamically.
- This template will be shown inside the modal popup when the Read More button is clicked.
- For a detailed explanation, read our full article on How to Create a Block Layout in Anywhere Elementor.
Step 2: Create & Edit the block layout for the Post Block widget
- Create another AE Template.
- Set its Render Mode to Block Layout, and choose a preview post.
- Edit this layout with Elementor. This will define how each post is displayed in your archive.
Here’s the important part: - Add the “Modal Popup” widget from Elementor Addon Elements.
- Set the Content Type to AE Template.
- Choose the AE Template you created in Step 1 for the modal popup content.
Step 3: Insert the Post Block Adv Widget in Your Archive Template
- Open your Archive template in Elementor.
- Drag and drop the Post Block Adv widget.
- In the widget settings:
- Choose the Block Layout you created in Step 2.
- Set Display Style as Grid or Carousel.
- Under the Query Tab, set the source to Current Archive or select a specific post type.
That’s it! Now your blog or archive page will display posts with a “Read More” button, which opens a modal popup showing the full post content.
Live Demo: See the Read More Modal Popup in Action
Here is a live demo of what you can achieve by following this tutorial:
Final Thoughts: Improve User Experience with Modal Popups
Adding a Read More modal popup to your post archive pages in Elementor is a great way to keep your layout clean while still giving visitors access to full post content. It helps improve user experience by letting them explore more without navigating away from the page. Whether you’re running a blog, a news site, or a services list, this small feature can make a big difference in how people interact with your content. Try it out and make your post listings more engaging and user-friendly!
FAQs About Creating a Read More Modal Popup in Elementor
Do I need Elementor Pro to create this modal popup?
No, you can use the free version of Elementor along with Anywhere Elementor Pro and Elementor Addon Elements (free) to build this functionality.
Can I customize the popup content for each post?
Yes, using dynamic content from Anywhere Elementor, the modal will automatically show details from the post being viewed.
What is a modal popup in Elementor?
A modal popup is a small window that appears on top of the current page, displaying additional content without redirecting the user to a new page.
Can I add entrance effects to the modal popup?
Absolutely! Elementor’s popup settings allow you to add entrance animations and styling options to make your popup more attractive.
Why should I use a modal popup for post archives in Elementor?
Using a modal popup helps keep your post archive pages cleaner and more user-friendly by allowing visitors to quickly view full content without leaving the page.
Would it also be possible to swipe through the posts right inside the modal?
Hi
No this option is not available.
yes, not avaible any model popup widget…
Hello,
is possible to add Comments widget to popup? I mean comments, that it will comment particular Post.
Not tested. But I think it should works fine.
Thanks this was great. Worked like a charm. I was able to add everything I wanted to popup including comments widget.
Is it possible to add a navigation for instance Previous / Next Post?
This can be a good addition but not current possible with our plugin. We will surely give it a thought and consider it for future enhancement.
is it possible to use this with search and filter pro?
Hi
Yes it will work with Search & Filter Pro.
Is it possible to get the pop-up to appear by clicking something other than the button? We’d like to have videos in pop-ups and people naturally click on the thumbnail rather than the title.
Appologies, I have just found “Button type” under Display settings in the Modal Popup widget – perfect!