Learn how to add Blocks to your Design Layout. Blocks allow you to add text, media, and specialized content to your pages and articles. There are three types of blocks including Basic Blocks, Media Blocks, and Paragraph Reference Blocks.
November 22, 2021
minute read time
Learn more about adding and modifying sections in Layout Builder in our article on Sections.
Adding a new Block to a Section in your Layout
Once a section is added, it's time to add content to your layout. Each Section has it's own blue "Add Block" link.
- Click "Add Basic Block" to add a block with Rich Text Editor to add text to your content.
- Click "Add Media" to add images or videos to display on your page. You can upload new files, or add them from the Media Library.
- Click "Add Paragraph References" to add specialized content to your page, such as featured items paragraphs, listing paragraphs, and data table paragraphs.
Helpful Hint
Always remember to maintain proper page structure for Accessibility by nesting the Heading Styles appropriately. In other words, smaller headings should go under larger headings!
Learn more in our article on 508 Compliance & Accessibility
Block Headings
Every Block Type has a heading that can be configured at the top of the block add/configure form.
If you do not wish to use the Block Heading, you can collapse that part of the form by clicking the Block Heading form's title. You can expand it again later if you change your mind!
Fields for Block Heading
Heading Text
This is the text displayed, unless overridden by the Heading link fields.
Heading Style
H2: Subheading / H3: Section Subheading / H4: Subsection Subheading
Heading Link
Both URL and Link Text fields need to be filled to create a linked Heading Text
- URL: Start typing the title of a piece of content to select it. You can also enter an internal path such as /node/[node ID], search by the node ID, or add an external URL starting with https://, such as https://example.com.
- Link text: This is the text displayed
Anchor Title
Use this the create an Anchor Tag on your page. Please use only lowercase alphanumeric characters, or dashes.
- Example: "Block Headings: Anchor_Tag" will become the anchor tag #block-headings-anchor-tag
Example Layouts
Block Layout Styles
Every block has individual Layout Styles that can now be applied to them. The options for layout styles include:
- Align Center Full Width
- Align Left
- Align Right
- Breakout Center Full Width
- Breakout Float Left
- Breakout Left Full Width
- Breakout Float Right
- Breakout Right Full Width
Please feel free to experiment or mix and match to find the layouts that work best for you. Always remember to design responsibly and check your pages before publishing!