Skip to content

WP Vibes | Manage Account

Elementor Addons
Elementor Addons
  • Home
  • Products
    • AnyWhere Elementor Pro
    • Elementor Addon Elements
    • Anywhere Elementor
    • Form Vibes
  • Blog
  • Contact Us
Elementor Addons
  • Home
  • Products
    • AnyWhere Elementor Pro
    • Elementor Addon Elements
    • Anywhere Elementor
    • Form Vibes
  • Blog
  • Contact Us

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

December 27, 2019
/
Akanksha Soni

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
  • Plugins Used
  • Create a layout for EAE - Modal Popup widget
  • Create the block layout for the Post Block widget.
  • Using Post Block widget in Archive Template
  • Live Demo

Plugins Used

  • Anywhere Elementor Pro for Post Blocks widget 
  • Elementor Add-on Elements - for Modal Popup widget (free)

There are a couple of things that we will be doing here. First creating a layout for Modal popup and second is a Block Layout to be used in Post Blocks widget. Then you can use 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 Post Blocks widget. Here you will have to design how an individual post will be rendered by 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. In the place 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 widget in Archive Template

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

  1. In Source choose "Current Archive" (if using for Archive Layouts) or your post type.
  2. Then choose the Block Layout which you created for Post Blocks widget above.
  3. Configure the rest of the option as per your requirement.
  4. That's It. Now check on the frontend. When you click on View More button it will open more details in a Modal Popup.

Live Demo

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

View Demo

PrevPrevious
NextNext

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

  1. btgnmedia
    November 24, 2020 at 3:17 am

    Would it also be possible to swipe through the posts right inside the modal?

    Reply
    • Anand Upadhyay
      November 24, 2020 at 5:02 pm

      Hi

      No this option is not available.

      Reply
  2. MD.Elias
    November 27, 2020 at 10:16 pm

    yes, not avaible any model popup widget…

    Reply

Leave a Reply Cancel reply

  • About Us
  • Terms of Service
  • Contact Us
© 2021 WebTechStreet
  • Home
  • Products
    • AnyWhere Elementor Pro
    • Elementor Addon Elements
    • Anywhere Elementor
    • Form Vibes
  • Blog
  • Contact Us
  • Timeline
  • Info Circle
  • Comparison Table
  • Thumbnail Slider
  • Content Switcher
  • Filterable Gallery
  • Flip Box
  • After Before Image Compare
  • Particle Background
  • Animated Gradient Background
  • Background Image Slider
  • Dual Button
  • Modal Popup
  • Animated Text
  • Google Map
  • Post List
  • Price Table
  • Shape Separator
  • Split Text
  • Text and Icon Separator
  • Twitter feed
  • Progress Bar
Menu
  • Timeline
  • Info Circle
  • Comparison Table
  • Thumbnail Slider
  • Content Switcher
  • Filterable Gallery
  • Flip Box
  • After Before Image Compare
  • Particle Background
  • Animated Gradient Background
  • Background Image Slider
  • Dual Button
  • Modal Popup
  • Animated Text
  • Google Map
  • Post List
  • Price Table
  • Shape Separator
  • Split Text
  • Text and Icon Separator
  • Twitter feed
  • Progress Bar