Layout Designer


What is Layout Designer?

Elucidat’s Layout Designer allows you to create your own Page Types and interactions using a simple WYSIWYG interface.

Layout Designer allows you to have greater flexibility and control over your pages and you can immediately create responsive designs and scrollable content.

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.

To set an existing author to a Layout designer

Once you have the Layout Designer feature enabled, any user who has the User role of Layout designer will be able to access the feature, your account Administrator will be able to configure this, click here to learn how to do this.

Please note that Layout designers also count towards your Author limit.

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 with Layout Designer:

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

Layout Designer will now open:

Clicking the orange 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:

You may wish to add a different part to your page, for more information about the various different Parts click here.

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 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 button at the top right of the container.

Click here to learn about all of the different parts that you can add.

Variations

Some Parts have the Variations option, you can tell that a Part has the Variations option by hovering over the part, and if this item shows: …then you can use Variations.

Variation controls can control a whole manner of options, a couple common options include:

…this option allows you to align your content to the Start (left), Centre (middle) or End (right) of your content.

…this options allows you to add Padding automatically to all items within your part.

There are many more variations available, please get in touch with us if you would like to ask us about a specific Variation.

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 usually 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, click here 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 orange 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.