Create Tiles and Frames

Tiles and frames are two types of reusable content that are used to build page layouts.

First, create frames as the containers for content in your layout. Then, create tiles as the content placeholder in your layout. Finally, drag and drop tiles, frames, and components to create a layout that content editors can use to create pages. 

The prebuilt tiles and frames in your account can be edited by Modern Campus CMS staff only. To modify a prebuilt tile or frame, copy and rename the file.

TilesLink to this section

Tiles allow administrators and users with access to create and control the type of content that can go on the page. You can determine whether the content in a tile can be edited on the page. Use frames to position and size a tile in a layout.

An example of tile is a headline banner with image and text. Or a navigation section with logo and copyright for the bottom of your page. 

1. Go to Content > Layout Builder > Tiles.
2. Click +New.
3. Type to enter a name for your tile.
4. Select whether you want the content of this tile to be editable on a page. If the content is editable (WYSIWYG), you can determine what type of content is allowed.
   • Select the Global radio button to keep the tile static on the page until you re-launch the tile and the layout.
   • This selection cannot be changed after the tile is created.
5. Click Create.
6. In the source editor, enter HTML and server-side code, JavaScript, breadcrumb navigation, and/or form elements to create the tile.
   • Style the HTML directly in the tile using any Tailwind CSS.
     • Click CSS Reference to see a guide for using classes in Layout Builder.
       

       Click Insert File Path to insert links and images using dependency manager.

7. Use the device size preview to see the responsive breakpoints that you set in Layout Builder > Styles.
   • Style the responsiveness directly in the tile using Tailwind responsive design.
8. Save and Launch.

To set a thumbnail image and add tags, go to Properties.

Allowed content for WYSIWYG tiles

Determine what type of tile content can be edited on a page. Content types include formatting, links, images, video, tables, assets¹, snippets, and components. You can also allow Personalization and Pathways (with purchase).

All available content types are allowed by default.

Allowed content replaces the custom styles dropdown in the What You See is What You Get (WYSIWYG) toolbar and custom toolbars for layout pages.

1. Go to Content > Layout Builder > Tiles.
2. Click the filename for your tile.
3. Click Properties.
4. Select the Edit Regions checkbox to allow edits to the tile when it is used on a page.
   • This is similar to editable regions on a page created from a template.
5. Deselect the content type you want to restrict from page edits.
   • Deselect Formatting to provide the content editor with just Cut, Copy, Paste, and Spellcheck.
6. Save and Launch.

¹Form and image gallery assets are not compatible with pages created from layouts and will not appear in the WYSIWYG toolbar when editing these pages.

FramesLink to this section

Create frames to size and position tiles within a layout. You can put tiles, components, or additional frames inside frames.

An example of a frame is a two-column container.

1. Go to Content > Layout Builder > Frames.
2. Click +New.
3. Type to enter a name for your frame.
4. Click Create.
5. In the source editor, enter HTML code to create the frame.
   • Frames require the attribute data-container="true".
     • You can then add extra elements using <div  to see a dropdown menu with available class and attribute suggestions.
   • Click Insert File Path to insert links and images using dependency manager.
   • Style additional HTML directly in the frame using any Tailwind CSS.
     • Click CSS Reference to see a guide for using classes in Layout Builder.
6. In the device size preview, see the responsive breakpoints that you set in Layout Builder > Styles.
   • Style the responsiveness directly in the Tile using Tailwind responsive design.
7. Save and Launch.

To set a thumbnail image and add tags, go to Properties.