Grid Editor

The grid editor powers forms, templates, collections, and blocks.

What Is The Grid Editor?

The grid editor is the snazzy drag-and-drop interface you use to build forms, templates, collections, and blocks. It's also what allows your site to be mobile friendly without any extra work on your part. The grid editor is a simple tool with very powerful features. For example, you are not restricted to the pre-determined HTML markup generated by PageRoost. You can customize the markup for each row, column, and field you add into the grid editor.


Rows, Columns, & Fields

Your website layout is composed of rows, columns, and fields. A row can contain up to 12 columns, and a column can contain unlimited fields. Every row, column, and field can be customized by adding CSS attributes, extra HTML attributes, inline styles, and custom surrounding HTML. You can access the customization options by clicking on the gear icon - - that appears when you hover over a row, column, or field.


Field Menu for Templates, Blocks, and Collections

This is the menu that appears when you click on the gear icon for a field for a template, block, or collection. You can also see the gear icon for the containing column and row.

  • Customize Field - Displays the customization dialog.
  • Lock/Unlock - When a field is locked (indicated by a lock icon and a different color for the field) a user cannot edit it's content when working on a page that uses the field.
  • Field Options - Displays a dialog with options for the field. The available options depend on the type of field.
  • Delete - Removes the field from the layout.

Field Menu for Forms

This is the menu that appears when you click on the gear icon for a field on a form. You can also see the gear icon for the containing column and row.

  • Customize Field - Displays the customization dialog.
  • Field Options - Displays a dialog with options for the field.
  • Require/Do Not Require Field - When a field is required (indicated by an asterisk icon and a different color for the field) it must be filled out in order for the form to be submitted.
  • Delete - Removes the field from the layout.


Column Menu

This is the menu that appears when you click on the gear icon for a column.

  • Customize Column - Displays the customization dialog.
  • Split - Splits the column into another set of columns.
  • Delete - Removes the column, and any fields it contains, from the layout.

Row Menu

This is the menu that appears when you click on the gear icon for a row.

  • Customize Row - Displays the customization dialog.
  • Delete - Removes the row, and any columns it contains, from the layout.

Adding Rows

You add rows to a layout by clicking one of the "Add Row" buttons. The button at the top will add a row to the top of the grid, and the button at the bottom adds a row to the bottom of the grid.


Adding Columns

By default, when you add a row, it contains one column. You can add more columns by accessing the column menu and clicking the "Split" option. This will split the selected column into two columns, and between the columns will be a handle which allows you to resize the columns.


Adding Fields

You add fields to a layout by dragging a field from the list on the left into a column. You can access default values and settings for a field in the field menu by clicking the "Field Options" item.

Locking A Field

When a field is locked, users creating or editing pages based on the template will not be able to change the content of the locked field. This is useful when you want certain content, a form, an image, navigation, etc. to display on a page and you either don't want users to be able to change that content, or you want it managed from the template level. When a field is locked, it will have a yellow tint and a lock icon in the lower right of the field.


Field Options

Each field will have different options, but all fields have at least one option for "Label" which is what the field is called when you are editing a page. Other than the label, a field may have multiple options available.


Customization Dialog

The customization dialog allows you to adjust the markup and CSS attributes of rows, columns, and fields. The following screenshot is of the customization dialog for a row, but the same options exist for columns and fields.


Adjusting The Layout

If you need to move a field or a row, just drag it! It's that easy. We specifically made the rows with a nice, large handle at the top so you can grab them and move them around.


The same goes for a field. If you need to move a field, grab it anywhere and drag it to where you want it to go.


Resizing a column is just as easy. Grab the handle - the grey bit between the blue boxes in the screenshot below - and drag it to resize the columns.