Skip to main content
Pop-up component

Add interactive pop-ups to your items

Anna Voloshchuk avatar
Written by Anna Voloshchuk
Updated over a year ago

Available for e-Detailers / e-Detailer briefs / landing pages / landing page briefs

The POP-UP component allows you to show additional information on demand. You can place several components or a block into the pop-up and even beyond its container without visibility loss.

You can set the pop-up opening:

  • When entering a slide/item. For this, select the Open on enter checkbox on the Properties tab.

  • Upon clicking a component with the previously assigned Open pop-up action.

To add POP-UP to your item, drag it from the Components tab on the elements panel to the item layout. To customize the pop-up, select it on the layout and go to its Properties tab.

You can add several pop-ups to the item/slide and enter an individual name for each of them in the COMPONENT NAME field. When assigning the Open pop-up action to your item components, you can select the required pop-up by name from the LABEL list.

Also, you can configure the pop-up component position and style, add actions and animation to it on the dedicated Editor tabs.

Configure pop-ups in e-Detailers and their briefs

You can configure the pop-up component in the following way:

• Name the component.

• Select whether to show the close button.

• Add a custom close button icon if needed.

• Choose the icon position from the drop-down list.

• Activate the pop-up opening on slide enter.

• Select whether to close the pop-up on the outside tap.

• Select the Show overlay checkbox to gray out the slide.

You can view the layers of the pop-up and manage components placed in it on the Tree tab. Moreover, you can align all components inside the pop-up with smart guides.

Configure pop-ups in landing pages and their briefs

You can configure the pop-up component in the following way:

• Name the component.

• Set the background color.

• Select whether to show the close button.

• Set the close button width in pixels.

• Choose the icon position from the drop-down list.

• Assign the animation type.

• Select whether to close the pop-up on the outside tap.

• Activate the pop-up opening on slide enter.

• Set the corner radius in pixels.

• Set the opening delay value in milliseconds.

Did this answer your question?