Component panes added to Panel pages by default use a pane style called 'No Title'. The Section pane style is a wrapper for each pane that adds additional fields and theming options. They allow content to broken up into 'strips' down the page to aid legibility and design.

Sections constrain the width of the component pane they wrap to the central content column. This is primarily used on full-width page layouts.

Some component panes such as the Hero Banner and Default page header are designed to display full-width and should not be wrapped in a Section pane style.

Only the Site Builder can change and edit the pane style.

Section pane style adds the following fields and theme options; all of which are optional or configurable.

  • Section title (heading)
  • Summary content
  • Footer content
  • Top and bottom spacing
    • Top and bottom can be configured separately
    • Default, large, extra large or no padding options.
  • Pre-defined background colour and textures
  • Background image
  • Section text colour (dark or light) - to provide contrast against the background options.
  • Section alignment layouts


 

Example

example of a rich text component with a section pane style

1. Using the Section pane style

Step 1

Click Customize this page to start editing the page.

Customise this page

Step 2

Click the paint brush button on the component to open the pane style form.

Add pane style

Step 3

The "Pane style" form displays. 

  1. Selection Section
  2. Click Next

Step 4

It is optional to enter content in the Style settings fields. The contents in the fields will display in the pane as shown in the image below.

Pane style fields

  1. Section Title
  2. Title element - Select the heading style from the range h2 to h4. The default is h2.
  3. Summary content
  4. Footer content

Add style fields 1-4

  1. Background image (Optional)
    Images should support the content. Avoid busy images that make the component content difficult to read. Aim to use textures or photos with a single point of focus.
    • Click Choose file and select an image from your computer.
    • Click Upload

Insert image

  1. Top spacing
  2. Bottom spacing
  3. Theme - If a background image was used, a dark or light tint can be applied to improve contrast for the Section and component pane content..

Fields 6-8

  1. Text colour - The text colour selection only applies to the Section Title, Summary Content and Footer Content fields.  Select either light or dark text.
    Components generally provide their own theme options to manage text colour.

Field 9

Note: To change the colour of the content inside the section to light you will have to apply the css class light-palette to the component through the edit panel interface.

  1. Layout
    There are three (3) options for layout.

    Single column, centred

    single column, centred

    Single column, left-aligned

    single column, left-aligned

    Two column, left-aligned

    Two column, left-aligned

  2. Utility

    1. Allow overflow - Used when a Section pane style wraps a component containing a drop down list that extends below the height of the Section, so that the drop down is not cut off. This has some design implications for tints used on the Sections so double check the display if using this option.

  3.  Click Save to accept the pane style settings.

Customise display 10-12

Step 5

The system returns to the panel page In-Place Editor. Click Save to complete process of styling the component.

Save changes to the pane style

The completed component displays.

Grid of links displayed

Top of page