Design Section – FirePlugins

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.

Below you can find each setting per Design section.

Configure the popup width and height.

SettingDescriptionNotes
WidthSet the width of the popup for desktop/tablet/mobile devices in various measurements.
HeightSet 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.

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

SettingDescription
PaddingThe CSS padding properties are used to generate space around an element’s content, inside of any defined borders.
MarginThe CSS margin propertiy is used to generate space around the popup and set the size of the white space outside the border.
Text ColorSet the text color within the popup.
Background ColorSet the popup’s background color.
Text PositionSet the position of the text within the popup.
ShadowSet 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.

SettingDescriptionNote
Close ButtonShow the close button within the popup, outside the popup, or hide it.
Choose Button TypeWhether the button type will be an icon or an image.
Select ImageSelect the close button image.Appears only if “Choose Button Type” is “Image”
ColorClose button color.
Hover ColorClose button hover color.
Font SizeClose button font size.
DelaySet a delay until the close button appears.

Animations

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

SettingDescription
Open AnimationSet the opening animation of the popup.
Close AnimationSet the closing animation of the popup.
DurationSet the animation duration

Border

Set the border style, color, width and radius.

SettingDescriptionNotes
StyleSet the popup border style.
ColorSet the border color.Appears if “Style” is not “None”.
WidthSet the border width.Appears if “Style” is not “None”.
RadiusSet the radius of the popups corners.

Overlay

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

SettingDescriptionNotes
ToggleEnable/Disable overlay.
Background ColorSet the background color of the overlay.Appears if toggle is enabled.
Close on ClickSet 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.

SettingDescriptionNotes
ToggleEnable/Disable background image.
ImageSet the background image.Appears if the toggle is enabled.
RepeatSet whether the image should repeat or not.Appears if thetoggle is enabled.
SizeSet the image size.Appears if the toggle is enabled.
PositionSet the position of the image.Appears if the toggle is enabled.
Was this helpful?