# Tab Design

**URL:** <https://community.wpbeaverbuilder.com/t/tab-design/2489>\
**Category:** Beaver Builder\
**Created:** [February 6, 2015, 3:52pm UTC](https://community.wpbeaverbuilder.com/t/tab-design/2489 "2015-02-06T15:52:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![brnwebtools](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/b/ecae2f/32.png) [@brnwebtools](https://community.wpbeaverbuilder.com/u/brnwebtools)\
**Post date:** [February 6, 2015, 3:52pm UTC](https://community.wpbeaverbuilder.com/t/tab-design/2489/1 "2015-02-06T15:52:19Z")

</div>

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](http://kstensaasfamily.com/about.html)

Thanks!  
Cody

---

<div class="post-metadata">

**Author:** ![brnwebtools](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/b/ecae2f/32.png) [@brnwebtools](https://community.wpbeaverbuilder.com/u/brnwebtools)\
**Post date:** [February 6, 2015, 3:55pm UTC](https://community.wpbeaverbuilder.com/t/tab-design/2489/2 "2015-02-06T15:55:11Z")

</div>

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

Thanks!  
Cody

---

<div class="post-metadata">

**Author:** ![lylechamney](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/lylechamney/32/98_2.png) [@lylechamney](https://community.wpbeaverbuilder.com/u/lylechamney)\
**Post date:** [February 7, 2015, 11:34am UTC](https://community.wpbeaverbuilder.com/t/tab-design/2489/3 "2015-02-07T11:34:19Z")

</div>

You can always do some customization with CSS 🙂

This is a simple example:

```auto
.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](http://i.imgur.com/KxDWp2h.jpg)

---

<div class="post-metadata">

**Author:** ![robby](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/robby/32/12_2.png) [@robby](https://community.wpbeaverbuilder.com/u/robby)\
**Post date:** [February 8, 2015, 9:39am UTC](https://community.wpbeaverbuilder.com/t/tab-design/2489/4 "2015-02-08T09:39:46Z")

</div>

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

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/](https://wordpress.org/plugins/tabby-responsive-tabs/).

Lastly, feel free to add this to our [User Voice page](https://wpbeaverbuilder.uservoice.com/forums/270594-general). We’re very responsive to the suggestions that get the most votes.

Hope that helps 🙂

---

<div class="post-metadata">

**Author:** ![system](https://community.wpbeaverbuilder.com/uploads/default/original/2X/9/9db1b183a7ea1efa26199a2a2b3511d742473dae.png) [@system](https://community.wpbeaverbuilder.com/u/system)\
**Post date:** [April 27, 2019, 10:15pm UTC](https://community.wpbeaverbuilder.com/t/tab-design/2489/5 "2019-04-27T22:15:34Z")

</div>