Below is an example of a custom slider created using popups. This slider is semi-automatic: it automatically cycles through the popups at predefined intervals and then stops at the 'Home' slide. From there, users can manually navigate through the slides by clicking on the links within each slide. This method has advantages over a traditional image gallery slider, as there is no need to create image content beforehand. Instead, you can use Sparkle's toolset to design the content for each slide directly. This technique can be used to create a captivating header for a page, and it’s really simple to do.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lorem enim, eget fringilla turpis congue vitae. Phasellus aliquam nisi ut lorem vestibulum eleifend. Nulla ut arcu non nisi congue venenatis vitae ut ante. Nam iaculis sem nec ultrices dapibus. Phasellus eu ultrices turpis.
Button
To create a slider, follow these steps:
1. Create a Background Box: Start by creating a wide box on the page to serve as the background for the slider. You can make it any size you wish.
2. Create the First Popup: This will be your template for all the popups in your slider. In the example, the popup is the same height as the background box and 1200 pixels wide. Position the popup directly over the background box, ensuring they match in height.
3. Add Elements to the Popup:
4. Create Link Boxes:
5. Finalize the Popup Template:
Before moving on to the next popup, make a few changes in the style panel as shown in the illustration below:
These settings tell the popup that it is a Normal popup, it should Always be On Top, and it should Open Automatically after a delay of 0s. You also need to check the ‘Once’ option to ensure that it doesn’t keep repeating. You should then switch to the arrange tab, and give the popup a name - the default will be ‘popup1’, but you should make it a more meaningful name. In the example above, it was given the name ‘Home’
Creating the second Popup
Select the entire popup and press Cmd+C to copy it. Next, press Cmd+V to paste it. You might not see any visible changes on the page. This is because pasting the copy replaces the original popup with an identical one in the same position. You can confirm this in the Arrange inspector, where the name of your popup now has the same name as the first one, but with copy' appended to it. Rename it to something more meaningful, then switch back to the Style inspector to make additional changes to this popup as shown in the illustration below.
On this popup a delay of 5 seconds has been added, which means this popup will open 5 seconds after the ‘Home’ popup has been on screen.
This popup also has an animation effect applied to it with a duration of 1 second.
Once these changes are made, you will need to modify the popup content itself. Start by replacing the image and the text content. You can also change the color of the logo and button if you wish. In the example above, we changed the colors of these items by selecting a color from the image to give the popup a more harmonious look.
Next, move the link box for the current popup to the centre holding area, and drag the ‘home’ slide link back over to the right of the popup. Now you’ve completed your second popup.
Just like with the first popup, select the entire popup and press Cmd+C and Cmd+V to create another popup. This new popup will only require you to adjust the delay time in the Style inspector, as all other settings were copied when you duplicated the slide. Increase the previous delay time by 5 seconds—in our example, we set it to 10 seconds.
To summarize: the home popup will display immediately when the page loads. The next popup will appear after 5 seconds, and the following popup after 10 seconds, and so on.
Continue duplicating the popup until you have the required number of popups for your slider. Remember to give each popup a meaningful name in the Arrange tab, and don’t forget to move the current popup link box to the center landing area for each slide you create, and ensure that all the other link boxes go back over to the right of the slides.
One Final Step
You may want your slider presentation to end with the 'Home' popup displayed. However, since we've set a delay time of 0 seconds for the 'Home' popup, it appears first when the page loads. To have it appear at the end of the presentation instead, you need to adjust its delay time. But if you change the delay time, it will no longer appear first.
To resolve this, simply duplicate the 'Home' popup and set the timing for the duplicate to be the last popup in the sequence. This way, the original 'Home' popup will still display first, and the duplicate will display last. Here is a summary of the timings used in the example above.
Remember to add the animation effect to the duplicate ‘Home’ popup to maintain transition consistency. It doesn’t need to be added to the original ‘Home’ popup because we want that to be instantly seen on the page when it first loads.
Creating the Links
Select each link box on every popup and apply an on-click action set to ‘Open Popup’ Then choose the relevant popup to open for each link. The option looks like this:
Other Uses for this Technique
You can vary the layout of popups to suit other types of application. For example, you could create a Q&A section of your website with a list of questions on the left side of the section, and have the answers appear as popups on the right of the section. An illustration of this type of arrangement is shown below: