Making subslides with Smart Content Tabs

Making subslides with Smart Content Tabs is so easy to create, and it helps you to divide the topics in your tabber.

We have got many of request from you to create a tutorial, and tell you the easy way of creating a fancy Tabber with subslides. Now the time has come, so we have created a step-by-step tutorial for you.

Introduction

We will create the CookBook tabber from our demo site. It has many subslides, so we can show you how to make it. Go to your admin area, select the Smart Content Tabs from your components, and click on the new button to create a new tabber.

Setting up the Tabber

There will be 19 tab in this tabber. We will use the Content Tabs Horizontal type. Note that it not depends on what type will you use, all of them supports the subslides. Now let's see the Slider type settings. I will tell a few words from each settings.

Tab position

You can set the position of the subslides, it can be shown on the top or at the bottom of the tabber.

Tab animation type

Here you can define the loading animation of the tabs. You can set different animations, so you can fully customize your tabber.

Show parent tab in subtabs

When you would like to create subtabs, you should create a parent tab, what will include the subs. With this setting, you can set that the content of the parent tab is also appeared as a subtab.

Mouse scroll

If you set it on, when you scroll with your mouse, the next or previous tab will load.

Display navigation arrows

Show/hide the arrows, to control the tabber.

Navigation arrow function

You can select whether to click on the next or previous button move the all group of tabs, or just tabs by one.

Show slide numbers and icons

These options are quite clear. You can set that the icons/numbers show or hide.

Display subtabs

This option is very important in this case. If you set it no, the subtabs will not shown. So set it on.

Animation options

These settings can be familiar from our other products. You can set the main and the subslide animations here.

You can see my settings on the image below:

Theme options

As I previously menitoned, the styling settings has no effect for the subtabs. So you can set, what you would like, we will use the elegant theme and a red skin for this tabber. When you are ready, click on the save and close button. Now I will show you, how to create the subtabs.

Creating the parent tab

So now we are in the most exciting part of this tutorial. We will create the parent tabs, and the subtabs.
Click on the first tab to edit, this will be the parent tab. Set the name to Breakfast. As I previously mentioned, we have a parameter in the tabber manager, called Show parents in subtabs. We have set it to No, so we won't set any content for this tab. Now click on the save button, and select the second tab to edit.

Make the subtabs

The first subtab of the Breakfast will be the The full English breakfast, so set it as title for this tab. There will be another important parameter what you should set. The Group to previous slide parameter will be means, that this tab will be a subtab. If you set this parameter to on, it will be a subtab, and it will belongs to a parent tab. If you leave this parameter to off, it will be a parent tab. That's the trick, this is the way how you can make parents and subtabs. Below you can see the details setting of the tab:

Conclusion

As you can see this feature makes the Smart Content Tabs more smart, more powerful. This means that you get a great component for your site for only $25! Here is the link for the live demo of the CookBook tabber: CookBook Tabber. And here you can buy the Smart Content Tabs: Buy it now!