A popup window is a graphic user interface that appears upon user interaction (usually a click), subordinate to the site's main page. It is an efficient way to get your users attention and a refreshing method to transfer information.
Creating a pop-up in RapidUI can be done by either uploading your own pop-up design onto the platform or creating your pop-up from scratch, using RapidUI elements.
Here are the steps to create your own pop-up:
- Select or create the Pop-Up
If your popup design already exists, simply select it. If not - head to the 'elements' section and select 'Create Elements'. Now create your pop up container / text / image / etc.
If you wish, you can use your own pre-made pop-up design and load it onto your site:
- Head to the 'Layers' panel - the first icon to the left in the menu bar.
- Click the blue "+add new" button.
- Select ‘Pop-up’
- On your site frame - draw a space in which you wish to add your object in the approximate size and location (can be changed easily later on)
- Drag your design file onto the container
Make sure your container has an option to close it (X icon for example).
!RapidTip It will be easier to identify your pop-up if you change its ID (full guide on changing an element's ID can be found here).
- Set up the trigger
Now it’s time to set up the trigger for your popup. Mark the button you want that when clicked by a user will activate the popup.
Now head to the 'Animations' Panel and click 'Add Trigger'. This button helps you pick what trigger you want to cause the animation.
Pick which action you want to trigger the animation - could be on click, on hover and many more.
Now you can pick which action you would like to happen when the trigger is activated (show/hide object, animate, etc.).
Popups usually use one of these two actions:
Toggle object: With every trigger (such as a click), the pop-up will open and close (first click will open the popup, click again and it closes), one after the other.
Show object: If you don’t want to use the toggle option, 'Show Object' can be used to cause the pop-up to show when clicking the button, but without disappearing when you click the button again.
Don't forget to create a 'hide object' action (a close button - X), to hide the popup.
- Define your Pop-up’s Display
In order for your Pop-up to, well, Pop-up, you need to define its display as hidden when the site is loaded for the first time, and then create a trigger for it to Pop-up when pressing the designated button.
The easiest way to change your pop-up's display is by simply right-clicking it and selecting 'hide object'.
Another option is changing its display using the styling section.
Mark the element, Click 'Show more', and under display pick 'Hide'. This will be the
default display when opening the web page - the pop up won’t be seen until we trigger it.
Click SAVE, switch to user mode, and there you go! Now you have your very first Pop-up in RapidUI.