Webinar Demo

All About Layout Builder!

 

 

Layout Builder is an on-page editing tool. Drupal's Layout Builder allows content editors and site builders to easily and quickly create visual layouts for displaying content. Users can customize how content is arranged on a single page, acros types of content, or even create custom landing pages with an easy-to-use drag-and-drop interface. 

 

 

Available Blocks

 

  • Basic Block
  • Cards
  • Carousel
  • Modal
  • Ping-Pong
  • Promo Card
  • Tabs
  • Webform
  • More to be developed! 

Great catch! Layout Builder breaks everything down into two pieces: 

 

 

Sections 

and 

Blocks

 

What is a section?

 

 

Sections allow you to create 1-4 columns in a specific section of your page. 

 

 

Within each section, you will have the option to set the container type: Boxed, Full, Edge to Edge

 

 

You can also set your columns widths (desktop, tablet, mobile) 

 

 

And... there are even options to add in animation into sections on a page! 

 

 

When editing a page, you will always start with adding a section before you add custom blocks within that section. 

What is a custom block?

 

 

Custom Blocks are what you will add into the sections you create. 

 

 

You will ALWAYS choose the 'Create custom block'

 option

 

 

Currently, we have around 10 custom blocks to choose from with more planned to add in the future. 

 

Card Section Heading

Card Section Subheading

Heading 1

<p>Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar.&nbsp;</p>

Heading 2

<p>Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar.&nbsp;</p>

Heading 3

<p>Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar.&nbsp;</p>

Heading 4

<p>Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar. Card Section Body. This is demo content for our webinar.&nbsp;</p>
Optional Card Section Button
swimming

Heading

Description Field. This is all demo content to show you how cool the ping-pong custom block is. Description Field. This is all demo content to show you how cool the ping-pong custom block is. Description Field. This is all demo content to show you how cool the ping-pong custom block is. Description Field. This is all demo content to show you how cool the ping-pong custom block is. 

Opitonal Button 1
Optional Button 2
volunteer

Heading

Description Field. This is all demo content to show you how cool the ping-pong custom block is. Description Field. This is all demo content to show you how cool the ping-pong custom block is. Description Field. This is all demo content to show you how cool the ping-pong custom block is. Description Field. This is all demo content to show you how cool the ping-pong custom block is. Description Field. This is all demo content to show you how cool the ping-pong custom block is. Description Field. This is all demo content to show you how cool the ping-pong custom block is. Description Field. This is all demo content to show you how cool the ping-pong custom block is. 

Button 1
Button 2
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

swimmer

 

Tab Heading 1

This is demo content to show you how to tabs work. This is demo content to show you how to tabs work. This is demo content to show you how to tabs work. This is demo content to show you how to tabs work. 

Tab Heading 2

This is demo content to show you how to tabs work. This is demo content to show you how to tabs work. This is demo content to show you how to tabs work. This is demo content to show you how to tabs work. This is demo content to show you how to tabs work. This is demo content to show you how to tabs work. This is demo content to show you how to tabs work. 

Card Heading

<p>This is demo content to show you how to cards work. This is demo content to show you how to cards work. This is demo content to show you how to cards work. This is demo content to show you how to cards work. This is demo content to show you how to cards work. This is demo content to show you how to cards work. This is demo content to show you how to cards work. This is demo content to show you how to cards work. This is demo content to show you how to cards work.&nbsp;</p>
Optional Button

I am a Heading!

This is demo content to show you how to tabs work. This is demo content to show you how to tabs work. 

Promo Cards

Body of Promo Cards. This is demo content for our webinar. Body of Promo Cards. This is demo content for our webinar. Body of Promo Cards. This is demo content for our webinar. Body of Promo Cards. This is demo content for our webinar. 

Optional Button

Second Promo

Body of Promo Cards. This is demo content for our webinar. Body of Promo Cards. This is demo content for our webinar. Body of Promo Cards. This is demo content for our webinar. Body of Promo Cards. This is demo content for our webinar. Body of Promo Cards. This is demo content for our webinar. Body of Promo Cards. This is demo content for our webinar. Body of Promo Cards. This is demo content for our webinar. 

3rd Promo

Body of Promo Cards. This is demo content for our webinar. Body of Promo Cards. This is demo content for our webinar. Body of Promo Cards. This is demo content for our webinar. 

Button

Address

Address: 123 Charity Lane, Donorville, MA 01234 Phone: 866-325-2507 noreply@domain.com