By continuing to use this site, you agree to the storing of first- and third-party cookies on your device to enhance site navigation; analyze site, product, and service usage; and assist in our marketing and promotional efforts. Cookie Policy

Skip to Content

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

Use global tiles the way you use includesto deliver the same content on multiple pages. To make a change, edit the global tile, rather than editing every page. 

  1. Go to Content > Melody > 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, 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 code to create the tile.
    • Style the HTML directly in the Tile using any Tailwind CSS.
  7. Use the device size preview to see the responsive breakpoints that you set in Melody > Styles.
  8. Save and Launch.

To set a thumbnail image, change editablity, and more go to Properties.

Allowed content for editable tiles

Determine what type of tile content can be edited on a page. Content types include formatting, links, images, video, assets1, snippets, and components. All content types are allowed by default.

Allowed content replaces the custom styles dropdown in the WYSIWYG toolbar and custom toolbars for layout pages.

  1. Go to Content > Melody > 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.
  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.

1Form and image gallery assets are not compatible with pages created from layouts and will not appear in the What You See is What You Get (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 > Melody > 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 class data-container="true".
    • Style additional HTML directly in the frame using any Tailwind CSS.
  6. In the device size preview, see the responsive breakpoints that you set in Melody > Styles.
  7. Save and Launch.

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