Adding a tab to your content can be a great way to add a visual element to your page. Not only do tabs allow you to organize your content in an interesting way; they also allow visitors to switch back and forth from different information without leaving the page.

Additionally, tabs can be a good option to use if you have a lot of content and want to shorten the appearance of the page to make it easier for site visitors to scan. Check out tabs in action on the History page of our Pioneer demo site.

A GIF of an example of tabs on a History page of a Pioneer demo website

How to Add Tabs to Your Content

Having a large block of content on a page without any design elements can be overwhelming to users visiting your site. While adding images is a great way to diversify your pages, another great option is adding design elements such as tabs. You can do this in a few short steps!

  • Make sure you’re signed in to the back end of your website and head over to the place you’d like to add a tab block.
  • Once there, click the + sign in the upper left-hand corner and search for “Tabs.” You’ll be able to find this option under “Layout Elements.”
A screenshot of the Layout Elements highlighting the Tabs block icon
  • Once you’ve added the Tabs block, you’ll want to decide what the tab name should be. We recommend keeping your tab names as short as possible (aim for 3 words or less) since you only have so much horizontal real estate.
  • Next, you can work on building out the content of the tab.
A screenshot of tabs pointing out the Tab name and Tab content areas
  • For the content section of the tab, a bar will pop up at the top of the block that offers different styling tools. The options include formatting your text in the following ways:
    1. Align
    2. Bold
    3. Italics
    4. Link
    5. Strikethrough
A screenshot of the content section of a tab pointing at the Alignment and Additional Options icons in the different styling tools
  • If you’d like to add a little dimension within your tab, you have the ability to add “inner blocks,” meaning you can have a block within the Tabs block. To add an inner block, select the Tabs block and click the + sign in the upper left-hand corner.
A screenshot of a tab block with inner blocks embedded within it
  • Select the block that will become the inner block. In this example, the column block was chosen. Below is what it would look like after the content was added. Feel free to play around with different inner blocks to find the one that suits your needs the best!
A screenshot of a tab block with content added to it
  • If you’d like to add additional tabs, you can do so by clicking the “+Tab” text on the right-hand corner of the block. Note: The maximum number of tabs allowed within a block is five.
A screenshot of a tab block highlighting the Add Tab icon
  • Once the tab is ready to go, click the next tab and repeat the above steps as needed.
  • If you ever want to reorder the tabs, you will need to manually move the content by copying and pasting it into a different tab.
  • To remove a tab altogether, simply click the X in the name section of the tab.
A GIF demonstrating how to remove a tab
  • Make sure that you preview your changes before you push them live. Once everything looks good to go, publish your changes and marvel at how a small change like adding tabs to your content can make your page come alive!
A screenshot of a tab block on a page in the front end of a website
  • Note: On mobile, the tabs will transition to an accordion.
A screenshot of Tabs on Mobile devices, which display as accordions

Still Have Questions?

The quickest way to get support is to reach out to us within your website’s admin dashboard. Log into your website and then fill out the Website Support form. You’ll hear back from us within one business day.