Layout Designer allows you to create Page Types by combining Parts.

A Part is an element that your page is built up from, for instance I can have a page with a whole variety of different Parts, such as Text elements’, ‘Knowledge checks’, ‘Interactions’ and more.

You can add as many, or as few Parts as you like to a page and in whatever order you like.

This video will give you an example of how Layout Designer works:

Who can use Layout Designer?

Layout Designer is available to any user that has the role of ‘Administrator’ or ‘Layout designer’ if you have an ‘Enterprise’ account, if Layout Designer is not activated in your account please get in touch.

💡 Please note: Layout Designer is a powerful role that allows users to make changes that are present throughout your account. If you are an account Administrator we recommend you provide this role only to trusted users. 

How do I get started with ‘Layout Designer’

Firstly, let’s take a look at how to add a Part (click here to see what Parts are) to a page using Layout Designer.

Open a Project with a Page Type which you wish to modify:

Press the Layout Designer button in the top right of your page:

Layout Designer will now open:

Clicking the orange plus (+) buttons will allow you to add Parts to your page, you can choose a Part by selecting any of these categories:

In this case I’m going to open the ‘Media and Imagery folder’ and then choose the ‘Image’ Part:

Once you have added your Part you will see it in your Layout in Layout Designer:

If you decide that you wish to move your Part whilst in Layout Designer, you can do so by hovering over your part and clicking and holding the move button at the top left of the container:

 ....and dragging your Part to the ‘Add here’ button that you wish to move the Part to.

If you decide that you wish to remove your Part you can do so by hovering over your part and clicking the trash icon at the top right of the container:

You can Duplicate a Part by clicking the ‘Duplicate’ button at the top right of your Part:

💡 Pro Tip! If you have added Parts to within a ‘Container’ you can copy the entire container and the Parts which you have added to it by clicking the duplicate button the entire container.

For example, clicking this button:

…will duplicate everything within the blue box:

…clicking duplicate on one of the Parts within the Container (in this case this Image Part):

…will mean only that specific Part will be duplicated:

Parts Variations

Some Parts have the Variations option which allow you to set additional parameter, you can tell that a Part has the Variations option by hovering over the part, and if this item shows: 

...please search for 'Parts Variations' for more information.

Page and Project scope

So far we have mainly been looking at Page scope, Page scope is the content that is unique for each individual page.

To put it more simply, content in the orange area here is part of the Page scope:

Project scope is global content that is available through out your whole course, for instance your footer, header and main menu.

To put it more simply, content in this areas in orange are usually part of the Project scope:

Switching to Project scope

You can switch from Page to Project scope in Layout Designer by pressing either the Footer or the Header (highlighted above).

Project scope has some unique Parts which will allow you to edit the presentation of your Headers, Footers and Menus, (see 'Project Parts') to learn more.

Saving content

Once you are happy with all of the edits you have made you will want to save your changes, if you don’t wish to save your content refresh your screen and when prompted press ‘Reload’.

Pressing the save button:

...will save your changes and present a variety of ways that you can save your changes:

…lets’ take a look what each one of these setting does:

How would you like them saved?

Save for this page only

This option will mean that that the Layout will only be changed for the specific page in the Project you are editing.

Save for all pages using the Page Type

This option means that all pages using the same Page Type will be affected inherit changes you have made to the layout of the page.

With this Page Type you can choose if this applies only to your current Project or if this is applied to your main theme by choosing a Save scope.

Make a new page

This option creates an entirely new Page Type. You can rename your Page Type by adding a name to the ‘Give your new Page Type a name’ field, then choosing a folder for your Page Type to be assigned to from the ‘And choose a folder’.

If you would like to create a new folder, type your folder name in this field:

…and press enter.

Make sure you give your Page names and Folders sensible names as currently there is not a way to delete or edit this.

With this Page Type you can choose if this applies only to your current Project or if this is applied to your main theme by choosing a Save scope.

Save scope…

Save just for this Project

This setting will mean that your change is only applied to your current Project, this is useful if you would like to make a one off tweak to your layout.

Save for all Project using this Theme

This setting will mean that your change is applied all Projects in your account, please be careful when using this setting as this cannot currently be undone, if you have any questions about whether you should be using this feature, please get in touch.

Now get building!

Now that you know your way around the Layout Designer feature it’s time to get building!

Why not try one of these tutorials to test your skills.

Did this answer your question?