How to Create Smart and Beautiful WordPress Tabs

WordPress tabs

Fun fact: did you notice that even wordpress.org uses WordPress tabs to chunk information?

Check this out:WordPress tabs on wordpress.org

Source: wordpress.org

WordPress tabs are a type of navigation that can improve the customer experience. How so? By not cluttering a lot of info into paragraphs, but using a better organizing method.

Tabbed navigation is similar to files organization in an office or at the doctor. 

Not to be confused with menus. Most of the time, menu items open up a separate page with its own URL. Here no URL change will happen.

Not to be confused with accordions either. An accordion will stack information vertically. Headers can be clicked to reveal or hide content associated with them. 

Now, why would your WordPress site need tabs? To improve navigation, usability, and therefore customer satisfaction and conversion rates.

Plenty of reasons, right?

Tabbed navigation is still a common practice in e-commerce to present products. Many visitors already recognize tabs or expect tabs in certain places.

Let’s say you sell electronics. You will need to present lots of product info:

  • Product description
  • Product photos
  • Technical specs
  • Reviews
  • Warranty info
  • Shipping details

Tabs will help you to compress big content into limited spaces.

Now, in this article, we will start by providing you with some tab design inspiration. Next, we’ll go a bit into some best case practices. In the end, I’ll guide you through the technical WordPress tabs aspects.

Let’s get going!

Tabs: some inspiration

Now, let’s check some websites out there that use tabs. I’m definitely in for proof. Images can explain better things than words, don’t you think?

Let’s see, eBay is using tabs for product description. All the tech specs go under “Description”, and they gathered “shipment and payment” under the same tab. I’m pretty sure they’ve tested the layout because, for a site with such traffic, any change can affect conversion rates heavily.

eBay is using tabs

Source: ebay.com

BobbyBrown cosmetics goes for a minimalist approach, the tabs don’t have a button-like approach. They use an underline to inform the user that he selected a tab.

Tabs on the BobbyBrown cosmetics website

Source: bobbibrowncosmetics.com

I’m always feeling lost when I go to booking.com. They have lots of information you need to scroll down for. Recently I noticed that they made some changes to reduce scroll, but still, it ain’t enough (for me).

Trivago, on the other hand, seems to organize information a little better. I know it’s hard to do when you need to provide so many details.

They use tabs to organize hotel information such as overview, info, photos, reviews, deals. 

Tabs used by Trivago

Source: trivago.com

Tabs are a common practice on websites that offer travel packages such as flights, accommodations, car rentals.

Expedia does it nicely when it presents its offering for 6 services. The experience is clean and unintrusive.

Expedia is using tabs for servicesSource: expedia.com

Honda uses tabs in a more creative way. It mixes images and videos alongside text to sell a great Honda experience.

Screen Recording 2020-10-29 at 02.29.55.65 PM.gif

Source: automobiles.honda.com

WordPress tabs: best case practices

Simply put, tabs are a set of buttons usually set horizontally. This is why their design should be really close to a button design.

Now, let’s look a bit at the best case practices for using tabs in your WordPress website:

  • Don’t go for multiple rows, it will make it hard for the user to remember which tab he visited. If you realize you need more rows, this means you’ll need to find a better way to organize information
  • Keep tab headings short and sweet
  • Use tabs only when users don’t need to see content from multiple tabs at the same time
  • Clearly indicate which tab is active
  • The unselected tabs should remain visible, and not lost in the background
  • Make sure your tab appear like separate buttons that you can interact with
  • Add hover effects on tabs as you would on buttons
  • Use tabs when you have between two and nine different categories of content
  • The categories are similar in nature, a user would expect to see them there (eg: product description, product reviews)
  • Don’t use tabbed navigation when you intend to insert a “more” link
  • You can use gradients to add depth and dimension to the tabs.

How to create WordPress tabs using page builders

I am using the Colibri page builder for the purpose of this exercise.

Tabs can be found as a component.

You can find components when you click on “+” from the upper left.

Add WordPress components

The WordPress Tab component

Go to Components and drag the “Tab” component to your website preview on the right.

Next, you can play with the customization options on the left.

Customize the WordPress tab

When your tab looks like you want to, just hit “Publish” and you’re live.

Tabs: a plugin to help you with setting up WordPress tabs

If you run an online store integrated with WooCommerce, in WordPress there are two very popular plugins for WordPress tabs.

WooCommerce WordPress tabs

Source: wordpress.org

But, I want to introduce you to a favorite of mine: Tabs.

Tabs WordPress plugin

Source: wordpress.org

Tabs has a lot of customization options that you’ll soon be fond of. Why I feel that you will love it too:

  • You will design mobile-friendly WordPress tabs
  • You can work with shortcodes
  • Tabs works by drag and drop
  • It has 20+ design templates so that you don’t need to bother with inspiration
  • 500+ Google Fonts
  • Tabs works with most of the themes out there.

WordPress tabs: the conclusions

Tabs are here to make information easier to digest in a world of shorter attention spans. In terms of tools, there are plenty of them out there that can help you out with setting up WordPress tabs. This is the easiest thing to do.

More important is to figure out what kind of information can fit in your tabs. If you’re not sure that a tab will help you organize certain information, you can always do some user research or an A/B test. Our own assumptions are not enough. Real behavioral data will lead you to the right answer.

At the end of the day, you need to care about usability, chunking, and website speed.

Now, if you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to our Youtube channel and follow us on Twitter and Facebook!

[sibwp_form id=1]

+ posts

Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.

 

How to Kickstart Your Wordpress Website with No Coding Skills

[Marketing plan included]

FREE GUIDE