Tab Design

Beaver Builder
1

Hello!

is there any way to make the tabs module fancier? We used to use a different web builder in the past for clients that gave us some cool options for tabs, like different colors and shapes. Take a peak at the tabs at this link - http://kstensaasfamily.com/about.html

Thanks!
Cody

2

Or also something like the tabs on this page that we built - http://gracewaydc.com/visit/

Thanks!
Cody

3

You can always do some customization with CSS :slight_smile:

This is a simple example:

.fl-tabs-vertical .fl-tabs-label.fl-tab-active {
	border-color: #7ABF4B !important;
	background-color: #7ABF4B;
	background-image: url("http://localhost/wordpress2/wp-content/uploads/2015/02/nav-image6.png");
	background-repeat: no-repeat;
	background-position: right;
	font-weight: bold;
	color: white;
}

.fl-tabs-panels {
	border-color: #7ABF4B !important;
}

Custom Tabs

4

Hi Cody, thanks for the suggestion! And thanks too to Lyle for the response :slight_smile:

Our general philosophy with all of our modules is to provide a simple, baseline solution that’s easy to use. If you need more advanced functionality, we usually recommend looking into 3rd party plugins. We don’t want to overload any of the BB modules and make them confusing or difficult to use; we’re very cautious about adding lot’s of features/design options.

That said, like Lyle suggested, styling with CSS is an option. I did a little fancy CSS hacking to the tabs module on our homepage (in the Nitty Gritty Details section). Feel free to view source and copy/paste any of that code.

You could also look into a 3rd party plugin that generates tabs like this one: https://wordpress.org/plugins/tabby-responsive-tabs/.

Lastly, feel free to add this to our User Voice page. We’re very responsive to the suggestions that get the most votes.

Hope that helps :slight_smile: