Skip to content

Tabs

WPBakery includes it's own Tabs element for which Total includes custom styling and exclusive optimizations for the Javascript, CSS and accessibility to make the tabs better!

  • WPBakery

Examples

Default WPBakery Tabs

Below is an example of the default tabs styling in the WPBakery page builder. In our opinion this design is quite old-school and doesn’t look very good on most sites. That’s why we’ve added our own style you can choose from which is more minimal.

Welcome to tab 1. This is the first tab of your tabbed content and is open when readers first view your page. You can insert text, images or any other page builder module inside this tab to create awesome things!

Welcome to tab 2. This is the second tab of your tabbed content and is hidden when readers first view your page. You can insert text, images or any other page builder module inside this tab to create awesome things!

Welcome to tab 3. This is the third tab of your tabbed content and is hidden when readers first view your page. You can insert text, images or any other page builder module inside this tab to create awesome things!

Welcome to tab 1. This is the first tab of your tabbed content and is open when readers first view your page. You can insert text, images or any other page builder module inside this tab to create awesome things!

Welcome to tab 2. This is the second tab of your tabbed content and is hidden when readers first view your page. You can insert text, images or any other page builder module inside this tab to create awesome things!

Welcome to tab 3. This is the third tab of your tabbed content and is hidden when readers first view your page. You can insert text, images or any other page builder module inside this tab to create awesome things!

Total WPBakery Tabs Design

Total includes it’s own styling for the WPBakery tabs for a slimmer and more modern look. Below is what your tabs will look like when selecting the “Theme” style (optional). Select the theme’s style on a per Tab basis of globally in the Customizer.

Welcome to tab 1. This is the first tab of your tabbed content and is open when readers first view your page. You can insert text, images or any other page builder module inside this tab to create awesome things!

Welcome to tab 2. This is the second tab of your tabbed content and is hidden when readers first view your page. You can insert text, images or any other page builder module inside this tab to create awesome things!

Welcome to tab 3. This is the third tab of your tabbed content and is hidden when readers first view your page. You can insert text, images or any other page builder module inside this tab to create awesome things!

Welcome to tab 1. This is the first tab of your tabbed content and is open when readers first view your page. You can insert text, images or any other page builder module inside this tab to create awesome things!

Welcome to tab 2. This is the second tab of your tabbed content and is hidden when readers first view your page. You can insert text, images or any other page builder module inside this tab to create awesome things!

Welcome to tab 3. This is the third tab of your tabbed content and is hidden when readers first view your page. You can insert text, images or any other page builder module inside this tab to create awesome things!

Theme Styles

Total includes various theme styles you can choose from. Above is an example of the default theme style and below are some other variations you can choose from.

Welcome to tab 1. This is the first tab of your tabbed content and is open when readers first view your page. You can insert text, images or any other page builder module inside this tab to create awesome things!

Welcome to tab 2. This is the second tab of your tabbed content and is hidden when readers first view your page. You can insert text, images or any other page builder module inside this tab to create awesome things!

Welcome to tab 3. This is the third tab of your tabbed content and is hidden when readers first view your page. You can insert text, images or any other page builder module inside this tab to create awesome things!

Welcome to tab 1. This is the first tab of your tabbed content and is open when readers first view your page. You can insert text, images or any other page builder module inside this tab to create awesome things!

Welcome to tab 2. This is the second tab of your tabbed content and is hidden when readers first view your page. You can insert text, images or any other page builder module inside this tab to create awesome things!

Welcome to tab 3. This is the third tab of your tabbed content and is hidden when readers first view your page. You can insert text, images or any other page builder module inside this tab to create awesome things!

Welcome to tab 1. This is the first tab of your tabbed content and is open when readers first view your page. You can insert text, images or any other page builder module inside this tab to create awesome things!

Welcome to tab 2. This is the second tab of your tabbed content and is hidden when readers first view your page. You can insert text, images or any other page builder module inside this tab to create awesome things!

Exclusive Optimizations

Total includes some exclusive optimizations for the WPBakery Tabs. If you’ve used WPBakery before you may know that by default the tabs have a horrible animation – Total includes a setting you can use to remove the animation. Total also has an advanced checker to pre-load the tabs CSS file to prevent FOUC issues as well as accessibility fixes.