Image Popup

Image Popup widget

Use this html template to integrate our pop up to your website effortlessly.
Rated 4.8 out of 5 from over 700 reviews on G2.com
Template Catalog

This template doesn't work for you?

Check out more ready-made templates for any use case or build your own!
Grab your users’ attention and don’t let them leave your website.
Banner Popup
Create an appealing popup which will catch the eye using wide range of options provided by Elfsight Popup.
Welcome Popup
Greet your audience showing a welcoming popup and get more conversions.

How can I use an Image Popup widget?

The Image Popup Widget gives you an opportunity to show an image in a popup box with zero development or web design. Insert an image into your website content and get it seen often. Simply pick and choose a ready for use template from a range of alternatives, plainly tailor it in a free online demo, and insert installation code to the operating website builder: WordPress, Elementor, Bootstrap, and many others. 

How to add an Image Popup to a website?

The production is pretty easy! Below are crucial actions, after which you’ll make a professional and an appealing Image popup. You have a possibility to continue and definitely change the widget’s and all elements’ colors, pictures, fonts, sizes, behavior. 

  1. Register or log into Elfsight apps service
  2. Select Popup widget and opt for your most-liked template
  3. Go to builder section in editor and add an Image block there
  4. Tweak the widget. Save the changes
  5. Get two lines of installation code
  6. Paste it to an HTML field of your web page template

Afterwards, consider that the Image popup by Elfsight is cloud-based, which conveys it’s actually based on Elfsight servers. There’s a chance to make changes any time at Elfsight apps and they will show on your site instantly. In addition, the popup widget doesn’t slow down the speed of the site.

Try the Image Popup for yourself! It’s free and you can create it in an online popup builder:
Configure your template ↓

What events trigger a pop-up?

Elfsight Image Popup is fantastic for you to determine its functioning however you wish. The Image box will appear in front of users’ eyes in any case you specify. For example, it may show up on page load, on scroll, after a particular time on page, and so on. Below, you can read about the principal triggers which can help you make an Image popup show up. 

  • Onclick
    This is most obvious and the easiest variant of making an Image popup. It may come out after clients hit a particular element on a web page. For instance, you can trigger an Image to come up in a window after the site user has tapped on just a link in the midst of a text or a call-to-action button. 
  • Onload
    You don’t need to think about tricky strategies and settings. Merely set up the Image popup to become visible right on a load of a page, and enjoy customers getting acquainted with your proposal straight away. On the contrary, be cautious about an onload config for an Image window. Banners and popups which come into view at the wrong time irritate Internet users more than sell. 
  • Onscroll
    The Popup modal gives a chance to make the Image show after a customer has scrolled over a certain percentage or element of a web page. It works phenomenally when a customer has got acquainted with the proposition, your brand, and content, and is willing to purchase something. In such a case, an Image will show perfectly at the right time. 
  • On exit intent
    Are website users in a hurry to quit a site? It could be that they haven’t got familiar with something particularly important on a webpage. Here’s what exit intent serves for: customers click on an exit page symbol, and an Image popup becomes visible without any delay. 

Select and personalize the design of ready templates! 

Applying a Popup widget for demonstrating an Image has tons of advantages. 

  • A heap of professional templates
    You can use them as is or change any way you want. Templates are changeable, modifiable, mobile-friendly, and exquisite! 
  • The editor is clear, explicit and easy to use
    There is an opportunity to form a popup by solely putting different constituents together in it. It’s completely pointless to become a professional web developer to make your video popup window meet the integral site design.
  • Attach video links from Vimeo and YouTube
    They are the most popular video hostings in the world, familiar to masses. 
  • Add any components in any sequence
    Be certain texts, headers, buttons, and images will look awesome on any screen customers use. 


Nonetheless, you might still have questions regarding creating and installing the Image popup on a particular CMS. Here you may get acquainted with instructions for the most popular CMS and website builders. The coherence is pretty the same for any other site builder. And bear in mind: in case of any difficulties with building, tailoring, or inserting your Image lightbox, don’t think for a minute to reach out to our customer service team – they’ll keenly assist at that exact moment.

How to embed an Image Popup on WordPress?

WordPress is nearly the most popular CMS. Sites on WordPress are freely indexed by search engines such as Google and are speedy and exquisite. This is a typical CMS, where Elfsight Image Popup acts magnificently in HTML code. Here’s a guide how to add an Image popup to your site on WordPress: 

  1. Log into or register the Elfsight dashboard and make a popup widget there
  2. Save it and get two lines of custom code for widget installation
  3. go log into a WordPress dashboard
  4. Now, go to ‘Pages’
  5. Move to a page where you want the Image to show up
  6. Create an HTML section there
  7. Insert installation code there

Save the alterations and enjoy the Image online in WordPress

That’s right! Since you’ve added the Image plugin to WordPress, you have a chance to turn back to Elfsight service any time you want and make alterations to it. Any modifications will be disclosed in the published widget immediately after they are saved, and you won’t have to turn back to WordPress HTML. 

Moreover, you can embed the Image popup in all pages. To do it, you should go to the site template and embed a code for widget installation in the footer or header. 

How to add an Image Popup to Elementor?

Elementor is a fantastic widget for WordPress which gives a possibility to modify WordPress websites in an uncomplicated online editor. However, it’s important to mention that there’s a chance to insert custom HTML in only the premium plan. Here’s how you can make a Image popup become visible on the Elementor website: 

  1. Register or log into the Elfsight dashboard and create a Image popup lightbox there
  2. Save it and copy a code for widget installation
  3. Now, go to a WordPress admin panel
  4. Move to a page where you want the Image lightbox to come into view
  5. Create an HTML field there
  6. Add the installation code there
  7. Good job!

Now, you have a possibility to see the Image popup on a page. It is going to be live as soon as you save changes.

Is Image Popup Bootstrap-ready?

Yes, the image in a form of popup will perfectly meet the requirements of Bootstrap. It is a CSS frame that allows the creation of responsive mobile-first websites. Bootstrap is an extraordinary framework for publishing images in a popup.

How to embed a Popup widget with an image if I have a different platform?

Here’s the list of the most widespread CMS: Wix, Shopify, Squarespace. Discover yours and do not waste time to add an image in popup to the site on any platforms – it’s very easy.