Design Section

The Design section allows you to set the look and feel of your popup. Below we list all available settings with a helpful description.

• Popup Size
• Popup
• Close Button
• Animations
• Border
• Overlay
• Background Image

Below you can find each setting per Design section.

Popup Size

Configure the popup width and height.

Setting	Description	Notes
Width	Set the width of the popup for desktop/tablet/mobile devices in various measurements.
Height	Set the height of the popup for desktop/tablet/mobile devices in various measurements.	The “auto” measurement makes the popup’s height adjust based on its content.

Popup

Configure the popup colors, text alignment, space within and around the popup as well as it’s shadow.

Setting	Description
Padding	The CSS padding properties are used to generate space around an element’s content, inside of any defined borders.
Margin	The CSS margin propertiy is used to generate space around the popup and set the size of the white space outside the border.
Text Color	Set the text color within the popup.
Background Color	Set the popup’s background color.
Text Position	Set the position of the text within the popup.
Shadow	Set the popup shadow.

Close Button

Configure the close button of the popup by displaying either an icon or an image of your choice. You may also delay the appearance of the close button to ensure the popup gets the visibility you need.

Setting	Description	Note
Close Button	Show the close button within the popup, outside the popup, or hide it.
Choose Button Type	Whether the button type will be an icon or an image.
Select Image	Select the close button image.	Appears only if “Choose Button Type” is “Image”
Color	Close button color.
Hover Color	Close button hover color.
Font Size	Close button font size.
Delay	Set a delay until the close button appears.

Animations

Set the entrace & exit animations of the popup as well as the duration of the animation.

Setting	Description
Open Animation	Set the opening animation of the popup.
Close Animation	Set the closing animation of the popup.
Duration	Set the animation duration

Border

Set the border style, color, width and radius.

Setting	Description	Notes
Style	Set the popup border style.
Color	Set the border color.	Appears if “Style” is not “None”.
Width	Set the border width.	Appears if “Style” is not “None”.
Radius	Set the radius of the popups corners.

Overlay

Configure the popup background overlay to bring your popup’s content to your users attention.

Setting	Description	Notes
Toggle	Enable/Disable overlay.
Background Color	Set the background color of the overlay.	Appears if toggle is enabled.
Close on Click	Set whether the popup can close upon clicking the overlay.	Appears if toggle is enabled.

Background Image

Set the background image settings, repeat, size and position.

Setting	Description	Notes
Toggle	Enable/Disable background image.
Image	Set the background image.	Appears if the toggle is enabled.
Repeat	Set whether the image should repeat or not.	Appears if thetoggle is enabled.
Size	Set the image size.	Appears if the toggle is enabled.
Position	Set the position of the image.	Appears if the toggle is enabled.