This is the content on the first tab. Tabs can be a great way to provide different pieces of information about a similar topic.
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.
Custom Language: The default language is English. Language options that will generate markup signifying that content as being in the selected language.