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!
Below is an image of the Homepage with the menu to edit the page and the Layout Builder button.
From the Homepage screen, you can edit the text of your Homepage by selecting "Edit." (this is not layout builder)
To change or create the layout and add content to the 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 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 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:
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.
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.
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.
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 aggregation of varying previously created content. The default configuration is for Related News. See the following image for a display of four News Articles.
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."
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.
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.
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.
Once you have the layout and content that you need, click "Add blocl" to add the Content Grid to the section of your page.
This custom block allows the presentation of five slides of previously created content. The image below is an example of the content slideshow.
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.
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.
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.
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.
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.
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.
Please follow the instructions on the Google Calendar Help page to publish and copy the Google Calendar link to embed on your page.
Navigate to your Twitter page and copy the url of that page. Insert that link into the Iframe Link field.
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:
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.
Select "Add block" to save your Embedded Iframe item to the section of your page.
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.
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 drop-down to re-order. You may 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.
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.
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.
Not applicable for this custom block.
Click "Add block" to place your External Feed on 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 may also add a custom class and select from the view modes of Standard Text Block and Sidebar.
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 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.
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 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.
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.
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.
Add your web address to the field. Please note the requirements for the link to upload.
This field displays the name that you want to give the link.
To remove a link remove the text from the field. There is not a delete button for this input.
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
Center the Link List
Order the Link List by numerical order
Remove bullets or numbers from an unordered or ordered Link List
Decrease the text size of the Link List from the default
Increase text size of the Link List to slightly larger than the default
Increase text size of the Link List to the largest compared to the default
Add a rule between links
Display the links as buttons in the default style (scarlet background)
Displays the links as a scarlet outline button
Display the links as a gray background
Display the links as columns.
If used with buttons, this will make the buttons span the width of the column:
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 drop-down.
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 statistics 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 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
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).
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 full-width 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.
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.
A title is required, it will default to Tiles and not display.
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.
These options are:
Standard - A light gray background
Gray - a solid grey background
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.
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.
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 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.
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 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.