Skip to content

5-minute website fixes: Improve your business website with a custom slider

A successful website owner will consistently wonder how they can better their business, and how they can make their website stand out even more. We have an exciting new tip for this week’s 5-minute fix, showing readers an easy way to boost their online presence from good to jaw dropping.

How, you ask?

By adding a custom slider, and here we have all of the details how.

Due to their range of responsive options, we will be using ComSlider for today’s 5-minute fix. Upon landing on their page, go ahead and quickly register in the upper right hand corner.

Registering for ComSlider

Once you’ve registered, you’ll see ComSlider has a variety of different templates for you to choose from as you scroll down the page.  Select your favorite one and we’ll get going.

Selecting a template on ComSlider

Once you’ve selected a template, the fun begins! Click the “Upload Image” button in the upper left hand corner, and upload as many images on your slider as you’d like displayed. For the sake of this example, I’ll go with two.

Adding images to ComSlider

Next up: Customizations. On the left hand side, you’ll see a variety of effects under “Transitions.” This is how your pictures will slide from one to the next. Because responsive websites are so important these days, your transition should be responsive as well.

Be sure to set your transition preferences under “Mobile” tab on the Transition property panel. Then you will be able to set “Responsive” checkbox on the Layout property panel (this option is located above “Transitions”).

Feel free to flip through various effects, clicking “Apply” (located at the bottom of the panel) to test out how they look.

Adding transitions to your ComSlider

Now that you’ve decided on a transition, customize your navigation. These customizations will vary from template to template. Go ahead and try out different Types, Positions and Colors to really make it your own.

Customizing your navigation on ComSlider

Once you’ve made some basic customizations to your slider and you like the way it looks, copy the HTML code listed below your slider to your clipboard (you will be pasting it to your website next).

Copying the HTML code on ComSlider

Next, hop into Yola Sitebuilder, and drag and drop your HTML widget (Located in Widgets>Popular>HTML) onto your page, pasting the HTML code inside and hitting save.

Adding the HTML widget to your Yola Site

Voila! Your own custom slider!

Screen Shot 2014-07-10 at 4.06.59 PM

As you can see, creating a business website is a cinch with Yola. Check out our Yola Silver package and get your online business up and running in no time.

Have you made your own custom slider? Show us yours by linking to your website in the comments below!

7 thoughts on “5-minute website fixes: Improve your business website with a custom slider”

Leave a Reply to Yola Cancel reply