Skip to content

How to Create a Popup in WordPress for Free!

If you want to create a popup in WordPress for your site for free, then your search is over as till the end of this article you can easily create a popup in your WordPress site.

One cool trick to grab the attention of visitors and turn them into loyal fans or customers is having popups on your site.

In this article, I’ll show you how to make popups for free that people like and that make them stick around on your site longer.

otter-blocks-popup-demo

☝️ Here is the screenshot of what I’m going to teach you in this article.

Whether you’re a pro at WordPress or just getting started, I’ve got you covered with simple tips and tricks to make your website pop!


JUST AN ADVERTISEMENT


CONTINUE READING BELOW

Well if you want to see a demo of the popup that we’re going to create in this tutorial then click below button to check out.

newsletter-blogging-raptor

Join My Newsletter!

Found my articles helpful? then Subscribe to my newsletter for free to get the latest updates! Don’t worry, I won’t spam!

So, without any further talk, Let’s dive in!

Create a Popup in WordPress with Otter Blocks

I will guide you on how to do this step-by-step, first, we need a plugin called Otter Blocks.

Step 1: Installing Otter Blocks Plugin

wordpress-add-new-plugin

To install Otter Blocks first we need to go to our WordPress dashboard, click on the Plugins tab then click on Add a New Plugin.

search-otter-blocks

Now just search “Otter Blocks” on the “search plugins” text box, and you will see the Otter Blocks plugin by Themeisle then just click on the Install Now” button.

activate-otter-blocks-plugin

After it gets installed, click on the “Activate” button to activate the plugin.

otter-blocks-dashboard

And after it gets activated you will be redirected to the Otter Blocks dashboard where you don’t need to do anything.

Now to add a new popup to your new or existing posts/pages, just open that post/page.

Step 2: Adding Popup to Your Page/Post

For this tutorial, I’m using my RaptorKit website’s Contact page.

edit-page-wordpress

So just go to the Pages tab and click on the “Edit” button of the page in which you want to add a popup.

add-otter-block

After that, you just need to add the Otter popup block anywhere on your page. To do that just click on the add a block icon type “popup” and select the red color popup block.

otter-popup-block-variations

Then select the variation you want, if you want a completely blank page and create your own popup from scratch then select the “start from scratch” option, or you can select a “text and image” layout or a “form” layout.

I will select the “text and image” layout for this tutorial.

edit-popup-otter-blocks

Now you have added the popup successfully, and to customize it according to your needs just click on the “edit popup” button.

otter-popup-demo-raptorkit

As you can see our popup looks like this.

Now you can customize it as you want, it is very simple just like the normal page/post editor you can add any texts, blocks, images, or any other file you want to show your audience as a popup there are no restrictions.

otter-block-settings

On the right side toolbar, you can see the settings option from which you can the popup settings like trigger options, delay time, popup position, frequency, and other settings.

otter-block-customization

Also, we got the style options where we can change the dimensions like height and width of the popup, colors, padding, close button customizations, overlay color, and border settings.

Well, I won’t explain all of these settings as it’s very simple to understand, and everyone has their own customization requirements, you can customize according to your needs.

update-wordpress-page-post

After you have finished creating your popup just click on the update button to make it live on your page/post.

Now let me tell you more about the Otter Blocks plugin and features.

The popup block is free to use but there are some Pro features and for that, you need to get the Pro version of Otter Blocks.

You can get it by visiting the official Themeisle site by clicking the button below to avail the best available discounts.

Otter Blocks Features

  • New Patterns: containing a range of different elements in a variety of styles to help you build great pages.
  • Copy-Paste Block Styles: Save time and don’t do the same thing over and over again. Use this tool to easily copy and paste styles between blocks with just one click.
  • Extra Functionalities for all Blocks: It does more than just give you extra custom blocks for Gutenberg.
    It also adds special features like Custom CSS, Animations, and Visibility Conditions to the blocks already on your website, whether they’re default or from another source.
  • Custom CSS: This feature lets you change the appearance of any Gutenberg block on the page by adjusting its CSS properties directly.
  • Animations: You can easily make any block move on your page with animations, making your blocks and sections look more attractive.
  • Dynamic Content: Put the information you’ve customized for your posts directly into your blocks. You can use text, images, and links.

Types of Blocks by Otter Blocks

Advanced Heading Block: Headings now offer more ways to customize them, such as changing the font, highlighting parts of the text, and more.
Accordion Block: Make lists of content that stack up vertically. You can show or hide them with a click of a button. These are also called Accordions.
Section Block: Make a section that adjusts to different screen sizes and has up to 6 columns. You can customize and style it in advanced ways.
Button Group Block: You can quickly make many buttons and arrange them either vertically or horizontally depending on the device you’re using.
Tabs Block: Use this block to make lists of content stacked side by side horizontally. You can show or hide them with a click of a button.
Lottie Animation: With Otter’s Lottie Animation Block, you can show Lottie animations in any part of Gutenberg.
Flip Block: This tool makes a card that flips, allowing you to add any content or blocks found in Gutenberg.
Pricing Block and Section: Use this block to easily make attractive pricing tables and sections for your services or products.
Slider Block: Utilize this Otter block to craft and personalize image sliders on any Gutenberg page.
Countdown Block: Are you counting down to a big event? Use these Gutenberg blocks to show it off.
Maps Block: Show Open Street Maps on your website using the Maps block.
Progress Bar: Display your progress using a visually appealing Progress Bar block.
Product Review Block: Transform your posts into insightful reviews with ratings and attract leads using an effective review block.
Contact Form Block: Include contact forms on your website. You can also connect them with Sendinblue or Mailchimp to start generating leads if you wish.
Popup Block: Make eye-catching popups and customize when and how they show up and close.
Service Block: Utilize this block to showcase your business services, and add an optional button for more details.
Icon List Block: Make dull point lists more exciting by using custom icons instead of regular pointers.
Icon Block: Show and personalize any icon from Font Awesome or our selection of custom icons anywhere on the page.
Circular Progress Block: Display your progress using a visually appealing Circle Counter block.
Masonry Gallery Block: Spice up your gallery by turning it into a Masonry layout Gallery instead.
Sharing Icons Block: Share buttons allow your website visitors to easily share content on any social sharing service.
AI Block: Easily create content, forms, and layouts with AI. Share your ideas, and see AI bring them to life.
Posts Block: Use this block to insert items from posts, pages, and custom post types into the page you’re currently editing.
Stripe Checkout Block: Sell your products effortlessly, whether they’re ebooks, licenses, or more, without requiring a complete online store setup.
Google Maps: Easily integrate interactive Google Maps with Otter’s Google Maps block. Enjoy features like Map Type, Full-Screen Control, Street View, and more seamlessly.
Testimonial Block: Showcase your customer reviews on any post or page with Otter’s Testimonial Block.
Add to Cart Block (PRO): Place an “Add to Cart” button block for any WooCommerce product anywhere on the post or page you’re editing.
Product Review Comparison (PRO): Effortlessly compare products or services using our Review Comparison Table feature. Simplify decision-making for your users.
Live Search Block (PRO): Enhance your search experience with Otter Blocks. Get real-time results and customized post types, all within the Live Search panel.
Business Hours Block (PRO): Design a beautifully styled Business Hours table and adjust its settings until it’s just right.

You can check their demos on the official Themeisle site by clicking here.

Alright, this was a quick step-by-step tutorial on how you can create a popup in a WordPress website with the Otter Blocks plugin, I hope you found it helpful, and if yes then do share it with the one who wants to create a popup on their WordPress website.

Loved It? Then Share It On Social Media!
Shrey Kajaria

Shrey Kajaria

A Blogger, SEO Expert, Affiliate Marketer, YouTuber, and Technology Freak. Love playing all outdoor sports especially Cricket and Football.