Since version 1.7.0 we have added many new options to customize the visual style of the popup. New options include settings for customizing popup inner border, popup overlay, popup shadow, close button, and ability to add custom CSS code.

How was it made?

The "Advanced Visual" settings are located under the relevant tab in "Campaign - Options" metabox on the popup campaign editing page. There are a few sections with settings, and at the bottom there's a live preview to display how the changes will affect the front-end result. Let's shortly go through the sections with settings.

Behavior

In the "Behavior" section you can choose the popup effect and how often the popup should be displayed to each user.

Popup Overlay

This section allows you to choose if to add a popup overlay, and choose its type. You can choose between color overlay where you can configure the color and transparency degree. Or you can choose the blur overlay and configure it.

Inner Border

Here you can enable and configure a popup border.

Popup Shadow

This section allows you to enable and configure a popup shadow. You can choose its color, type, define the offset if needed, and configure the blur.

Close Button

You can customize the close button - its regular color and color on hover, displaying shadow and its color, size of the button, its position and offset.

Custom CSS

And one more section allows you to add custom CSS for the popup campaign.