Popups

Updated 4 months ago

Popup Element is used to show a popup window. It is available in:

Live Builder;
WPBakery Builder;
Header Builder.

Check Popup examples

Content settings #

Reusable Block — set up the popup to show the pre-designed content from Templates > Reusable Blocks.
Title — set a custom popup title
Description — set a custom description (which will appear inside a popup)

Trigger #

Show Popup via — set a popup show option via "Button", "Image", "Icon", "Custom element", "Page load"
Button Label — set a custom label for the popup element ("Click me" by default)
Button Size — set a custom button size (examples: 16px, 1.2rem, max( 1rem, 1vw )
Button Style — add or edit button styles on Theme Options > Button Styles
Alignment — set an alignment as "Default", "Left", "Center", "Right"
Icon — adding an icon to an IconBox. Enter the icon name from the list. Examples: star, edit, code to add custom icon
Icon Position — set custom icon position as "Left", "Right"

Style #

Popup Width — set a custom width for popup window (examples: 200px, 100%, 14rem, 10vw, 600px by default)
Popup Padding — set a custom popup padding (examples: 20px, 15%, 1rem, 2vw, 5% by default)
Popup Corners Radius — set a custom popup corner radius (examples: 5px, 50%, 0.3em, 12px 0)
Title Background Color — choose a title background color from the dropdown list of theme colors "Header Colors": ("Background", "Text / Link", "Link on hover", "Transparent Header: Background", "Transparent Header: Text / Link", "Transparent Header: Link on hover", "Browser Toolbar"), "Alternate Header colors", "Content colors", etc. Choose options in Theme Options — Colors tab
Title Text Color — choose a title text color from the dropdown list of theme colors "Header Colors": ("Background", "Text / Link", "Link on hover", "Transparent Header: Background", "Transparent Header: Text / Link", "Transparent Header: Link on hover", "Browser Toolbar"), "Alternate Header colors", "Content colors", etc. Choose options in Theme Options — Colors tab
Popup Background Color — choose a popup background color from the dropdown list of theme colors "Header Colors": ("Background", "Text / Link", "Link on hover", "Transparent Header: Background", "Transparent Header: Text / Link", "Transparent Header: Link on hover", "Browser Toolbar"), "Alternate Header colors", "Content colors", etc. Choose options in Theme Options — Colors tab
Popup Text Color — choose a popup text color from the dropdown list of theme colors "Header Colors": ("Background", "Text / Link", "Link on hover", "Transparent Header: Background", "Transparent Header: Text / Link", "Transparent Header: Link on hover", "Browser Toolbar"), "Alternate Header colors", "Content colors", etc. Choose options in Theme Options — Colors tab
Background Overlay — choose a background overlay color (example rgba(0,0,0,0.85) from color picker
Animation Type —set a animation type option "Fade", "Scale Up", "Scale Down", "Slide from the Top", "Slide from the Bottom", "3D Flip (Horizontal)", "3D Flip (Vertical)"

Design settings #

All Design settings are the same for all elements. Read the article.

How to open the Popup by clicking the FlipBox element #

Add the FlipBox element, go to its Design settings and set the Element ID, for example, "flipbox1".
Add the Popup element, in its Trigger settings, select Show Popup via Custom element, and set "#flipbox1".

Cookie Notice #

Allows showing the notification about cookies usage to the site visitors.

This built-in cookie notice only shows a "consent" option for your website visitors. If you need more control over cookies/visitor agreements, use the appropriate plugins.

When turned on, you can specify the:

Message — the content of the notification
Show link to the Privacy Policy page — allows showing the link to the Privacy Policy page, which you can set up in the Privacy Settings admin page
Position — defines if the Cookie Notice should appear at the top or the bottom of the screen.
Button Label — defines the text of the submit button.
Button Style — a dropdown defining the style of the submit button.