Creating Content With Grids and Macros

Macros & The Umbraco Grid Layout

Umbraco gives editors a grid layout editor which allows them to insert different types of content in a predefined layout.

These grid layouts can be found in the following Node/Page types.

  1. Homepage
  2. Webpage (Grid)
  3. Model Page (Grid)
  4. Aimbase Form Page
  5. Umbraco Form Page
  6. Content-Marketing Content (Child)

 

How to Create a Webpage With a Grid Layout

The first step in creating a Webpage Grid is to "Right-Click" on a node to place your page under it then select one of the above Nodes that contain a Grid Layout.

Once created, you will be presented with various "Row" layouts to choose from. These rows are divided up into columns and each of the columns is a percentage of the sites entire width based on the numbers 1-12 (these number are based on the Responsive Bootstrap 3 HTML/CSS framework).

Selecting a 6x6 Row layout would give you 2 columns of equal width. Selecting a 8x4 Row layout would give you a left column of 66% wide and a right column of 33% wide. However, when each column is viewed on a mobile device, no matter what column width combinations were initially selected, each column becomes 100% of the mobile device’s width.

Select your first Row Layout to begin.


Once your row layout is selected, you will see the row as a "Blank" dotted area in the page. Click the "Add Content" link in the box to be prompted with the list of Macros included for this row layout.

Then, select the Macro you want to place on your page.


After selection, a right "Dialog" may appear with a drop down. Sometimes, a Macro can have more than 1 configuration, but in most cases, only 1 type of configuration will be available in the drop down.


Once past the drop-down selection, a dialog may appear to the right. Some Macros have very large controls and render directly in the grid for better editing. In this case, properties for this Macro appear on the right.


You can now edit your properties for the Macro as needed and click "Select" when finished editing the Macro.


After "Select" has been clicked, the content will render on the page as a preview.

NOTE: The look and feel of the content in the Backoffice may differ from what is displayed to the user after saving. To view the content as seen by the user, hit the "Preview" button.


You can now "Save" or "Save and Publish" your grid and view the page.


You can add more content to the same Row Layout by clicking "Add Content" beneath the Macro Content you just created...


... or, you can use a completely different Row Layout by click the "+" button below the row, then clicking on a new Row Layout.


Webpage Grid Features 

Working with Different Row Layouts

When using the Webpage Grid page layout, you don't always have to stick with the "Full-Width Row" layout. You can combine as many different Row Layouts vertically on the page as you need.

 

Responsive Design

The Webpage Grid layout is based on the Twitter Bootstrap 3 grid system. When creating your rows, your content will automatically be responsive for mobile phones and tablets. Some Macros have specific properties for mobile if needed.

 

Row & Macro Arrangement

 Once your Webpage Grid page has been built, you can always go back and re-arrange the rows or replace Macros in different rows when needed.

 

To rearrange existing rows...

If you have more than 1 row in your Grid, you can click on the "Reorder" button at the top-right of the page.

Your rows will change into "Mini" versions of each row layout. From here, you can "Click & Drag" the Macros around the screen to reorder and rearrange them.


You can also click on the row name until the bar turns blue, then use the mouse to "Click & Drag" the row.


Forms

If you want to make a form or add a form onto on a page, you will have to use the Aimbase Form Document Type.


You have options on how you want it to look in your row configuration.

To add fields, you will click “Add Content” and add an Aimbase Field Picker.

From there, you can pick which kind of field you want. 

After you pick your Aimbase Field, you fill in the data you need to in that macro. 

PRO TIP:  When using custom fields it is important that the field name match up with a custom field in Aimbase. If you need assistance setting this up in Aimbase, contact your DAE or the COE for help.