How to Create an Image Popup in WordPress [Beginners Guide]

Did you ever land on a page and have an image popped up promptly? It grabbed your attention instantly, didn’t it? That’s what we call an Image Popup.

Adding image popups on websites is widely used to increase conversion on websites. This is very true for new WordPress site owners – people who are just getting started.

They help grab visitors’ attention and improve engagement.

It’s a very easy process to add an image to popups. I did it myself in 7 steps:

  1. Create your popup with the necessary elements
  2. Select your image for the popup
  3. Design the popup to make an appealing layout
  4. Select the ideal target audience for it
  5. Choose a suitable trigger setting
  6. Configure popup visibility 
  7. Set schedule and interval setting for the popup

I will demonstrate how to pop up an image in WordPress in detail. Moreover, you will find other ways to create image popups here. So, without any further ado, let’s get started 👏

What Is an Image Popup?

Image popups mean displaying an image in a popup window when users land on your website. This action highlights important visuals or promotional messages without diverting visitors away. They’re commonly used on websites like galleries, portfolios, and e-commerce stores

For example, store owners often display their best or promotional products to inform the visitors. Additionally, such popups are often used to gather reviews and capture leads from visitors.

An image popup gives certain advantages. Like,

  • Increase sales: You can boost your sales performance by displaying promotional messages to your potential buyers.
  • Direct your visitor: You can channel your visitor to a desired destination smoothly and easily.
  • Enhance conversion rate: A well-placed popup can motivate the visitor to buy the product and increase the conversion rate.
  • Expand community: They also help to expand the community and tap into diversified customer pools.

Image popups have been around since the early days of WordPress and are still a necessary feature. However, there hasn’t been any built-in option to add images directly to popups. Fortunately, there are three simple ways to add an image to a popup on WordPress.

1. Using custom code: To pop up an image without a plugin, custom coding is your first choice. Popping up an image is easier than adding a video popup in WordPress. You need to learn about HTML, CSS, and JavaScript to set up your desired image popup.

On the other hand, if you’re unsure about coding by yourself, you can always hire a professional to create and design the popup.

2. Using built-in theme setting: Image popups are a basic feature that some themes include as a part of their built-in setting. However, you may need to go to an extent to acquire this access. Some popular themes that provide image popup settings:

  • OceanWP (Ocean Extra plugin required)
  • Kadence (Pro+Kadence blocks plugin required)
  • Salient (Premium version)

3. Using a dedicated plugin: You can avoid all these obstacles by simply using a dedicated plugin. These third-party plugins let you customize every aspect of your image popup in a user-friendly way. There are plenty of plugins for this feature, but I will mention some popular plugins for you.

  • WowOptin
  • Popup Builder
  • OptinMonster
  • WP Popups

To show you a step-by-step process to pop up an image, I will use WowOptin. This plugin provides a canva-like user interface that even a beginner can create stunning popups on the first attempt.

Read The Story Behind WowOptin to know more about it and what makes it unique.

Unique Features of WowOptin

Before proceeding to the step-by-step guide, I will mention some unique features you should not miss 👇

  • User-friendly interface: Canva-like user interface lets me access everything within reach. I became familiar with the interface within moments.
  • Personalized targeting: WowOptin lets me target my preferred audience. I could decide to show optins to whomever I want and change the frequency too.
  • Integrates with themes: You can easily use WowOptin with just about any popular theme and the compatibility is spot on.
  • Track performance: You can keep an eye on the performance of your image popups from the WowOptin dashboard. It will give you the data you need to strategize your campaigns.

Check out WowOptin’s capabilities at a glance in this video:

Step-by-step Guide to Display an Image Popup in WordPress 

Before starting the process let’s make sure you have activated WowOptin. To follow detailed instructions for the installation process, go through the documents. You may also store a backup for the existing site for preserving and rollback opportunities.

Everything‘s perfect. Let’s Roll.

Step 1: Select the Popup Optin

Open your WowOptin dashboard and click the Create New Optin button. It will take you to the template tab, but you may also directly go to the Templates. Here you will see more than 60 readymade templates for you just a click away.

Create new optin for image popup

Click Start from Scratch and there will be a popup for you to choose the optin type. Select Popup and go to the builder page where you can design your popup.

select image popup

Step 2: Add an Image Element

From the left sidebar, choose the Image element under the Elements section. After adding the element you need to add the image from the Image Setting.

add image element to the popup

Click the element on canvas and go to the image setting from the center top of the builder. Select an image from your media gallery or upload it.

image popup setting

Step 3: Style Your Image Popup

Just adding an image to the popup won’t bring much attention to your use. Let’s see how I designed it. You should explore the options and customize it however you like.

I added elements to make the image popup more engaging. I added a Text element to input my text and dragged it to a suitable place. I can change typography, color, etc basic settings from the bar above.

design image popup

Similarly, I added shape, countdown, and button to organize my desired popup image. Feel free to customize every element from the bar above. I chose my desired shape and changed it in the shape color setting.

Shape setting for image popup

You should explore countdown and button settings from their functions above. From there, you can change as you like.

design elements of the image popup

After that, I opened the Design tab from the sidebar and changed the Background Style. You can personalize further by navigating the layout settings, position, and close behavior.

image popup Design settings

Don’t forget to check the popup’s responsiveness by using the device option in the bar above. Also, use the live preview button to ensure it looks great all together. If needed, you can rearrange the popup by dragging the element to your preferred position.

additional setting of image popup

Once the design is final, let’s move on to target the right audience.

Step 4: Choose Your Popup’s Target Audience

WowOptin lets you choose your Target Audience. It diversifies your users based on their key characteristics and sources. Targeting a specific audience maximizes the possibility of conversion rate.

I can choose based on devices, visitor type, language, geography, etc. You can even change OS preferences and traffic sources.

Set image popup's target audience

Step 5: Setting Trigger Behavior of the Popup

The Trigger option decides what behavior led your image popup to appear. It means any specific user behavior will display the popup. It helps to enhance the visitors’ experience for your site.

Here, I selected Exit Intent which will take effect if the user intends to leave the page. The sensitivity indicates how quickly the popup will appear based on cursor movement.

manage trigger setting of popup

Step 6: Defining Display Rules for the Popup

In WowOptin you can select the pages you want to display the image popup. Display rule helps you utilize tailored popup interactions for each page.

Here I selected all pages to display the popup. You can set your display rule based on your preference.

display rule for image popup

To know more about the display rule visit here.

Step 7: Scheduling and Interval Setting

You can select a suitable schedule for your image popup to display. This feature helps you to manage multiple campaigns or offers easily.

You can also select the recurring schedule.

manage schedule setting for popup

The Interval setting will control the display frequency and closing behavior of the popup. It helps you optimize visitors’ experience.

popup interval setting

After finishing up, save/update the popup. Now you should check the frontend page and observe your image popup.

Let’s see how my popup works on the live page.

image popup

To get ultimate utility you should follow these tips & tricks.

  • Fix your purpose for the popup. You can design a popup to show information, push notifications, collect leads, or increase engagement.
  • Design the popup aligning with the purpose. Add forms for interaction or buttons for conversion and offers.
  • Using contextual images increases the possibility of lead collection and conversion.
  • Don’t overcrowd your image popup. Organize it in a simple interactive way. Impressive visuals tend to have a lasting impact.
  • Well-executed popups provide enhanced page visuals and better performance. Use all the tools strategically to improve visitor experience.

Keep up with the updated version of the plugin. Also, subscribe to the newsletter to know about the latest updates and optimum use of the features.

Conclusion

Using an image popup can increase your profit margin significantly. A well-placed popup with an engaging appearance has a higher chance of conversion. Along with boosting sales; users experienced increased impression and engagement rates after implementing WowOptin. Its futuristic yet simple UI features are gaining a reputation quickly.

If you face any issues or have some suggestions, write them in the comment section. Also, contact with the support team for extensive productivity.

Resources You’ll Find Helpful

FAQ

Does an Image Popup Affect SEO?

Image popups don’t affect your SEO directly. However, image loading, responsiveness, and behavior can impact your site authority. Also if there are any fishy activities linked to your popup, it might send the wrong signal to the search engine. Monitor & track the optin performance through WowOptin to get ahead of such activity.

Can You Hide Popup Images on Mobile?

Yes, you can hide popup images on mobile by using WowOptin. Select the image element on the optin builder and click the hide-in device function on the setting bar. A popup will appear, letting you decide on which devices you want to hide the image. Toggle the mobile option and it won’t show on any mobile.

Which Image Format is Suitable For Popup?

You can use any type of image in the popup considering the size of it optimized. However, WebP images are suitable for quick loading quickly which incentivizes users’ experience.

Can You Collect Contact Information From a Popup?

Yes, you can collect contact information through an interactive WowOptin popup. Use the Form element of WowOptin and it will increase your lead collection efficiently.

Like this article? Spread the word
Shahbaj Arefin

Written byShahbaj Arefin

Arefin is a passionate writer with over three years of experience exploring the world of WordPress and WooCommerce. He loves diving into themes, plugins, and tools, sharing insights that help users build and optimize their websites with ease. When he's not writing, you’ll find him testing the latest tech to uncover game-changing features for online businesses.

Leave a Reply

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