Open Post Read More in Modal Popup for Quick View - Elementor Addons

How to open Post Read More with a Modal Popup in Elementor?

Tutorial, AnyWhere Elementor Pro / August 10, 2021
Modal Popup

Have you ever thought about having a Read More button on the post archive that opens the content in a modal box?

This can be implemented easily with a combination of our two plugins.
AnyWhere Elementor Pro to create archive layouts and Elementor Addon Elements for Modal Popup.

Here is a step-by-step tutorial on implementing it.

Table Of Contents
  1. Plugins Used
  2. Create a layout for EAE – Modal Popup widget
  3. Create the block layout for the Post Block widget.
  4. Using Post Block Adv widget in Archive Template
  5. Live Demo

Plugins Used

There are a couple of things that we will be doing here. First creating a layout for the modal popup, and second is a Block Layout to be used in the Post Blocks widget. Then you can use the Post Block widget anywhere on your site.

Create a layout for EAE – Modal Popup widget

  1. Create an AE- Template and choose the render mode as Block Layout.
  2. Then select the post you want to preview.
  3. Edit this template in Elementor and choose the Elementor widgets to display the contents from the Post Archives.
Block Layout Settings

Create the block layout for the Post Block widget.

  1. Now create another AE – Template to be used in the Post Blocks Adv widget. Here you will have to design how an individual post will be rendered by the Post Blocks widget.
  2. Choose the render mode as Block Layout and also choose a Preview Post.
  3. Start editing this template with Elementor.
  4. Where you want to place the Read Mode/quick view button, use EAE – Modal Popup widget.
  5. Set Content Type = AE Template and under AE Template, choose the template you have created in the step above.
Modal popup

Using Post Block Adv widget in Archive Template

You can use the Post Block widget in Archive Layout or wherever you want to use it.

  1. In the Layout setting tab, you can set the styles like display style as Grid and Carousel to display the posts.
  2. Then choose the Block Layout which you created for Post Blocks widget above.
  3. Configure the rest of the options as per your requirement.
  4. In Source, under the Query tab, choose “Current Archive” (if using Archive Layouts) or your post type.
  5. That’s It. Now check on the front end. When you click on the View More button, it will open more details in a Modal Popup.
Post Block Adv

Live Demo

Here is a live demo of what you can achieve by following this tutorial

View Demo

10 thoughts on “How to open Post Read More with a Modal Popup in Elementor?”

  4. Anssi Balk

    Thanks this was great. Worked like a charm. I was able to add everything I wanted to popup including comments widget.

    Reply
    1. Anand Upadhyay

      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.

      Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top