A Comprehensive Tutorial

to create Weebly Header Slider

Quang Tran
20 October 2016

Weebly is popular because it is not only the easiest online platform to build websites, but it also offers tons of modern and exciting features that can help you create an outstanding website. One of these exciting features is the header slider.

With the help of a header slider on your Weebly website, you can not only provide a better online experience to your visitors, but can save a lot of valuable real estate on your webpage. Simply put, a must to use element on your website to squeeze more critical information in a small space.

down-2_30px

But here is the problem. Many of Weebly users complain that they cannot use the header sliders with latest Weebly themes after the Weebly 4 update.

This may be frustrating for many of you – but don’t worry, I have a solution that you all are looking for.

Here is the good news– it is possible to add a header slider to your Weebly site. You can even use a full-screen slideshow with some of our latest Weebly themes.

For example, check out the Header Slider Demo

There are a lot of ways to add a header slider to your Weebly site if you are a developer or a coder, but there is only one for those who don’t have any know-how of backend development.

This article is directed towards the later, more than 90% of the Weebly users who don’t know how to code and looking for a simpler solution.

Working with the X Slider App

Okay, it may sound like that I am selling the Baamboo Studio’s app, but I am not. The fact is – this is the only-easy-way to add a header slider to your Weebly site.

Already a popular app on Weebly App Store, X Slider is the most convenient, time saving and the simplest solution.

First Step – Get The X Slider App to Add Header Slider to Your Website.

Why X Slider?

Well, it’s a good and valid question. Here are the reasons.

A Simple Drag & Drop Editor

If you can click a mouse, you can build amazing sliders with X Slider. Thanks to its unique “drag & drop” content builder and editor, you can easily add in text, buttons, images, forms and even more to your sliders with just a few clicks. You can also quickly change the order of your slides as well. The possibilities are truly endless.

Modern & Unique Skins

X Slider comes fully loaded with all kinds of options that’ll allow you to customize every tiny detail of your sliders. This includes not only their overall appearance, but also their behaviors as well. X Slider comes pre-built with 12 Arrow Design Styles and 9 Bullet Design Styles to help you build custom sliders right out of the gate!

Slide Video Backgrounds

X Slider supports both YouTube and Vimeo videos as slider backgrounds. This means you can easily control your video backgrounds using various positioning methods and really fun playback options including: loops, mute, unmute, overlay images, tints and more! You’re going to LOVE this feature!

Quick and Easy Overlays

With X Slider, you can display your own titles and content right inside an overlay, and align it any way you wish. You also have the creative power to add fun animations to the overlays if you so desire!

Sleek and Smooth Slide Transitions

When it comes to sliders, it’s vital that your website has smooth transitions between each one. With X Slider, we’ve taken advantage of the latest HTML5 and CSS3 techniques in order to build a slider app that not only gives you sleek and smooth transitions, but across as many browsers and devices as possible. With X Slider, you can apply 11 different transition animations or…you can let Slider X pick one randomly for you.

Thumbnail Navigation

X Slider allows you to use thumbnails of each item to navigate through the sliders. You can quickly set the thumbnail widths, heights, and even quickly align the navigation below or on top of the slider as well.

Fully Responsive Across All Devices

These days, people view websites on all types of devices that includes Smartphones to desktop computers. We built X Slider to be an “out-of-the-box” fully-responsive slider solution, carefully designed and crafted to work on any size screen.

Powerful Settings Dashboard

And last but not least is X Slider amazing and super user-friendly, settings dashboard. The settings dashboard was built with the latest standards to make everything super easy to use and highly intuitive as well. This way not only is everything fun and easy to use, but all control aspects are VISUAL, so changes only require a simple click, drag and drop!

Creating a Weebly Header Slider with X Slider App

First thing first – let’s learn about how to use this great app.

Have you added it to your Weebly website? No? Get it here before we proceed forward.

“Baamboo Studio offers 30-day Money Back Guarantee. No matter the reason- in case you don’t like the result – you can ask for a refund anytime. Simple and easy.”

Second, check if you are using the latest theme from Weebly or premium Weebly themes from our gallery with customizable header option. If not, you need to get one. Either from Weebly or from our theme store.

Third, simply drag the boo slider to the static header you want to turn into a sliding one. Just make sure you are using the header layout for that page before doing so.

down-2_30px

Here is the simple guide with illustrations that can help you design a full-width slider on your website. If you are quick, this will take no more than a minute to design a fully customized full-width slider.

The Fourth and Last step is to add margin top and bottom of your slider. For this, click on the slider and scroll down to Margin option. You can now adjust the negative value (Eg: -100px) around your slider.

Designing a Winning Header Slider

I hope you have designed a Weebly header slider within a couple of minutes using our X Slider App.

But is it a winning header slider?

Have you implemented the best practices?

Is it better than your competitor’s?

Is it eye catching and lures visitors to spend more time on your website?

If you are not sure about the answer to these questions, read ahead to make sure your answer is “YES” for all the above questions.

I have listed the best practices for designing a header slider that can help you create a header slider that can win visitors appreciation.

The Number of Slides

If you are using any more than 5 slides, it is better to use a video instead of a header. The best practice is to keep the maximum slides to 5 and use between 3 to 5 slides.

Use the best slide as your first slide.

For example, if you are displaying your best products, make sure the best selling product goes on the first slide. Similarly, use your best project as the first slide for your portfolio slider.

The Duration

Not everyone is a fast reader. Make sure your slide time allows enough time even to slow readers. It also depends on how much content you have added to each slide.  If it contains only a couple of words in large font size, even two to three seconds are enough but if there is a lot more text with smaller font size, you have to allow more time to readers.

Slides are Slides, Not Text Books

Slides are getting popular because they are smart content boxes that offer more information to visitors quickly without any need to scroll or look around on the web page.

Keep your slider that way. Make simple and easy to read slides. Do not add more text that makes it difficult for readers.

Just keep in mind – slides are also for the convenience of your visitors.

  • Make sure to add only important and minimum amount of text to each slide.
  • Add a call to action in each slide.
  • Each slide must have a goal to guide visitors to take a specific action.

In addition, use the slides to tell a story, branding or to offer different images building the same concept.

Check out this demo that displays how to use images, call to action and minimum text to create a strong impression.

Use Bullet Points

Use the bullets at the bottom of the slider to offer more control to visitors. This allows users to learn about the number of slides, the slide they are viewing in the slider, and how many more slides to go before they can move to other areas on your web page.

If the viewer is more interested in a specific slide, he knows where exactly the slide is.

Here is a nice illustration of this. Check out the Demo page.

Auto or Manual Rotation? What about Both?

Most of the slides are auto slides while very few are manual. But the best practice is to use both features. The slide must move forward automatically but the viewer must also have the option to move forward or backward if he wants. Use bullets as described above to provide control to the viewer to move the slider on his own.

Navigation

As we are talking about providing control to viewers, easy and simple navigation is also a good idea. With forward and backward arrows and bullets, readers can easily move forward or backward or can jump to whatever slide they want.

Make sure the “Previous” and “Next” arrows are visible.

As more than half of the website visitors are mobile users, the slide must be swipe-friendly.

Here is a nice example of full width slider with nice navigation buttons and arrows.

Keep it Simple

Sliders are popular and commonly used with the same use across the internet. Keep it to the basics discussed in this article. If you want to be creative, try it with the content of the slider with more appealing images and more luring text. Trying to add extra features and making it too complicated will only ruin the user experience.

Best Transition Practices

There are a lot of ways to move from one slide to the other. Horizontal swipe is the most common but is it also the best option?

  • A better transition than animated horizontal slide is soft fade but a lot depend on your overall website theme.
  • Instead of a sudden and quick slide, keep it slow.

Making Sure the Slider Loads Quickly

The purpose of the slider is to provide a quick overview for the readers instantly as soon as they visit the web page. If the slider takes a lot of time to load, it kills the purpose and may result in high bounce rate. Make sure the images used on the slides are not too heavy.

  • The best practice is to use images that are of 1500 pixels wide. This image dimension is best for uploading time as well as for mobile view.
  • For the height, make sure the header and the content is no more than 750 pixels height.

Designing a Header Slider for Responsive Website

All of the Baamboo Studio’s Weebly themes are responsive so you don’t have to worry about the experience your website offers on different devices but if you are using other themes, you must make sure you are creating a responsive header slider.

Even when header sliders adapt according to the device and browsers, there may be some cropping involved when the website shifts from larger screen to smaller. Following are some good practices to make sure your header slider looks the same on all devices.

  • The best orientation for slider images is landscape. Images that are more in width than height.
  • The image should be 1500 pixels wide. The site-wide banner must be 2500 pixels wide.
  • Images with text can easily highlight that the image is cropped on smaller screens. It is better to use a separate text overlay on the image.
  • According to research, landscapes work better than portraits on headers and patterns work better than words.

Once you design a header slider with X Slider, make sure to view it on multiple devices before finalizing your design.

Where Else Can You Use the Slider on Your Website?

This is not the only use of X Slider. There are tons of ways you can use this exciting new app to create a truly unique online experience for your visitors. Listed are few ideas where X Slider can be useful.

Portfolios

When you have a lot to show on your portfolio page or you want to showcase some of the important projects as a portfolio on your homepage, you can use the X Slider to save a lot of valuable real estate. On top of that, it also looks great. You can also use the slider to provide in-depth details about a single project by adding more content and images from the same project.

To Display More Company information

You may want to tell your visitors a lot about your company but is it a good design practice to stuff your homepage only with the information related to your business? Really not, but again, you can do that by adding a slider to your homepage. This is a win-win situation for you and your visitors. You can add more information related to your business/company/services using a slider without occupying the entire web page for that.

Featured Blog Posts

The slider is a great way to introduce the most viewed or the best blogs to your visitors. This allows you to feature all the latest and the old popular blogs within a limited web space. It also looks good when the visitors can view the sliding blog topics. It is simply good to eyes (if you are using the appropriate images).

Feature Popular/New Products

For an e-commerce store, this is already a common practice. Top stores use multiple sliders on the homepage to introduce new or popular products or to highlight the latest deals and offers. This is a great way to save space but keep the visitors updated about the new products and latest deals.

I hope you can now design your website header slider easily with X Slider App. Feel free to let us know your concerns about the app or header sliders. Get the X Slider App today and get it started.

With the simple to follow instructions listed in the article, you can not only design a header slider within minutes, but with implementing the best practices we discussed, you can do it better than your competitor’s website, for sure.

Share This