Franchi Web Design

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.

• 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.

• 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.

• 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.

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!

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