Adding Tabs

Adding Tabs
Content Sections

Tabs show related content side by side in the same space. Visitors select a tab name to see its content. They work well for a few parallel topics, such as Trash, Recycling and Yard Waste. Tabs are added as a Content Section.

Add Tabs

At the bottom of the Content Sections area, select the arrow beside the Add button, then choose Add Tabs.

The Content Sections add menu open, with Add Tabs highlighted.

The tabs appear with the first tab. Each tab has:

  • Tab Name – the short label visitors select, such as “Recycling”. It’s required.
  • Tab Body – the content shown when the tab is selected.

New tabs with the first tab, with the Tab Name field and the Add Simple button highlighted.

Add the Tab Content

Type the tab name. Then, under Tab Body, select Add Simple to add a text editor. To add something else, select the arrow beside it: an image, columns, a view or a Google map.

The Tab Body add menu, with Image, Columns, View and Google Map options.

Type the content in the text editor. It has the same buttons as the main text editor.

A tab named Trash with its text typed in the text editor.

A tab body can hold more than one item, for example text followed by an image. Add them in order with the same buttons.

Add More Tabs

Select Add Tab Section below the last tab, then fill in its name and body the same way.

The Add Tab Section button highlighted below a tab.

Reorder, Copy or Remove a Tab

  • Reorder: drag a tab by the dotted handle on its left. The first tab is the one visitors see when the page opens.
  • Copy: select the three dots at the top right of the tab, then Duplicate.
  • Remove: select the three dots, then Remove. If asked, select Confirm removal.

The three-dot menu of a tab open, showing Remove and Duplicate.

To remove all the tabs, use the Remove button at the top right of Tabs.

On Your Page

Save the page and view it. The tab names show in a row, and the first tab’s content shows below them. Visitors select a name to switch tabs. Keyboard users can also move between tabs with the arrow keys. Colors and styles depend on your site.

Three tabs on a page, Trash, Recycling and Yard Waste, with the Trash tab selected.

The same tabs with Recycling selected, showing its content.

Tabs or an Accordion?

  • Use tabs for two to five related topics with short names, where visitors pick the one that applies to them.
  • Use an accordion for longer lists, such as frequently asked questions, or when titles are longer than a few words. See Adding Accordions.

Tips

  • Keep tab names to one to three words, so they fit on one line on phones.
  • Tab names aren’t headings. If a tab’s content needs headings, follow the page’s outline: Heading 2 for main sections, Heading 3 inside them. See Headings and Text Formatting.
  • Put the most important or most used topic in the first tab. Content in other tabs is hidden until a visitor selects it.
  • Save the page as Published when you are done so the public can see it.

See Content Sections for the other section types.

Dennis Osnitsky