This sample project shows how to set up a hero section of a page with popups, with left/right arrows to view other “screens”.
The popup is a very flexible construct with many settings, so it takes getting to know it a bit, but it’s all laid out in the settings.
Some details of how it works:
- the left/right buttons are manually set to open the previous/next popup
- when a popup opens, it closes all other popups with the same popup group ID, since they’re all 0, only one is open at a time
- the popup 1 is set to auto-open after 0 seconds (so immediately)
- all popups have the same animation
- the popups are set to full page width (arrange settings) and the image is a popup background stock image, you can also leave the background empty (with a fill color) and add elements overlaid on top
- everything is achieved via settings in the interface so change anything to get a feel
The Sitely canvas will be blank when opening the project, you can test the functionality by going to preview (built-in or in the browser). In the canvas you can select the popup from the layer list on the left, or from the popup icon in the format bar.
Sliders are often set to automatically move to the next slide, this is not possible with popups in Sitely, but the arrow buttons let the site visitor move between them.
popup-slider.sitely (7.0 MB)