Tabs & Tours

Tabs

In order to insert tabs in your content click on Tabs shortcode. This element is located in „Content“ tab of WPBakery Page Builder

Now you can start editing its settings. Just click on “edit” icon on your “Tabs” panel:

Style: TheGem comes with four different tabs styles you can choose here

Shape: Select tabs shape.

Color: Select tabs color.

Note: if you wish to use TheGem pre-made colors, select „TheGem“ here.

Spacing: Select tabs spacing.

Gap: Select tabs gap.

Position: Select tabs navigation position.

Alignment: Select tabs section title alignment.

Autoplay: Select auto rotate for tabs in seconds

Active section: Enter active section number

Pagination style: Select pagination style.

In order to edit the title and properties of one section, click on “edit” icon on your “Section” panel:

After that you are ready to insert any content in your tab by clicking on “plus” symbol on the appropriate tab.

Tours

Tours are actully vertical tabs. They work in the same way. In order to insert tours in your content click on Tours shortcode.

Your tours will be immediately added to your page. Now you can start editing its settings just in the
same way, as by tabs (see above).

See demo

Useful CSS

Tour

Section title color, background-color, border-color, font-size:

.vc_tta-tabs-position-left.vc_tta .vc_tta-tab > a {
    border-color: #fff !important;
    background-color: #000 !important;
    color: #eee !important;    
    font-size: 16px !important;
    font-weight: 300 !important;
}

Active section title color, background-color, border-color, font-size:

.vc_tta-tabs-position-left.vc_tta .vc_tta-tab.vc_active > a {
    border-color: #fff !important;
    background-color: #000 !important;
    color: #eee !important;
    font-size: 16px !important;
    font-weight: 300 !important;
}

Tab

Section title color, background-color, font-size:

.vc_tta-tabs-position-top.vc_tta .vc_tta-tab > a {
    border-color: #fff !important;
    background-color: #000 !important;
    color: #eee !important;
    font-size: 16px !important;
    font-weight: 300 !important;
}

Active section title color, background-color, font-size:

.vc_tta-tabs-position-top.vc_tta .vc_tta-tab.vc_active > a {
    border-color: #fff !important;
    background-color: #000 !important;
    color: #eee !important;
    font-size: 16px !important;
    font-weight: 300 !important;
}

You can modify this css and insert it in Theme Options -> Custom CSS to apply on all tabs:

To apply this custom CSS on a single content element only, use the "Extra class name" field in this element in WPBakery:

The example of the css selector for the "custom-tab" class name in this case:

.custom-tab .vc_tta-tabs-position-top.vc_tta .vc_tta-tab > a {
    border-color: #fff;
    background-color: #000; 
    color: #eee;
    font-size: 16px;
    font-weight: 300; 
}