Example of a section in a section

Example of a Section in a Section

What is a section in a section ?

 

What is a section?
 

Using sections is an effective way to enhance the visual appeal of your content. When creating or editing content  in the web platform, a section refers to a group of fields that are logically grouped together. This grouping improves content editing usability by organizing related fields into manageable parts. Sections also help organize content visually; for example, a page might have a header section, a main content section, a sidebar section, and a footer section. These sections aid in structuring content and enhancing the user experience.

 

Section in a Section

By nesting one Section within another, you can achieve greater flexibility and customization.

 

How to add a section in a section 

  1. Click the edit link at the top of the page

    Example of selecting the edit button on a page
  2. Move your cursor where you want to place the section. (Add a section if needed). 
  3. Click the plus icon.

    Example of the plus icon with a red square around the icon
  4. Select section from the menu.

    Example of the section menu selected

 

Content 

  1. Select the layout with the appropriate number of columns. 

    Example of a column select menu

Styles 

  1. Toggle to the Styles tab. 

    Example of the Styles option selected
  2. Select the desired background color to highlight components: None (default), Santa Barbara Sand, or Venice Canal.
    Note: Applies only to One Column Sections.  
    Note: This setting is only available for site owners and should be used sparingly. It is recommended to apply it only once per page to emphasize key information.

    Example of background color selection options
  3. Select Columns to place your section horizontally. This should be used only with the Icon component.
    Note: Applies only to One Column Sections. 

    Example of a display columns check box
  4. Select the amount of additional space you would like above the component. 
  5. Select the amount of additional space you would like below the component. 
    Note: By default, there is no space below a component.
     

    Example of the padding select menu for top and bottom margin

     

     

Save

  1. Click Save.
  2. Scroll to the top of the page and click Save.

    An example of how to save both the component and the page. The save buttons for both are outlined in red to emphasize the action.
  3. Click the Done button beside the save button.
    Note: This will display the page in the closest representation of how site visitors will view it. All links and actions that are disabled in editing mode will be functional now.
     

    Example: of the Done button outlined