August 17, 2023

Add an Elementor Blog Preview Popup

Play Video

With an Elementor blog preview popup, you can give your website visitors a sneak peek of your blog posts. Let’s have a look together with Web Squadron how you set up the popup and let your users engage with your content.

Setting Up the Elementor Blog Preview Popup

  1. Accessing the Templates
    Head over to your WordPress sidebar. Here, you’ll spot an option labeled ‘templates’. Click on it.
  2. Creating a New Pop-Up
    Inside, there’s an option to create a new pop-up template. Click on it and name our pop-up “bottom post”.
  3. Layout Adjustments
    Now, adjust the layout settings to get the look and feel you desire for your pop-up.

Building the Popup Content

  1. Add a Loop Grid
    Add a loop grid and display your featured images, offering visitors a quick look at your content.
  2. Image Settings
    Adjust the height, object-fit, position, border radius, and box shadow.
  3. Save & Refine
    Once you’re happy with how things look, save your template. But remember, there’s always room for tweaks later on.

Styling and Positioning the Popup

  1. Pop-Up Settings
    Adjust the width and position to fit your website’s design. Decide on the entrance and exit animations for a smooth transition.
  2. Close Button
    Style the close button so it’s easily noticeable but not too distracting. Choose its position, color, and size.

Set Display Conditions for your Popup

  1. Display Conditions
    Decide where on your website you want the pop-up to appear. Choose specific pages or have it across your entire website.
  2. Setting Up the Trigger
    Choose an icon or button that, when clicked, will activate the pop-up. Link it to the pop-up using dynamic tags.

Testing the Elementor Blog Preview Popup

  1. View & Click
    Navigate to your page and find the icon or button you set up. Give it a click!
  2. Navigation
    Interact with the previews inside your pop-up. They should lead you to the actual posts or products.

Wrapping Up

And there you go! That’s how you set up an Elementor blog preview popup on your website. It’s a neat feature that can add a touch of interactivity to your site. Give it a whirl, play around with different designs, and see how it works for you. Happy designing!

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Add an Elementor Blog Preview Popup
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.