Pop-up
Pop-up is a widget to create windows with important information, feedback forms, or other content. The user cannot continue interacting with a website without closing a Pop-up window.
The widget consists of several elements:
- Overlay – darkened layer below the Pop-up
- Close – standard button to close the window
- Content – area for content
Content that you want to place in a window must be nested in the Content element. You can add any element here, for example, Text, Image, Form, and so on.
The Pop-up widget cannot be moved in the layer list. It is a pinned element. When placed on a page, it appears at the end of the list of elements on the Layers tab.
A Pop-up is not displayed on a website by default. In order for the user to see it, you need to configure its opening with a certain user action, for example, when clicking on a button.
To do this, select a button that, when clicked, will open the Pop-up. Then configure the properties for it on the Logic tab in the right panel:
- select the Click action in the Actions section
- in the Action Details, set the following:
-
-
- select the Pop-up (on the Canvas or on the Layers tab in the left panel) as an element
You can apply any style to a Pop-up window on the Styles tab in the right panel, for example, change its size, background color, borders, corners, etc.
You can also adjust the overlay color or opacity and change the Close button icon.
The following settings are available for a Pop-up window on the Settings tab in the right panel:
General settings allow to:
- show/hide Pop-up windows on the Canvas
- set closing of a Pop-up window on click on the overlay
- customize the position of the Close button on the overlay or Pop-up itself
Animation settings allow to customize the following properties:
- Effect - determines the effect for opening and closing a Pop-up
- Fade
- Zoom
- Slide
- Animation smoothness when opening and closing
- Animation smoothness type. Animation smoothness is created with Bezier curves and shows the speed of animation at different stages. You can select the desired type from the dropdown list.
- Animation timing (in milliseconds). You can select the length of time that an animation takes place from 0 to 2000 ms in the drop-down list or enter your own value.
