About

The Section Block allows you to create a framework for your content when using the Component Template.

The Component Template is more flexible and less structured than the Standard Post Template. When you use the Component Template your content fills the full width of the screen (unlike the Standard Post Template which has the sidebar on the right hand side).

When using the Component Template, the Section Block is an essential building block for your content, it ensures you have appropriate spacing and margins around your content.

When building pages using the Component Template, all other content (besides the Header Block) should be nested within Section Blocks.

Adding a Section Block

To add a Section, click on the Block Inserter (+). Alternatively, you can type /Section in a new paragraph and press enter.

Get detailed instructions on adding blocks.

Section Block Settings

Each block has its own block-specific controls that allow you to manipulate the block in the editor. Click on the block you want to edit and select the settings wheel in the top-right corner. Make sure you have selected the Block tab in the settings sidebar.

Options

Section Name

The Section Name is useful to use if you are also using the Menu Block to create internal navigation in your page.

If you are not using the Menu Block, the Section Name will not show on the front end.

Padding

There are three padding options for Section Blocks:

  1. Normal – top and bottom.
  2. Small – top and bottom and left and right.
  3. None – no padding.

Text Colour

There are two text colour options:

  1. Black – this is the default text colour.
  2. White – you can change the text colour to white if you have a dark-coloured background image, to make the text more readable.

Background Options

Select Background Image

This option allows you to choose a background image which will show behind your content. You may wish to use a photograph or a graphic design.

e.g.

Section background with photograph
Section background with graphic design

Minimum image height

The height of the Section will usually adapt to fit the content inside it.

If you are using a background image you may wish to have more control over the height of the Section, to ensure more of the image can be seen.

The image height is measured as a minimum viewport percentage meaning the percentage you select will represent the minimum proportion of the screen height that this Section will fill.

Background Overlay

Toggle Background Overlay will add a darker layer over the background image to increase the contrast between the background image and the text. If you are using the background overlay, you should select White for your text colour.

Background Image Origin

This allows you to choose the positioning of the background image. There are six options:

  1. Top – anchors from the centre point of the top edge of the image.
  2. Right – anchors from the middle point of right edge of the the image.
  3. Bottom – anchors from the middle point of the of the bottom edge of the image.
  4. Left – anchors from the middle point of the of the left edge of the image.
  5. Centre – anchors from the centre point of the image.
  6. Initial – anchors from the top left corner of the image.

Background Colour

If you are not using a background image, there are two background colour options:

  1. White
  2. Gray

Section Block Demonstration

See below examples of how this block looks when using the different block options.

This is a white section with normal padding

This is a grey section with normal padding 

This is a white section with no padding

This is a grey section with no padding 

This is a white section with small padding

This is a grey section with small padding 

Background Image Variations

Section with Background Image / no background gradient / text colour: black

Here is a heading

Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content

Section with Background Image / no background gradient / text colour: white

Here is a heading

Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content

Section with Background Image / with background gradient / text colour: black

Here is a heading

Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content

Section with Background Image / with background gradient / text colour: white

Here is a heading

Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content

Background Image Origin Variations

Section with Background Image / no background gradient / Image origin: top

Here is a heading

Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content

Section with Background Image / no background gradient / Image origin: right

Here is a heading

Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content Here is some content