GabrielSoft - Tabs Section - How it Works

A tabs section can help transform disorganized web content into beautiful, digestible bits of information by simply “stacking” topics of information for quick referencing and shorter page lengths. The feature is only available on pages that are configured with a Sections Layout.

Learn more: How to enable Sections Layouts for your website

How to use a Tabs section on your website

1

Add a Tabs section to your page

After selecting to use Sections Layouts for your compatible website theme, click on the + icon in the center of the page.

This will open the Add Section dialog (pictured below). Once the Add Section dialog appears, select the Tabs section.

2

Choose between a classic tab layout or an accordion tab layout

After selecting a Tabs section, choose between two Tab layouts:

  • Classic - There are four classic tab layouts to choose from. They are left, top, right, and bottom. Each type is named to tell you where the tabs will appear in the section.
  • Accordion - There is one accordion layout to choose from. Tabs will appear as individual boxes in a vertical list, stacked on top of one another. The tabs will be collapsed by default when you add them to the section. Each tab contains a drop-down arrow that, when clicked, will show the information inside of each tab.

3

Enter a Tab Name + add additional tabs

After selecting the tab layout you would like, an automatic pop-up will prompt you to enter the name of your first tab. Enter your tab name, and click on the green save button.

Next, add any additional tabs by hovering your cursor over your tabs section and clicking on the + symbol in the upper right corner of the section. You will once again be prompted to add a tab name.

Don’t worry about the order you enter each tab. You can always select the orange bar on the side of each individual tab, hold your mouse button, and drag the tab to change the order (pictured below).

4

Add content to each tab

Now that you have your tabs, click on the tab to which you want to add content to. Once selected, you can drag and drop content modules into the empty content area (outlined with a dashed gray line). Simply click +Add Content in the lower-left corner of your screen. Then, choose a content modules and drag-and-drop it into the selected tab section.

NOTE: When dragging content modules into a tab, modules that are compatible with the tabs section will become highlighted in green when placed in the tab. A module that is not compatible with the tabs section will become highlighted red, and the content module will not work in that particular section. Each tab will allow only one module.

5

Review and make changes

After adding all your tabs and the content for each, you can preview the section's appearance and functionality in the Design Studio. Don't forget to hit the green Publish button on your page once you're ready for the Tabs to appear on your website!

If you want to change the layout of your tabs, simple click the Settings icon in the upper right corner of the section you created. In the Tabs Section Settings dialog, you can add a background color in the Design tab, or use the Layout tab to select a different tab layout. 

PRO TIP: Learn more about a few lesser-known features that you can use to customize your Tabs section.

Ideas for using tabbed content

Consider adding a Tabs section to pages that have a lot of information. Instead of scrolling through paragraphs of text, categorize the content so that your site visitors can select to view the information they need by simply clicking on a tab. 

Here are some ideas of pages that may benefit from a Tabs section:

  1. School Registration: deadlines, requirements, fees, open house dates.
  2. Fundraisers/Festivals: ticket information, parking, schedule of events.
  3. Pilgrimages: deadlines, informational meetings, pricing, sites visiting.
  4. Giving Campaigns: types of gifts, pledge deadlines, purpose of funds.