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:
This is the Hompage with the menu to edit the page and Layout Builder.
You can edit the text on the Homepage by selecting Edit.
To change the layout and add content to your page, select Layout. This is the main editing page for Layout Builder.
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.
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.
The following image shows all four of the columns added with the default width ratios selected.
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.
You then have the following options to choose from:
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.
The custom block requires a title, but it defaults to the name of the block and it can be optionally displayed.
The background image can be inserted through the add media button.
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.
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.
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.
This custom block allows the presentation of five slides of previously created content. This image is an example of the content slideshow.
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.
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.
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.
You may edit the title of this custom block. It has been set to display the title of Events.
Under filtering you can include, exclude, or ignore events that were promoted to the front page.
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.
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.
Select add block to add your custom block of Events Grid to the section of your page.
This custom block allows you to add text to the section of your page.
You may add a custom title, it will default to Freeform Text and to not display.
You can add any content into the rich content editor.
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.
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.
The title defaults to Hero Banner and is not set to display.
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.
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.
The title is required and set to display the title of News. You may alter or choose not to have one.
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.
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.
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.
The title is required, but set to not display.
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).
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.
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.
The title is required and will default to Testimonial, but it is set to not display.
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.
The quote will be the main text content on the Testimonial with the portrait.
The name of the person who made the quote.
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.
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.
The title is require but will default to Vertical Spacer and it is set to not display.
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.
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.
This is a required field. This allows you to give the line, if selected, a color.
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.