Section
The
section
block is one of the most important parts in the structure and layout of a webpage. Sections contain related inner blocks and divide the webpage into readable and fluid content.The
section
block will always centre its inner blocks. If you want your content to take the full width of the page, please consider using a div
block.The
section
block is essentially a quick block that allows you centre your content in a wrapper with a given width.The
section
block consists of 2 Div blocks with pre-defined styles. It comes with a 1220px centred max-width on desktop displays while on mobile devices, the section
block extends across the full width of the screen.Getting Started - Section Block
If you want to add a
section
outside any other block on the page:- 1.Click on the ➕ icon to open the Inserter Panel
- 2.Search for the
section
block - 3.Click on the
section
block to insert it into your page
You can also:
- 1.Click on the section icon in the Quick Block Inserter
If you want to add a
section
inside a parent block:- 1.Open the Quick Insert panel in the parent block
- 2.Search for the
section
block - 3.Click on the
section
block to insert it into your parent block
<section>
means that the content inside is grouped (relates to a single theme), and should appear as an entry in an outline of the page. Basically, it is used to group elements together, pertaining to the same theme.The
<section>
element is appropriate only if the element’s contents would be listed explicitly in the document’s outline. (i.e. Front Page, About, Pricing...)<div>
does not convey any meaning, aside from any found in its class
and title
attributes.When an element is needed only for styling purposes or as a convenience, it is encouraged to use the
<div>
element instead of<section>
.Last modified 6mo ago