Layout Builder

Layout Builder allows you to change the layout of the content on your page. You can create clickable image boxes, arrange content into multiple columns, and add images or text to the columns.

Learn how to create a page in the i:Create Content Management System (i:Create).

Creating a page with Layout Builder

From the i:Create workbench or back end of the website:

  1. Select the “Page List” from the i:Create Utility Bar located at the top of the page (a list of pages will appear)
  2. Click the “+Add” button to open the “Create New Page” pup-up box
  3. In the “Template” field, select the “Interior Layout” option from the dropdown menu (the template name may vary slightly)

Not all i:Create websites have Layout Builder. Speak with your Project Manager to find out more about this feature.

Accessing Layout Builder

When editing a page, click the “Manage Layout” button. This is usually located near the top left of the page. This will take you to the “Edit Layout” pop-up box. From here, you can add a variety of different layout features to your page.

Add a row

First you'll need to add a row. To do this, place your cursor over the “+ Add Row” text. You can choose to create a row with one or more columns. You can even adjust the width of the columns. Consider how you want the text and images found in this row to appear on the page.

Select row components and add content

Once you've selected the layout of your row, you can choose from three different components. Drag and drop the components into your rows. Then, click “Save” and you will be taken back to the Page Editor where you can add content.

The “Standard One Column” component creates an editable field similar to the standard Page Editor. When adding content to this field you will have access to the Edit Toolbar to add tables, accordions, text, videos, images, etc.

The “One Column Image Box” component allows you to create a column with an image box, heading text, clickable link and an aligned text box below. Click the “Manage Content” button from the Page Editor and the “Edit Content” pop-up box will appear. Make sure to complete each required field.

The “One Column Image Box Call to Action” component creates a column with an image box, heading text and aligned text box below. In the text box you can add a call to action, such as a button with a clickable link. Click the “Manage Content” button from the page Editor and the “Edit Content” pop-up box will appear. Make sure to complete each required field.

Some websites may have additional custom components.

Using Layout Builder toolbars

When you add a row and component a toolbar will appear. These toolbars have a variety of editing options you can use. Starting from the left most icon and moving to the right, these options will be listed below.

6 icons in a row

The Move icon allows you to change the order of the rows or columns on the page. Click the Move icon and drag and drop the row or column to the desired location.

The Make column narrower icon allows you to change the size of a column. Click the icon to make your column narrower in width. You can continue clicking the icon until you reach the desired width.

Make column wider icon; text: The Make column wider icon allows you the change the size of a column. Click the icon to make your column wider. You can continue clicking the icon until you reach the desired width.

The settings icon allows you to set the amount of space separating the rows of content. You can add a small, medium or large space between rows. You can also customize the space between columns using the settings icon.

The Remove now icon allows you to delete a row or column from the page. When you click the Remove now icon, a confirmation pop-up box will appear. Click the “Delete” button to delete the row or column. Click the “Cancel” button to return to the Edit Layout box.

Add row/Add column icon; text: The Add row/add column icon allows you to add a row or column to your page layout.