WiscWeb - WordPress UW Theme - Tabbed Content Page Element
The Tabbed Content page element allows you to have a series of editable, conjoined tabs on a page. Each tab displays the content within that tab, while other tabs remain hidden until they are selected. This functions similarly to tabs in a web browser. For an example, see the WiscWeb website.
Layout Availability
Tabbed Content is available in only One Column Content Layouts.
Best Practices
- You should not use Tabbed Content if you need to directly link to the content of one of the tabs. Any information that requires a direct link should be its own page and not a tab. You cannot directly link to a specific tab.
- If content resides in a tab, it will be more difficult for your website users to locate the it via a keyword search. Therefore, any information that you need your users to find via a web search should be on its own page and not in a tab.
- Tab titles should be short, as they take up horizontal width on the page. Long tab titles will not display well and may confuse your visitors.
Adding Tabbed Content
- Navigate to the page on which you want to add Tabbed Content.
- Scroll to the Primary Content Area and the Layout on which you want to add Tabbed Content.
- At the bottom of that Layout, click on Add Page Element.
- On the Page Element list, click on Tabbed Content.
Using Tabbed Content
Tabbed Content has two fields for you to fill out, the title and the text area. The title will appear at the top of the tab and displays when it is open or closed. The text block appears beneath the title and functions the same as the Text Block Page Element.
Adding and Rearranging Panels
There are two ways to add new panels.
- Add Tab Button: This button appears at the bottom of all of your panels. Clicking it will add a new tab as the last tab in your Tabbed Content.
- The Plus (+) and Minus (-) Symbols: On the right side of each tab, mousing over the gray strip will show a plus (+) symbol and a minus (-) symbol. Clicking the plus (+) will add a tab before the panel you've selected, and clicking the minus (-) will add a panel after the panel you've selected.
You can also rearrange the tabs after you've added them. To do this, mouse over the left column and you'll see numbers appear. These numbers coincide with the order of the tabs as they appear on the page. Click and drag the tabs to where you want them to appear. For example, if you want the third tab to appear second, navigate to the third tab, click and drag in the left column to above the second tab, and release the mouse. This should move the tab from third to second, and the second tab should now be third.
