Subscribe to My Newsletter for Weebly Tutorials, Tips, and News!
How to Add a Gorgeous Header Slideshow to Your Site
Fullscreen slideshows are a great way to make your site look nice and modern, and from a practical standpoint, they're a very good way to pack a lot of visual information into a small space. Efficiency? I like it! In this tutorial, I'll go over how to add a header slider like the one you see below to your Weebly website. Even better, there's literally no coding required.
My clients have always wanted a full-screen header slider on their Weebly websites. Unfortunately, I came to realize that Weebly doesn't offer such feature in their headers. So I turned to the Weebly App Center and attempted to find a Weebly app that lets me add a header slideshow. However, I didn't find much success finding one due to two reasons:
- There weren't enough options to choose from in the Weebly App Center.
- None of the currently available header slider apps in the App Center worked. They were all very buggy, which makes sense considering how complicated a header slider's code can be. I tried every app on there and they all had severe issues.
You see, a header slider is a fairly difficult thing to add. Weebly Apps do a great job when it comes to adding simplistic elements, but when you're adding something as big as a fullscreen header slider with animations, they can slow down your website by a lot. Not to mention that their customization UI lets a lot to be desired.
So clearly, finding a Weebly App to do this for me was not an option. I tried everything out there.
The solution to this, as I found out, is to use a premium third-party Weebly theme with the slider capability baked into the code. There are plenty of third party premium Weebly themes out there, but I've come across a gem with a slider that works perfectly.
I bought the Apollo Weebly theme from Luminous Themes, because it has a feature that Luminous calls "PureSlider," which is essentially a fullscreen header slider. It works incredibly well. It's very easy and intuitive to use. Plus, no coding required! It's all just
This is the most efficient and easiest way of adding a header slider to your website. By using a theme with a header slider, you're ensuring that everything runs smoothly. That's why it's best to avoid using a Weebly App for such large functionalities.
Like I said, there are many premium Weebly themes out there with a header slider functionality. I know Baamboo has a bunch of these, and so does WebFire. (Click here to see my list of the top Weebly theme providers).
However, I particularly like Apollo because of several features.
- I love the style and it has a ton of customization features accessible within the editor, so you can really make it look like whatever you want.
- There's no coding or technical knowledge required to use Apollo and its features. Everything is controlled through the Weebly editor. You can't say the same thing about other premium Weebly themes, some of which require you to dig deep into HTML to change background images and stuff like that.
- PureSlider (Apollo's header slider) is also no ordinary slider. First off, it's hardware accelerated so it's always super smooth even with lots of content. Second, you can literally drag any Weebly element into the slider content areas. I love this because it means I can have one slide have just text and a button, and the other slide to have a contact form...you get the idea.
- PureSlider is also responsive and swipe-compatible. This is huge these days because the majority of your site visitors are most likely browsing on their mobile devices. By swipe-compatible, I mean that the user can change slides by just swiping left and right.
The one thing I noticed however is Apollo seems to be the only theme from Luminous with this sort of PureSlider feature. Their other themes have a different slider technology which I haven't tested. So if you want something that has been tried and tested, Apollo is your choice.
Using PureSlider is really easy. You first select how many slides you want (adjustable later on, too) and then in the Weebly editor just click on each slide to upload a background. Once you have your backgrounds, you can drag and drop anything into each slider as you would normally in Weebly.
Apollo also has a bunch of cool stuff like 3D parallax and a full-screen search mode, but that's for another post.
Here's the big downside: it's a little bit costly. It's well worth every penny in my opinion, but it really depends on your situation. Right now at the time of writing this post, Apollo is on sale and you can cop a Standard Edition for $59 USD (instead of the regular $89). If you plan on making multiple websites for clients using Apollo, the developer's edition is $99 USD.
They also have really good support I've heard. They replied to my tickets within three hours, but I only had one pre-sale question. Didn't have any need to contact their support because they have excellent documentation.
However, Luminous Themes is obviously not the only Weebly theme developer out there. I recommend their themes to most, but do your own research and find a provider that works for you!
Hope this helps.
Request a Course/Tutorial!
Want to know how to do something in Weebly? Request a tutorial!