Popups
Updated 4 months ago
Popup Element is used to show a popup window. It is available in:
- Live Builder;
- WPBakery Builder;
- Header Builder.
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.