Steps to create a Layout Template

• Click on Style → App Layout Templates 
  
  
  
  
  • Click on New button  
    

A new screen will be displayed where the following information is prompted: 

Image 7 

• Name: Enter Layout name in upper case with no spaces.
   
• Description: Enter a brief Layout description.
   
• CSS File: This part was designed to load a CSS file to set the theme (must be tested). Normally, the Theme must be assigned to the application and not in this section.
   
• Landscape orientation: Select the option “Vertical” from the list to set that when the mobile is horizontal (Portrait), the app will be displayed vertically to it. This is the most common setup. Otherwise, select “Horizontal”.
   
• Portrait orientation: Select the option “Vertical” from the list to set that when the mobile is vertical (Portrait), the app will be displayed vertically to it. This is the most common setup. Otherwise, select “Horizontal”.
   
• Select and set the visual areas that will define the screen structure when the mobile device is either vertical or horizontal. For “Landscape Orientation” mode, the visual areas on the right panel must be selected and dragged to the left side and dropped in the root of the tree. This is shown on the next image: 
  
  

Image 8 

• Perform the same procedure for “Portrait Orientation”
   
• Double-click on each dragged visual area on the left side. This action will display the following pop-up window. 
  
  

• Set the “Size” field considering that if the section (Landscape or Portrait Orientation) was defined as vertical, the “Size” corresponds to the visual area height currently under edition. Conversely, if it was defined as “Horizontal”, the “Size” will correspond to the visual area width currently under edition.