Instead of paragraphs bundles, most of the layout will be built with a tool called Layout Builder. It allows for fine tuned customization of the layout of your page. You can set the number of columns, add spacing, set background videos, and much more.
Layout Builder Library allows you to add sections or even entire pages to a library that you can reuse elsewhere on the same page or in your entire site.
Your site will already have some options in the library that provide equivalent options that were provided in Drupal 7 with Paragraph Bundles.
This black area is a section
A section is a container for different layout options. You can pick from 1-6 columns to add to a section and then place blocks in the columns.
One section can only contain one layout option. So, if you want to create a full width photo and then have two columns underneath it, you'll need to create two sections. Sections can't be re-ordered, but you can create a new section and drag or move the blocks to the new section.
Columns
A column is a way to divide up the space within a section. You can choose between 1-6 columns in each section with a variety of pre-set widths, shown in percentages.
Blocks
Blocks are smaller containers for content to place inside a column of a section. A block can contain just about anything, but most commonly, it will contain text, links, buttons, and images.
This section's settings
- Bootstrap 1 Column
- Edge to edge
- 100% width for all screen sizes
- No gutters
Gutters
Gutters create space between columns in a section. It will add 12 pixels of padding on the left and right sides of each column.
Full Width Section
The black area is the amount of area that you can fill with content. If you want a layout that goes close to the edge of the browser, but not all the way, then you want to select Full Width.
Section Settings
- Bootstrap 1 column
- Full width
- Full width provides a small amount of padding (space) on the left and right of the section.
- 100% for all screen sizes
- No gutters
Block Settings
- 48 pixels of padding gives the spacing around the text
Boxed Section
The black area is the amount of area you can fill with content. If you want a layout that gives ample spacing between the browser and the content, then you want to use the Boxed setting.
Section Settings
- Bootstrap 1 column
- Boxed
- 100% for all screen sizes
- Gutters
Block Settings
- 48 pixels of padding gives the spacing around the text
Gutters vs No Gutters
The next 2 sections have 3 columns each. The first section has gutters, which creates padding between the 3 columns. The second section doesn't have gutters, so there is no space between each item.
A nice three column with a full width image and rounded corners. If you want to add more:
Add block->OSU Card and ensure to select the View Mode at the bottom of the form to be "Full Image".
The new center will provide support and training from an anti-bias, culturally responsive lense to better equip educators who care for children from marginalized populations and for children who have experienced trama.
More Filler text. The text in these body fields really should not be overly long. Use the link option to help drive visitors to the pages that have more content.
No Gutters Example
Spacing
Spacing can be added many different ways.
It can be added to the...
- Section
- Column
- Block
You can add spacing In the section and block settings by clicking on the Style tab and using the Spacing option. You can add up to 128 pixels of each. However, that is a lot of pixels for mobile screen sizes. You need to check how your web pages look on mobile to ensure that you haven't created too much space. It can cause readability issues to make the text too narrow.
We opted to give that amount of spacing because we thought Layout Builder was going to offer to set margin and padding at different screen sizes. Unfortunately, that feature has been significantly delayed.
To create spacing between columns, you can add gutters in the Section configuration. If you want additional spacing than what the gutters add, then you will need to set the spacing for each block in the section.
You can add spacing via...
- Margins
- Padding
These 2 properties work differently.
Margins
Think of margins as pushing other elements of the page away from the section that you are adding margins to.
Important properties of margins
- Adding margins doesn't extend the background color or image.
- Margins collapse. If you add margin to the top and bottom of 2 blocks that are stacked on top of each other, they will not accumulate.
- Example: You have a margin top and bottom of 48 pixels for 2 sections on your page. The total spacing between the 2 section will be 48 pixels, not 96. This is a fundamental web property that we can't change. If you want to add spacing that doesn't collapse, use padding.
- MDN page on collapsing margins
Padding
Think of padding as a way to pushing in the content of the element you are changing.
Important properties of padding
- Padding will extend the background color or image.
- Paddings don't collapse. If you set a padding top and bottom of 2 blocks that are stacked on top of each other, they will accumulate.
- Example: You have a padding top and bottom of 48 pixels for 2 sections on your page. The total spacing between the 2 section will be 96 pixels.
Spacing Values
There is a slide bar for setting the value of your spacing. You can set it to your desired spacing. Layout builder provides a preview option, but if you think in rems or pixels, here is a reference table:
| Level | Rem value | Pixel value |
|---|---|---|
| 1 | 0.25 | 4px |
| 2 | 0.5 | 8px |
| 2-5 | .75 | 12px |
| 3 | 1 | 16px |
|
4 |
1.5 |
24px |
| 4-5 | 2 | 32px |
| 5 | 3 | 48px |
| 6 | 5 | 80px |
| 7 | 8 | 128px |
Default Spacing
There isn't any padding or margin added by default to a section or a block. Since there isn't a one size fits all with Layout Builder, we opted to include no spacing to these elements.
Default Page Section
Every basic page has a Default Page Section added to it. This is to ensure that the body field will show up if it is used. Even if it is empty, there will be a small amount of spacing added to the bottom of the page. If you aren't using the body field and want the Layout Builder elements flush with the footer, you need to remove that Default Page Section.
Information for advanced users
We use the modules (extra code added to our version of Drupal)
Bootstrap Layout Builder expands the capacities of Layout Builder and is based on Bootstrap 5. For those who want to do more advanced customizing, you'll need to be familiar with Bootstrap 5 to maximize your options and reduce frustration.
A recommended way for advanced customizing is to use the options provided in Layout Builder first. Then use the option to add classes to a section, column, or block. Find a Bootstrap 5 class that suits your needs. If you can't find a Bootstrap class that accomplishes your goal, then write your own class and CSS and/or JS.