You are here

Getting Started With Layout Builder

Welcome to the new Drupal Content Editor experience called Layout Builder. Once your site is migrated to Drupal 8 and you have logged in, you will find the landing page has changed quite a bit from Drupal 7!

To choose a custom block tutorial, select from the list of names:

Background Image Content Box
Content Slideshow
Events Grid
Freeform Text
Hero Banner
News Grid
Points of Pride
Testimonial
Vertical Spacer

This is the Hompage with the menu to edit the page and Layout Builder.

layoutbuilder homepage

You can edit the text on the Homepage by selecting Edit.

edit page

To change the layout and add content to your page, select Layout. This is the main editing page for Layout Builder.

layoutbuilderedits

Add a Section

You may add a section to the page by selecting "Add section". You can choose from a one, two, three, or four column layout.

add columns

Columns two through four have the option to set the width of the columns. All columns can have an Administrative label added and you can choose from the a list of background colors or leave the default.

configure sections

The following image shows all four of the columns added with the default width ratios selected.

all four

Once a Section is added you then can choose to add a block. Blocks are content areas in Drupal 8 and can contain any text, media, content, or links. Select add block at any point in a section.

Then select Create custom block.

create custom block

You then have the following options to choose from:

Background Image Content Block

This custom block will allow you to present content with either an image in the background or from a selection of background colors. This image is an example of what the block will look like.

bgimgfinal

Title

The custom block requires a title, but it defaults to the name of the block and it can be optionally displayed.

bgimgtitle

 

Background Image

The background image can be inserted through the add media button.

background image select

COE Widgets

You have the option to add up to three content boxes or COE widgets. You can switch the published state of the content box. You can give it a headline, this is optional. In the body section you can add links,text, or media through the rich content editor.

coewidgetadd

Button Link and View Mode

You may also add a link button to internal or external sites. And choose a background view mode from the drop down. Select the options and see what works best for your content.

buttonandviewmode

Select the Add block button to save the block to your page's section and then select save layout to add your changes to the homepage.

Content Slideshow

This custom block allows the presentation of five slides of previously created content. This image is an example of the content slideshow.

 

conslidefinal

Title

You can provide a title or leave the default of Content Slideshow. It is set to not display. You may add a custom class. To add a slide search for the title of the piece of content that you would like to show. The autocomplete will return results. You can reorder by number on the right of the slides. The show more button is optional.

Content slideshow

 

You can change the View mode to a range of different backgrounds. Once you are satisfied with your edits, click add block and then save layout to add this block to your page.

 

Events Grid

This custom block allows you to showcase previously created events. This is an example of three events positioned on an added section of the homepage.

events grid

Title

You may edit the title of this custom block. It has been set to display the title of Events.

eventsgridtitle

Filtering

Under filtering you can include, exclude, or ignore events that were promoted to the front page.

egfiltere

Tagging

You can also filter by Internal Categories or Freeform Metatags and use the numerical dropdown to reorder. You can also add another item to keep adding Categories and Metatags to filter by.

egtagging

View Mode and Saving

View Mode can be selected to display with or without summary and in 3, 6, or 9 events displayed in your custom block.

egviewmode

Select add block to add your custom block of Events Grid to the section of your page.

Freeform Text

This custom block allows you to add text to the section of your page.

freemformtext

Title

You may add a custom title, it will default to Freeform Text and to not display.

 

freetitle

 

Body

You can add any content into the rich content editor.

free body

Custom Class, View Mode, and Saving

You also may add a custom class and select from the view modes of Standard Text Block and Sideabar.

classviewadd

When you are satisfied with your edits, select add block to save it to the section of your page.

 

This custom block allows you to add a full-width image with text and linking to your section. There is also the option to unpublish one hero banner by a specific date and have another take its place. This image shows an hero banner added to a section.

herobanner

Title

The title defaults to Hero Banner and is not set to display.

hero title

Text & Linking

These options allow text to be added to three sections of the image. You may also adjust the region that the text appears on with the Text Placement dropdown. And a link to be added to an external or internal website.

textandlinking

 

News Grid

The News Grid custom block showcases the latest news from your site. The following image shows a 3 grid option of News articles in an added section of the Homepage.

news

Title

 

The title is required and set to display the title of News. You may alter or choose not to have one.

 

Filtering

 

You can include and exclude news articles with a featured image and include news articles that do not have a featured image. This decision is based on the context of your block's placement.

Tagging

You can search for previously created Internal Categories or Freeform Metatags and add as many as you would like. You can reorder by numerical dropdown.

If News articles have been promoted to the front page, you can choose to display them or not in this selection area.

The More News Link is optional.

The offset selection allows you to skip news articles so there will not be duplicate content on a page. You may add a custom class. You can choose from six layout options depending on the area of the page this block is in and how many news articles you want to display. To add the News Grid custom block, select add block.

 

Points of Pride

This custom block allows you to add icons and stattistics to a section of your page. Each point of pride allows linking to internal or external links.

 

Title

The title is required, but set to not display.

 

COE Widgets

You have the option to add up to four points of pride. Select add new coe widget to add one.

 

Font Awsome Icon Search

You can search for an icon in the Icon fa- field. There are hundreds to choose from and more added daily. Review their website for more information Font Awesome

You can add large, medium, and blurn text to the point of pride. You can position the blurb above or below the icon. You can also add a link to a supporting page (internal or external).

fa

Custom Class, View Mode, and Saving

You can add a custom class to later target with css. You can choose from the view modes, review them to see what fits your use case. Select add block to add the Points of Pride to the section of your page.

 

Testimonial

The purpose of this custom block is to showcase students' and faculty's experiences. This custom block includes a headshot with a quote and a name. The following image shows the end result of this block's creation in a fullwidth section of a page.

 

Title

The title is required and will default to Testimonial, but it is set to not display.

Portrait

This is the headshot of the person making the Testimonial. You will need to find an image that will be appropriate for a large display, if using in a full width section.

Quote

The quote will be the main text content on the Testimonial with the portrait.

 

Attribution

The name of the person who made the quote.

Link

You can add a link on the Testimonial to supporting content. This link can be to internal or external sites.

Background Color and Graphic

Select a background color for the quote. Selecting "none" will let the color underneath show through. You can also choose a graphic from the options of: Buckeye nut and leaf combo, Buckeye nut, State of Ohio silhouette, or none.

Custom Class, View Mode, and Saving

You can add a custom class to later target with css. You can choose from the view modes, review them to see what fits your use case. Select add block to add the Testimonial to the section of your page.

 

Vertical Spacer

This custom block allows you to add space between your sections and blocks of content. This image shows a Testimonial with a Vertical Spacer (in gray) between a News Grid.

Title

The title is require but will default to Vertical Spacer and it is set to not display.

 

 

 

 

Spacer Type

This field is requried. This selection allows you to choose between a single or double spaced line or no line. Also you can choose to just display the title.

 

 

 

Fill Color

This is a required field. This allows you to add a color to your spacer and defaults to letting the color behind the spacer show.

Rule Color

This is a required field. This allows you to give the line, if selected, a color.

Rule Width

This is a requried field. The width of the rule, if applicable. "Full" will be the full width of the containing section. "Inset" will slightly indent both sides. "Half" centers horizontally in the containing section. If a "no rule" option is chosen for Spacer Type, this option does not matter.

Custom Class and Saving

You have the option to set a custom class. Select add block to upload the Vertical Spacer custom block to the section of your page.