Overview

The purpose of this lesson is explain how to set the different layouts that Wayfast offers to develop the application in our project.

What is a Layout?

Layout design is the way that we arrange all the visual elements on a given page. Depending on the position of page elements, we can take control on text, images, shapes to better guide the user experience. Layouts have visual significance to enhance a website’s usability. Wayfast offers several options to accommodate your application depending on your needs.

Let’s check the options available!

Layout

Preconditions

On Wayfast, focus on the left side navigator page and verify that the Project has an “Active Task” available.

Click on “General Options” icon at the top header. Then click on “Layout” subtab

Open

“Layout” screen displays the different layouts set by default in our initial “New Project” steps. This grid view offers the possibility to remove or associate new layouts to the Project.

How to set Layouts in Wayfast?

Focus on “Layouts” field under “General Options” screen. Click on “Add Layout” button

Open

A popup is displayed with the layouts available and ready to be selected in Wayfast. You can find the following information:

• “Layout” name

• “Layout” image  that can give a brief preview of the template

• Creation date.

• Checkbox to associate the layout template to the Project  

Select any layout and click on “Submit” button

Default layouts are displayed on Grid view. We can select all the layouts needed for project’s development.

How we can verify that the Layout is available in existing Pages?

Now that we select new Layouts in General Options, let’s go to Pages and verify if they are available for page’s development.

Turn to “Pages” and click on any page available.

Scroll down and focus on “General Information” tab. Expand this section

We can observe the “Layout” tab. Click on it and then verify the “Name” dropdown field. We will find all the layouts related to the Project in the list and ready to be used in any new or existing page for design.

If we need to that the Layouts are saved when creating new pages, click on “Project pages” icon at the top menu. Then click on “New Page” button and you will find the Layouts displayed in the dropdown and available for Application. 

Recap

In this document we learnt about how to setup the Layouts for the entire Project. It’s important to setup this templates before creating new pages to make this layouts preloaded and ready to be added.