1. Building Sites with Oracle Content Management
  2. Creating and Editing Sites
  3. Arrange Page Content
  4. Use Tabbed Section Layouts

Use Tabbed Section Layouts

You can use a tabbed section layout to create spacing and arrangement of the components you add into the layout.

To add a layout to a page:

  1. Navigate to the page you want to edit and make sure that Edit switch is set to Edit.
  2. Add the layout to the page. By default, a single tab is added with the layout. Click New Tab to add additional tabs.
  3. To place other content in a tab, drag and drop the content onto the tab.

    You can continue adding items to the layout and the layout will format them accordingly. You can even add other section layouts to create sophisticated layouts or add component groups.

  4. To edit a tab and its appearance, click its menu icon Component Menu icon, and choose Settings.
  5. Use the Background section to modify background settings for the tab.
    You can use an image for the tab, change its position, and so on. See Change the Background or Theme.
  6. Use the Style section to modify other appearance settings for the tab. Choose a style, such as hairline, frame, and so on, or customize the border and the corners for the tab.

Collapse Tabs in Section Layout Settings

When using tabs in a section layout component, you can specify the pixel width that triggers the tabbed content to stack and allows a site visitor to collapse and expand each tab. This is useful when a site visitor is viewing on a mobile device with a limited screen size for content.

To specify the pixel breakpoint that triggers the collapse response, use the custom settings in the general settings options of the section layout component that contains the tabs.

  1. On the site page you are editing, add a section layout component.

  2. Create the number of tabs you need and add the content you want in each tab.

  3. Open the settings for the section layout component that contains the tabs.

  4. Click Custom Settings.

  5. Enter the pixel width at which you want the tabbed content to stack and collapse in the Responsive Breakpoint field.

  6. Select Show in Accordion from the Responsive Behavior selector.

  7. Close the settings and click Save in the action bar to save the changes to the site update.

  8. Test the settings by toggling to View mode and selecting a viewport with a width below the breakpoint.