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!

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

layoutbuilderhomepage.png

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:

Accordions

Please see this page for the Accordions tutorial.

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 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). Or you can choose to not display a title for the Content Grid custom block and set one but not check the Display checkbox.

content-grid-title

Feed Mode

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

Manual

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

Allows you to bring in content organized by 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.png

You can select what content you want to feature. You 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 can 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 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 viewmode 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 block 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. 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.

 

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

 

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. The default configuration of the Qualtrics Anonymous link is https://osu.az1.qualtrics.com/jfe/form/. Your survey number is appended to  that link. In this example it is: https://osu.az1.qualtrics.com/jfe/form/SV_6ur9mqcAB3jJTXD.

example_of_qualtrics_embedded_form_engineering

Office 365 Outlook Calendar

You will need to first 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 this 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…" 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…

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

External Feed

Title

The title is required and defaults to External Feed and to 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.

 

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

 

classviewadd

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.

 

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

 

textandlinking

 

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.

 

newstitle.png

 

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.

 

newsfilter.png

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.

 

newsintandmeta.png

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.

 

newsprofrontpage.png

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.

 

pointstitle.png

 

COE Widgets

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

 

addcoewidgtpop.png

 

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

pointsfa.png

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

 

Title

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

 

testtitle.png

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

Quote

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

 

testquote.png

 

Attribution

The name of the person who made the quote.

 

testatt.png

Link

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

 

testslinks.png

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

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

Title

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

 

vertical_spacertitle.png

 

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

 

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.

 

 

Contact Us

Phone: (614) 688-2828

Email: etshelp@osu.edu

Virtual Helpdesk: go.osu.edu/etsvirtualhelpdesk

Subscribe to Notifications (Twitter):
https://twitter.com/OhioStateETS

View My Tickets & Requests:
https://go.osu.edu/etsportal

Service Desk Locations:

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

Not seeing what you want on this page?
Try our I Want To... list.