Rows, Columns, Fields and Wrappers

Rows, Columns, Fields and Wrappers - the Basics

Layouts consist of 4 basic elements:

1. Rows,
2. Columns,
3. Fields, and
4. Wrappers

Fields are the individual elements from your content e.g. Article Title, Article Image, Category. Article Text, custom fields etc.  Basically all the elements of your article have been broken apart so you can place them where ever you want.

Rows and Columns provide the structure within which you place these fields. Rows contain Columns and Columns can contain fields and sub-rows if required.

This way you can create a sophisticated layout structure such as this (where the rows are in dark blue and the columns in lighter blue)

Example layout showing rows and columns

 You would then place your fields or article elements into the cells to create your overall layout e.g.

Example layout with rows, columns and fields

 Wrappers are little blocks of HTML that you can place around any rows, columns, fields or the overall layout.  The option to add Wrapper HTML only appears when you enable 'advanced options' in the layout configuration on the right side of the screen.

Example of HTML wrapper around field

In the above example our article headline title would be wrapped in the html we provided, for if your title was 'This Is My Article' then the HTML in the frontend of the site would be

    This is our title: <h2 itemprop='headline'>This Is My Article</h2>