How to create a Popup

Estimated reading: 3 minutes 100 views

Introduction CocoPopup is a flexible block that can be inserted anywhere on your WordPress site when using a Full Site Editing (FSE) theme. You can add it to a post, a page, the site footer (useful if you want a popup to appear site-wide), WooCommerce products, and more. This guide will walk you through the steps to create a popup with CocoPopup.

Below you can see the steps to create a Popup.

Steps to Create a Popup

  • Add CocoPopup Block in Gutenberg Editor
    From the Gutenberg editor, add a new block and type “CocoPopup” to find the block.
  • Insert the CocoPopup Block Select the CocoPopup block from the search results and insert it into your desired location.
create popup cocopopup
  • Set the Popup ID and Name Once the block is added, give it a unique ID and a name. This is useful for identifying and managing multiple popups.
create popup cocopopup
  • Configure Popup Settings You can choose various settings to control how the popup behaves:
    • Event: Define the logic that triggers the popup (e.g., on page load, after a delay, on button click, etc.).
    • Condition: Set the conditions that must be met for the popup to appear (e.g., specific pages, user roles, etc.).
    • Close Method: Choose how the popup can be closed (e.g., by clicking outside, a close button, etc.).
  • Customize the Popup Style Adjust the popup’s style to align with your website’s design. You can change the background, borders, text color, and more.
  • Customize the Button Modify the button style, text, and action to match your needs. This is often used to trigger an event or navigate to a different page.
create popup cocopopup
create popup cocopopup
create popup cocopopup
  • Add Content to the Popup CocoPopup allows you to add any Gutenberg block inside the popup, giving you the flexibility to create engaging content. Consider adding images, text, forms, or other elements to make your popup attractive and effective for your goals.
  • Preview and Test the Popup After configuring your popup, preview it to ensure it appears as expected. Test the triggers and closing methods to confirm that everything works correctly.

The video below can also help in visualizing the process in details.

Create a Popup even faster with Patterns!

From the Gutenberg editor, click ‘+’ and choose ‘Browse all’, a sidebar will appear on the left with the various blocks and patterns available, select ‘Pattern’ and click the ‘Popup’ item, select the Popup you like best, you can modify it as you wish and I’ll publish!

CocoPopup create guide
CocoPopup create guide
CocoPopup create guide

The video below can also help in visualizing the process in details.

Creating a popup with CocoPopup is straightforward and highly customizable. Use these steps to design popups that engage your audience and meet your objectives.

Top

Conditions

Conditions are the requirements that the visitor must meet for the popup to open...

Responsive

CocoPopup has the ability to display the WordPress popup based on the visitor...

Schedule

PRO CocoPopup has a ‘Pro’ extension that allows you to schedule the ...

Closing

CocoPopup provides you with many options for closing the popup. You have a toggl...

WooCommerce

PRO CocoPopup allows you to set specific conditions for the WooCommerce plugin t...

Parameters

Events

CocoPopup has the ability to set events to diversify its entry. By default, it i...

Animation

With CocoPopup you have various animations at your disposal to make it appear mo...

Body Behavior

With CocoPopup you can customize the style of the body of the page on which the ...

Button

With CocoPopup you can customize the style of the button popup as you wish, thus...

Structure

With CocoPopup you can customize the style of the popup as you wish, thus making...

Style

Chat Icon Close Icon