Tabs Panel

The Tabs panel allows you to create multiple tabbed items of content featuring highlighted, horizontally-displayed tab headers.

Tabs Panel Guidelines

• Use tabs to alternate between views within the same context.
• Label tabs logically so that users can easily predict what they’ll find when they select a tab.
• Use tabs only when users don’t need to see content from multiple tabs at the same time.
• If headings and text can do the job, don’t use tabs.
• Keep content and layouts within tabs simple and scannable.
• Tabs should not be used as navigation.
• Use of this panel for an undocumented purpose or in a non-standard way is discouraged and may not be supported.
• Review the Recommendations for Accessible Panels page to learn more about requirements for headings, images, links, and media published in this panel.

How to Configure the Tabs Panel

• In the WordPress editor, select Add a New Panel or Live Preview.
• Select the “Tabs” panel.
• Title: This is a text field. Content entered here will appear as the panel’s primary title.
• Tabs: Add your tabs here. If there are more tabs in the panel than will fit horizontally on a display, the tabs will conveniently scroll. However, the design works best with no more than four or five tabs.
• Title: The title is not displayed to the user, but is helpful for labeling the tab in the panel so a page author or administrator can easily understand the content at a glance.
• Tab Label: This is label (or “tab header”) that will be used for the tab on the screen. Keep this short for design purposes (so small portrait-oriented screens, such as a smartphone, can display more than one tab label at a time).
• Content Columns: We recommend restating the tab label at the beginning of the content as a heading level 3. This provides some additional structure on the page for users.  Additionally, each tabbed item can have up to three columns of content within it. A default of one content column is present when panel is created. Keep in mind that multiple columns of content may not display well on a mobile device held in portrait mode.

Settings

Custom Language: The default language is English. Language options that will generate markup signifying that content as being in the selected language.