Your first layout - step by step

We will describe how to create and use your first layout without going into too much explanation at this stage, you can find more detail in the following articles.

1 : List of layouts

From the empty list of layouts click the 'New' button.

Empty list of layouts

2 : First Layout Creation Screen

You then see the first layout creation screen where you can:

  • select the layout type - in this case we have chosen the 'single article' layout which will affect pages displaying a single article in the frontend of your site,
  • add a descriptive comment (used in backend list view only) - adding a simple comment to help us distinguish between similar layouts in the backend list,
  • decide to base your new layout on a replica of the Joomla layout (recommended for beginners), this layout can then be easily modified later - in this case this is what we have decided to do,
  • decide if your new layouts should be published and its access level (i.e. which users would be affected by this layout in the frontend).

We then press 'Create' or 'Save' to move on to the second stage of creating a layout


Step 1 of creating a new layout

3 : Second Layout Creation Screen

We now have our first layout populated with fields to match the core output of Joomla.  For the time being you can ignore the message in green about 'A change of framework' - this relates to the output framework you may want to use in your layout (e.g. Bootstrap2, Bootstrap3, UIkit2 etc.) and will be explained in more detail later.

Your layout consists of a series of rows (dark blue), columns (pale blue) and fields (white).  We will discuss how to modify these or add to/delete them in the next few articles.

Finally press 'Save & Close' to return to the list of Layouts.

saging our new layout

4 : List of Layouts showing our new Layout

You now see your new Single Article layout (with its comment) in the list of layouts - published and ready to be used

list of layouts including our new one

If your site uses the Protostar template and you view and article in the frontend of the site you should now see very little difference in the way the article appears.  So how do we know EasyLayouts it working?

5 : Showing that EasyLayouts is working

If we re-edit our layout we can move the "Article Title" field simply by dragging it and dropping it after the the tags field

moving some fields around in our layout

  Now if we save add some extra text in the layout to show that EasyLayouts is generating the layout of your article.

6 : Article Title has been moved

Compare the before and after screenshots that show how the layout was changed by moving the title

Before Moving Title

before moving the title field in our layout

After Moving Title

before moving the title field in our layout


Published: 22 August 2017