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!

Homepage

Below is an image of the Homepage with the menu to edit the page and the Layout Builder button.

layoutbuilderhomepage

From the Homepage screen, you can edit the text of your Homepage by selecting "Edit." (this is not layout builder)

 

edit page

To change or create the layout and add content to the 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 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.

 

screen shot of all four sectional block configurations of layout builder

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

 

creating a custom block

You then have the following options to choose from:

Accordions

Please see the Accordions tutorial.

Background Image Content Block

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

 

screen shot of homepage menu

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 (College of Engineering) 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, give it an optional headline, and in the body section you can add links, text or media through the rich content editor.

 

coe widget add

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 Grid

This custom block allows the aggregation of varying previously created content. The default configuration is for Related News. See the following image for a display of four News Articles.

contentgridfinal

Title

The title is required and set to a default of "Related News."  Depending on the type of content that you choose to display, you should edit the title to be aligned with the content type (i.e. Related Events for the Event content type). You may also choose not to display a title for the Content Grid custom block by unchecking the box labeled "Display title." 

content-grid-title

Feed Mode

You can choose to bring content types in through a manual or automatic setting.

Manual Feed Mode

This allows you to choose existing content by searching for the title of the content and adding as many as you would like.

content_grid_manual_feed

 

 

Automatic Feed Mode

This allows you to bring in content organized in descending order from creation date. The defaults for this filter are News, six articles, Match Current Story (the News Articles that are tagged with the current story's tag will be included), Ignore promoted to front page, and include News Articles that have a featured image.

content grid automatic feed

You can select what content you want to feature and can choose from 1-10 pieces of content to display. You can match the current story, pick specific tags (internal categories or freeform metatags), or do not filter. You have the option to ignore, exclude or include content that as been promoted to the front page. You can only include or exclude content that has a featured image and include all content that either does or doesn't have a featured image. You can also add a custom class.

The view mode allows a fullwidth presentation, as seen in the image of the four news articles at the beginning of the Content Grid section. The sidebar view mode is formatted for display in the sidebar region of a page. See the image below for an example.

contentgridsidebarview

Once you have the layout and content that you need, click "Add blocl" to add the Content Grid to the section of your page.

Content Slideshow

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

 

 

conslidefinal

Title

You can provide a title or leave the default of Content Slideshow. The title is set to not display. You may add a custom class.

Slides

You can add a slide by searching for the title of the piece of content that you would like to show. The autocomplete will return results. You may re-order 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.

Embedded Iframe Item

This custom block presents information from external sources embedded onto your page. The allowed sources are a Qualtrics Survey, an Office 365 Outlook Calendar, a Google Calendar, a Twitter feed, a Google Map or an Office 365 form. Please see each section for set up of the allowed sources.

Title

The title is required but the display of it is not. Depending on your use case, you can leave it to the default of Embedded iFrame and not display.

The Iframe Link is required.

Qualtrics Survey

Navigate to your OSU Qualtrics account and select Projects and select your survey. Then select the Distribution tab and select the Anonymous Link. On that screen, you will copy the link and paste that in the link section of the Embedded Iframe Item custom block.

 

example_of_qualtrics_embedded_form_engineering

Office 365 Outlook Calendar

You will first need to publish the calendar. Go to the web interface for OSU Office 365 and select the calendar. Click the gear icon in the top left menu. At the bottom of the menu, select "View all Outlook settings." Select "Shared Calendars" and choose the one you want from the publish calendar dropdown. Select the view settings for the calendar. Finally, copy the html link and paste that link into the IFrame Link field of the custom block.

embeddediframeitemoutlookcalendar

Google Calendar

Please follow the instructions on the Google Calendar Help page to publish and copy the Google Calendar link to embed on your page.

embeddediframegooglecalendar

Twitter Feed

Navigate to your Twitter page and copy the url of that page. Insert that link into the Iframe Link field.

embeddediframetwitter

Google Map

Navigate to Google Maps and select a destination. Once a search result is returned select share then select embed a map. Copy the embed link and remove all surrounding the first set of quotes.

This is what will be copied from the embed:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3056.303729185225!2d-83.02192174868755!3d40.001662679314485!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88388e9401f27f55%3A0x4b4983cd164998a5!2sOhio%20Stadium!5e0!3m2!1sen!2sus!4v1595880830499!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

And this is what you should paste:

https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3056.303729185225!2d-83.02192174868755!3d40.001662679314485!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88388e9401f27f55%3A0x4b4983cd164998a5!2sOhio%20Stadium!5e0!3m2!1sen!2sus!4v1595880830499!5m2!1sen!2sus
embeddediframegooglemaps

Office 365 Form

Navigate to your Office Forms account and select the form you are targeting. Select share and copy the link. Add that link to the IFrame link field.

embeddeiframeoffice365form

Saving

Select "Add block" to save your Embedded Iframe item to the section of your page.

Events Grid

This custom block allows you to showcase previously created events. The image below 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.

 

events grid title

Filtering

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

 

events grid filtered

Tagging

You can also filter by Internal Categories or Freeform Metatags and use the numerical drop-down to re-order. You may also add another item to keep adding Categories and Metatags to filter by.

 

events grid tagging

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.

 

events grid viewmode

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

External Feed

Title

The title is required and defaults to External Feed and not display. This title will display above the feed. The example image that follows shows a section of two columns and two External Feed custom blocks configured.

external-feed-fina

Registered Feed

You can upload a new link and title for a feed or use a previously created one.

Add new aggregator feed

  • A title is required but is for registering the feed in the system and will not be displayed on the page.
  • A URL is required and this application only allows RSS, Atom and RDF.
  • The update interval defaults to 1 hour, it also works in conjunction with the Drupal setting for cron.

Add existing aggregator feed

You may search for an existing feed by entering the title created when the feed was saved. Note, this is not the title of the custom block, but the title of the Aggregator feed.

Custom Class

Not applicable for this custom block.

Saving

Click "Add block" to place your External Feed on the section of your page.

Freeform Text

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

 

free form text block

Title

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

 

 

free form text block title

 

Body

You can add any content into the rich content editor.

 

free body

Custom Class, View Mode and Saving

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

 

class view add

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

 

Hero Banner

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

 

hero banner example

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 drop-down. And a link to be added to an external or internal website.

The character count of the "Subhead" and "Blurb" fields will change the appearance of the the text box inside your hero banner:

  • If your "Subhead" or "Blurb" field has more than 80 characters, the text presentation will switch to "small" mode, allowing for a longer paragraph-style blurb and a more subdued headline.
  • If your "Subhead" or "Blurb" field has fewer than 80 characters, the text presentation will switch to " medium" mode. Your "Headline" will display in a larger size and in all caps. The "Subhead" or "Blurb" will display in italics below.
  • If your "Subhead" or "Blurb" field has fewer than 40 characters, the text presentation will switch to "large" mode. This has the same appearance as "medium" mode, only with larger text sizes.

 

text and linking

 

Link List

The Link List custom block presents links to internal and external content. You can choose from a range of classes that present the links in varied fashion. The image that follows shows a Link List in the full-width section of a page with six links as buttons in two columns.

N.B. This custom block must be styled with the following classes to change the presentation of the layout and the links. This is opposed to the other custom blocks that use fields and drop-downs to manipulate the layout.

linklistfinal

Title

The title is required but the display of it is not. You can add a custom title or leave the default of Link List. You can target the title with the custom class of "title-align-center". The default alignment is left.

linklisttitle

 

Url

Add your web address to the field. Please note the requirements for the link to upload.

Link Text

This field displays the name that you want to give the link.

linklistlinks

 

 

 

 

 

 

 

 

 

To remove a link remove the text from the field. There is not a delete button for this input.

Custom Class

Add the text of the custom class exactly as typed to the right of the bullet point for each custom class. You can add multilple classes in the Custom Classes field, they must be separated by a space. Some will not work with others or not have an effect. You have the option to choose from the following list of custom classes:

Center the custom block's title

  • title-align-center

linkslisttextcenter

Center the Link List

  • list-align-center

linklistcenteredlist

Order the Link List by numerical order

  • ordered
linkslistordered

 

Remove bullets or numbers from an unordered or ordered Link List

  • no-bullets
linklistnobullets

 

Decrease the text size of the Link List from the default

 

  • size-small
linkslistsizesmall

 

Increase text size of the Link List to slightly larger than the default

  • size-medium
linklistsizemed

 

Increase text size of the Link List to the largest compared to the default

  • size-large
linklistsizelarge

 

Add a rule between links

  • rules
linklistrules

Display the links as buttons in the default style (scarlet background)

  • buttons
linklistbuttons

 

Displays the links as a scarlet outline button

  • buttons-outline
linklistoutline

 

Display the links as a gray background

  • buttons-gray
linklistgrey

 

Display the links as columns.

If used with buttons, this will make the buttons span the width of the column:

Two Columns

  • two-columns
linklisttwo-col

 

Three Columns

  • three-columns
linklistthree-col

 

Four Columns

  • four-columns
linklistfour-col

 

Five Columns

  • five-columns
linklistfive

 

Six Columns

  • six-columns
linklistsix

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.

 

news title

 

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.

 

news filter

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 drop-down.

 

news internal category and metatags fields

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.

 

news promoting front page

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 statistics 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.

 

points of pride title field

 

COE Widgets

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

 

add coe widget

 

Font Awesome 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

points fa look up field

You can add large, medium, and blurb 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 full-width section of a page.

 

testfinal

 

Title

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

 

testtitle

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.

 

testport

Quote

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

 

testquote

 

Attribution

The name of the person who made the quote.

 

testatt

Link

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

 

testslinks

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.

 

testsbackcolorandgraphic

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.

 

Tiles

The Tiles custom block allows presentation of media and links in a grid. You can upload media to COE widgets which permits flexibility in your content presentation options. This example shows the presentation of photos linking to external content.

tilesnewfinal

Title

A title is required, it will default to Tiles and not display.

COE Widgets

The COE Widgets permit the content of an image with options of headline, subhead, blurb, url, and link text. You may add as many COE Widgets as you would like. This image shows the settings for the first tile in the gallery.

newtilescoewidgetedit

Tile Style

These options are:

Standard - A light gray background

new_tiles_standard1

Gray - a solid grey background

new_tiles_gray

Outline Scarlet

new_tiles_scarlet

Tile Size

There is a range of sizes to choose from. You will need to select a size and see if the image and text are appropriate for that display dimension.

Custom Class

You may add a custom class to further target with CSS.

View Mode and Saving

View mode's selection will depend on the aspect ratio of the image that you uploaded. You need to select a view mode, view it, and then change to another if necessary. The typical image dimensions and text display locations have been supplied and formatted. Once you are satisfied with the edits you made, click add block to add a Tiles custom block 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.

 

vertfinal

Title

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

 

vertical_spacertitle

 

Spacer Type

This field is required. 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. Displaying just the title will allow a section to have a title, if that is the design your require.

 

vertical_spacertype

 

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 required 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.

 

 

Tag: Drupal

Contact Us

Phone: (614) 688-2828

Email: etshelp@osu.edu

Virtual Helpdesk: 
  ets.osu.edu/vhd (opens Zoom)
  M-F 9:00 A.M.-12:00 P.M.
  M-F 1:00 P.M.-4:00 P.M.

Service Desk Locations:
  1012 Smith Lab
  244 Hitchcock Hall

Business Hours:
  M-F 8:00 A.M.-5:00 P.M.

View My Tickets & Requests:
  go.osu.edu/etsportal (external site)

Looking for something specific?
  
Check our Service Catalog Quick Reference Guide