Popup Editor

Visual Composer Popup Builder allows you to design custom popups using the Frontend editor. You can create any type of popup using intuitive drag and drop editor and design the overall look of the popup.

With a popup template created, you can apply trigger events to your WordPress site either site-wide or on a specific page.

Popup Builder editor with the popup container element as a root

To access Popup Builder editor, navigate to Popup Builder section under the Visual Composer menu and select 'Add New'.

First, you will need to specify the popup template name.

Visual Composer Popup Builder editor interface is no different from the Frontend editor. This means you can use rows, columns, and content elements downloaded from the Visual Composer Hub to create a design for your popup.

As you create a new popup template, you will have a popup container element added to the layout by default.

The popup container is a default (root) element of the Popup Builder that allows you to style popup overall look (including overlay, close button, shape, and even popup width).

Popup container element for Visual Composer Website Builder

For the width of the popup, you can use either pixel or specify popup width in percentage. The percentage will be automatically calculated depending on the screen size of the popup.

The popup container attributes contain regular and container Design Options, that has additional functionality. Regular Design Options allows you to apply various background effects to your popup and use CSS Animation to control popup appearance.

Container Design Options (available in VCWB for rows, columns, and sections) include additional background styling options, so you can apply parallax effects, box shadows, and CSS gradient overlay to complement your popup.

Note: Popup Builder has in-built responsiveness which means that your popup content will look good on all devices.

Important: As you create a popup, don't think about the trigger events yet. You will be able to define popup displaying on various trigger events in the site-wide or page-specific templates.