Quix 2 Visual Builder is here & enjoy 20% discount. Coupon : QUIXPRO

WINTER IS HERE - LET'S MAKE IT WARMER! Enjoy 30% OFF WIN18

Documentation

Find articles, step-by-step instructions, and advice for getting the most out of ThemeXpert.com

Where to find?

Smart Tab element available from Quix 1.7 and onward. Make sure your Quix version is 1.7+ to use this awesome element.

  • Go to a Quix page.
  • Click on Add Element

Smart Tab

  • Find the Smart Tab on the element list and click over it. You can use the Search box at the right-top to find it quickly.

Smart Tab

Configuration

GENERAL

Smart Tab

  • Add New : This button allows you adding new tabs.
  • Layout : Lets you define that the tab is gonna be Vertical or Horizontal.
  • Alignment : Define the tab placement. By default its left.
  • Icon Placement : Define the icon placement. By default its left as well.

Clicking on a tab item, you can find 4 additional settings to configure.

Smart Tab

  • Title : Title of the tab.
  • Sub Title : Put the tab’s subtitle.
  • Trigger id : Put the section/ column/ row/ element id which you want to show inside the tab just by triggering this switch.
  • Select Media : You can select either icon or image for each tab item. It appears above the tab item.

STYLES

Smart Tab

  • Title Font : Select the font family and its variants for the title.
  • Color : Choose the title text color.
  • Subtitle Font : Select the font family and its variants for the subtitle.
  • Color : Choose the subtitle text color.
  • Subtitle Margin : Define margin space between title and subtitle.
  • Icon Size : Choose the icon size.
  • Margin : Define margin space between icon and title.
  • Background Color : Choose the hover background color for the navigation.
  • Title Color : Choose the hover title color.
  • Subtitle Color : Choose the hover subtitle color.
  • Box Shadow : Enabling this option allows you to apply box shadow over navigation tab menu on its hover.
  • Background Color : Select active nav background color.
  • Title Color : Select the active title color.
  • Subtitle Color : Select the active title color.
  • Box Shadow : Enabling this option allows you to apply box shadow over navigation tab menu on its active state.
  • Background : Choose a background color for the tab body.
  • Box Shadow : Apply a box shadow on tab body.
  • Margin : Define margin space on tab body.
  • Padding : Define padding space on tab body.

ANIMATION

Smart Tab

  • Animation Type (Entrance Animation - Parent): Choose an entrance animation style from the drop-down for tab navigation.
  • Animation Type (Hover Animation - Parent): Choose a hover animation for tab navigation.
  • Content Animation (Tab Content Animation): Pick an animation style for the tab contents.

ADVANCED

Smart Tab

  • Label : Put the tab name as per your preference.
  • Id : Autogenerated smart tab’s id. It can be changed according to your need.
  • Class : You can put additional class to add extra CSS properties, if needed.

How To’s

Load any ELEMENT inside Smart Tab

  • Add Smart Tab element from the list of Quix elements.
  • Add your preferred number of tab, suing ADD NEW button at top-left of its configuration modal.
  • Configure its variants according to your preference and save it using the green Save button at left-bottom.

Smart Tab

  • Now, add the elements that you want to show inside the smart tab.

Smart Tab

Even, you can edit the column grid style to represent it differently. For better understanding, watch the video below.

Find other Quix How To Tutorials here.

  • Click on the Settings icon of the element to show inside smart tab.

Smart Tab

  • Under ADVANCED tab, copy the element id from the id field.

Smart Tab

  • Now, click on Smart Tab’s Settings icon.

Smart Tab

  • Click over the tab item to set it as trigger.

Smart Tab

  • Paste the copied element id on the Trigger id field and save it using the green button at the bottom-left or use the shortcut Ctrl+S from the keyboard.

Smart Tab

Similarly, copy the other element’s id and paste on the Smart Tab item’s trigger fields.

Front-end appearance:

Smart Tab

Load a SECTION inside Smart Tab

You can effortlessly show a whole section inside this extensible Smart Tab. It's absolutely hassle-free and almost similar like showing an element inside it. The only thing you have to do is to copy the section id and paste on the Trigger id field of a Smart Tab navigation.

  • Click on Section Settings icon.

Smart Tab

  • Copy the section id from section’s Advanced tab.

Smart Tab

  • Paste it id on the Trigger id field and save it using the green button at the bottom-left or use the shortcut Ctrl+S from the keyboard.

Front-end appearance:

Smart Tab

Load a ROW inside Smart Tab

  • Click on Row Settings icon.

Smart Tab

  • Copy the row id from section’s Advanced tab.

Smart Tab

  • Paste it id on the Trigger id field and save it using the green button at the bottom-left or use the shortcut Ctrl+S from the keyboard.

Front-end appearance:

Smart Tab

Load a COLUMN inside Smart Tab

  • Click on Column Settings icon.

Smart Tab

  • Copy the column id from column’s Advanced tab.

Smart Tab

  • Paste it id on the Trigger id field and save it using the green button at the bottom-left or use the shortcut Ctrl+S from the keyboard.

Front-end appearance:

Smart Tab

Smart Tab Live Demo

Find Smart Tab Live Demo here.