Drupal Lite: Use Folwell Tabs Wrapper

Folwell Tabs Wrappers can be used to create a tabbed interface on a page. Using Tabs Wrappers can make the content easier to navigate.

There are four parts to a Folwell Tabs Wrapper: Tabs Section Title; Tabs Panel; Tab Title; Tab Content

Table of contents

Add a Folwell Tabs Wrapper to a page

Edit the page

  1. Login to the site.
  2. Select Content from the admin toolbar.
  3. Locate the page.
  4. Select Edit. The page is displayed in Edit mode.

Add a Folwell Tabs Wrapper

  1. Scroll down to the Folwell Components section.
  2. Select Add Folwell Tabs Wrapper from the list of Folwell Components.
    list of folwell components with Add Folwell Tabs Wrapper at the top of the list.
  3. Enter a Tabs Section Title. This can be left blank if no title is needed.
    • Select Add Folwell Tabs Panel.
      • Enter a Tab Title. This is displayed on the tab.
        • Best practice is to keep tab titles very short since the amount of space is limited. Too long of a title, and the wrapping can make it hard to read.
    1. Select Add Folwell Tab Content. A Text Area editor is displayed.
      • Enter the content.
        • See below for information about working with multiple text areas in a Tabs Panel
    2. To add another tabs panel, select Add Folwell Tabs Panel.
      1. Enter a Tab Title. 
      2. Select Add Folwell Tab Content and enter the content.
        • The Folwell theme is responsive, and will display the content based on the visitor's screen size. If you have many tabs, the experience may be difficult to navigate if the person is using a smaller screen. Always preview your page on many different screen sizes (desktop/laptop/tablet/phone).
  4. Select Save at the bottom of the page.

Working with Multiple Text Areas in a Tabs Panel

When entering content in a Tabs Panel, all content can be entered in the default Text Area. However, if you want to be able to rearrange the content within the tab, there are two methods for organizing the content: multiple Text Areas within a Tabs Panel (the button labeled Add Another Item); or multiple Tab Content areas (the button labeled Add Folwell Tab Content).

the two add text buttons.

There is no styling difference between the two objects, so the presentation of the content will appear the same on the published page.

In the image below, the selected tab has two Tab Content areas (the Blue box and the Yellow box). The top Tab Content area contains two Text Areas (the Red boxes).

a tabbed area on a page. there are 3 sentences. A blue box surrounds the first two sentences, each is within a red box. A Yellow box surronds the third sentence.

Rearranging content in a Tabs Panel

Text Areas can be reordered within a Tab Content area. For example, the two red boxes can be reordered within the blue box.

  1. Scroll Down to the Folwell Components section of the Edit Page form
  2. Within the Folwell Tabs Wrapper section, scroll down to the Tabs Panel section
  3. Select Edit for the tab that contains the text areas that will be reordered
  4. Scroll down to the Tab Content section
    1. Select Edit for the Tab Content area to reorder text areas
    2. Use the compass icons in the left column to reorder the text areas
      the tab content area, there are two items in the Text Area section each with a compass icon highlighted in red boxes.

Tab Content areas can be reordered within the Tabs Panel. For example, the Yellow box (in the screenshot above) could be moved above the Blue box.

  1. Scroll down to the Folwell Components section of the Edit Page form
  2. Within the Folwell Tabs Wrapper section, scroll down to the Tabs Panel section
  3. Select Edit for the tab that contains the text areas that will be reordered. (In the screenshot below, the second Folwell Tabs Panel is expanded, so the edit button is labeled Collapse).
  4. Scroll down to the Tab Content section.
    • Use the compass icons in the left column to reorder the text areas
      the tabs panel section of the edit form. the compass handles are highlighted in the Tab Content section
      The 2nd content area was moved to the first position:
      the same tab content table, now showing the second item in the first position

Rearrange Tabs

It is easy to rearrange the tab order.

  1. Enable Edit mode for the page.
  2. Scroll down to the Folwell Tabs Wrapper in the Folwell Components section.
    • In the Tabs Panel sections, use the four-headed arrow to reorder the tabs.
      the tabs panel showing two items int he table with the move arrows highlighted.
      • The left-most tab (as displayed) will be the top item in the Tabs Panel table.
         

 

Last modified

TDX ID

5573