Following requests from customers, from Uncode 2.9.0, we have decided to provide support for Popup Maker. This support includes a clean and minimal theme style, tips for optimizing settings, and configuring pop-up triggers.

PopUp Maker is a versatile WordPress plugin designed to facilitate the effortless creation and management of pop-ups on websites. It supports multiple triggers like time delay, scrolling, and exit intent, enabling timely visitor engagement.

The PopUp Maker plugin is not included within the Uncode theme or listed as a required plugin. This decision aligns with our commitment to maintaining a streamlined and lightweight theme, ensuring users have the flexibility to select only the features they need.

Demo Popups

As previously mentioned, the Popup Maker plugin is not included in the list of required plugins for the Uncode theme, which means its demo contents cannot be imported with the Demo Import. However, in our demo, we have created a "Features → Popup Page" that showcases the designs of different popups used in various Uncode homepage demos, ready for implementation. To replicate one of these designs, please follow these steps:

1. If it's not already present in the imported Demo Contents, import the "Popup" page through the "Import Single Layouts" feature;
2. Access the "Popup" page in your own installation and copy the Row of the Popup you want to replicate, screenshot ;
3. For Beta Testers, you can find the shortcode for a demo popup provided following this link (please note that since we have different Theme Options in our installations not all elements may have the same design).

How to create a Popup

1. Install the Popup Maker plugin for free from the WordPress repository or from the Install Plugin page of your installation, and activate it: Popup Maker on WordPress.org;
2. Navigate to the Popup Maker menu, click "Create Popup", and enter a title, for example, "Classic Workshop", screenshot ;
3. Paste the previously copied shortcode and save the page, screenshot .

Configuring a Popup

Configuring a popup involves a straightforward process that requires consideration on how you want the popup to appear on your website. Here’s how to set up each aspect:

Triggers

Triggers are the actions or events that cause a popup to open:

• Click Open: This trigger opens a popup via a button or a link. If you want to open a popup on a button click, activate this trigger and copy the class code from the general tab, screenshot .
• Paste this class in the Extra → Extra Class Name of the button that will trigger the popup, screenshot ;
• Time Delay/Auto Open: This automatically opens a popup after a page has been visited for a specified amount of time. Simply select this method in the trigger options, screenshot ;
• Form Submission: This opens a popup after a form has been submitted.

Targeting

This feature allows you to display the popup to specific segments of site users. By default, the popup's code is automatically inserted into all pages of your site. If you wish to limit the popup to certain pages, use these options to restrict it. For example, in this case, the popup is only inserted on pages with IDs 140066, 119085, screenshot .

Display

The display menu offers various options that define how the popup is shown:

• Display Presets: Typically, we use the default “Center Popup”, screenshot ;
• Appearance: Choose “Uncode Theme” or another if you prefer a different popup theme, screenshot ;
• Size: Set the Max Width in pixels, e.g., 1150 or 900 px, screenshot ;
• Animation: Choose an entrance animation, screenshot ;
• Position: Opt for Location → Middle Center, and activate the Fixed Position option, screenshot .

Popup Maker Subscription Form

With Popup Maker, you can create subscription forms using its simple built-in functionalities, screenshot .

For more detailed instructions and options, refer to their documentation: Popup Maker Subscription Form Shortcode Documentation.

In our demos, we use several demonstration subscription forms. We prefer a clean and minimal layout, achievable using the following shortcode within a Text Block module, screenshot :

[pum_sub_form name_field_type="disabled" privacy_consent_enabled="no" disable_labels="yes" form_alignment="left"]

Attributes explained:

• name_field_type="disabled": Disables the name field for simplicity;
• privacy_consent_enabled="no": Opts out of the privacy consent checkbox;
• disable_labels="yes": Hides field labels for a cleaner appearance;
• form_alignment="left": Aligns the form to the left, fitting certain design aesthetics.

Notes

• Rows and Columns: We recommend using the Column element to design your pop-up. While Rows are also usable, we've found that Columns offer a more effective foundation for building our Popup designs. Essentially, we use Columns as the primary element for applying backgrounds and initiating the design process. If a Row does not directly apply a background, consider setting its padding to zero: this helps eliminate any unintended empty spacing or alignment issues stemming from default padding settings.
• Frontend Editor: it's important to note that the Frontend Editor is not supported in the pop-up environment. However, if you prefer using the Frontend Editor for pop-up design, you can design your pop-up on a standard page using the Frontend Editor. Once the design is complete, you can transfer it to PopUp Maker using the Copy & Paste features available in the Page Builder, Copying Rows with VC Clipboard.
• Use of complex modules: the integration of PopUp Maker with the Uncode theme leverages the built-in Page Builder, allowing for a quick and streamlined design process. However, while the Page Builder aids in pop-up creation, it is most effective for simpler content. Complex modules that involve advanced functionality or depend on scroll events may not perform as well in a pop-up context.