Create a Custom Popup Modal in Slider Revolution

Layer Actions can be used to show/hide a wide variety of content on-demand, including text, images, video and more.
For this tutorial we'll show/hide a custom modal using two simple buttons: A traditional "call to action" button to open the modal and a close button.

Insert a "Call to Action" Button Layer
  • Quick Tip:
    When working with multiple Layers, sometimes it's easier to toggle their visibility inside the editor. This can be done using the "eye" icon shown in the screenshot below.
Add a Shape Layer which will be used for the popup's main background.
Set the Layer's "Behavior -> Align" to "Slide Based" so it always covers the entire slider.
Insert an Image Layer (or any other Layer you wish to be shown as the popup's main content)
Resize and center position the Image Layer.
Insert a "Close SVG Icon" from the Object Library and change the SVG object color to "white" and position it to the top right.
Select the "View Modal" button inside the editor, and add the following Layer Actions as shown in the screenshot below. This will then automatically hide the popup content from view until the "View Modal" button is clicked.
  • Quick Note:
    The "wait for trigger" animation timing will hide the selected layers until an action is performed on the button layer
Select the SVG Layer ("Close" icon) in the editor and add the following Layer Actions as shown in the screenshot below. This will then hide the popup content once the "x" button is clicked.
  • Quick Note:
    The "wait for trigger" animation timing will hide the selected layers until an action is performed on the button layer