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.
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:
- Normal – top and bottom.
- Small – top and bottom and left and right.
- None – no padding.
Text Colour
There are two text colour options:
- Black – this is the default text colour.
- 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.
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:
- Top – anchors from the centre point of the top edge of the image.
- Right – anchors from the middle point of right edge of the the image.
- Bottom – anchors from the middle point of the of the bottom edge of the image.
- Left – anchors from the middle point of the of the left edge of the image.
- Centre – anchors from the centre point of the image.
- 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:
- White
- 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
Section with Background Image / with background gradient / text colour: white
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