I had a little brainstorm and came up with an idea that could really benefit our Sparkle community. How about we make it easier for newcomers to dive into Sparkle’s full potential? I thought it might be good if our seasoned users could whip up some ready-to-use layout Blocks that newbies can simply drop into their projects. These Blocks would serve as handy building blocks, helping users explore Sparkle’s features in a more hands-on way.
To kick things off, I’ve put together an animated hero layout. Well, it’s more like a template, to be honest. It’s got features that can’t be directly integrated into a single layout block, so it’s not a simple copy-and-paste deal. But! Since the hero section usually starts off a page, I figured this example could be a great starting point. Just delete the instructions, save as a new project, and voila! All it needs is content to bring it to life.
I focused on showcasing animations and popup menus, especially on the mobile version of the page. I’ve kept it super easy to understand - all the details are neatly documented in the layers panel. Plus, I’ve included instructions right on the page (just delete them for use in an actual project). You can see a preview HERE.
What do you all think? It would be great to hear your thoughts and suggestions for other blocks! Meanwhile, here’s the link to check out the Sparkle project file for this first attempt.
Here is another project file for users to play with. This one shows how to create a sticky vertical menu as part of a hero, and have it remain on page as it’s scrolled.
The project file can be downloaded from the link below. To see a preview, click HERE.
One more to complete the trio for this week. This is another hero section that uses animation in a somewhat different way. Check it out HERE. If you wan’t to tinker under the hood, download the Sparkle file from the link below.
Just added a new project file for you to play with. This one is an example of a landing page suitable for an e-commerce site. It demonstrates how a minimalist design with a limited colour palette can make products look great. It also showcases some of Sparkle’s great animation features to make a page more engaging for an audience. Another feature showcased is the toggle Layout Block feature. On the page is a button labeled ‘Details’. Clicking that button will do a couple of things. Firstly, it opens a hidden Layout Block to reveal a couple of extra product images and description text. It also extends the parallax image and reveals a video link that opens a video in a pop-pop up instead of just placing the video on the page itself.
The design of this page was originally created as a bootstrap site, and ultimately a Wordpress theme. I’ve adapted it to show that sparkle can do just a good a job as the more complicated website builders out there. In this project file, there isn’t a mobile version yet (it will be coming soon). However, it does show what can be achieved with very little effort in Sparkle. You can see a preview of the project HERE. and you can download the project file from the link below.
