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
.png?alt=media&token=7217d37c-7da0-48b5-a775-e14b6e5de2f4)
sectionblock - 3.Click on the
sectionblock 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
sectionblock - 3.Click on the
sectionblock 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