Defining the View Layout

After you mark the content area and define an application layout, you have to cut the views and make their layout responsive.

Getting Started

To define and cut the view layout:

  1. Click the arrow icon next to the LAYOUT item.

    Remember to cut the LAYOUT view and make it responsive.

    Arrow to cut layout

    • Save metadata—To save the medatadata on the file system use keyboard shortcut Cmd/Ctrl + S.

Using the Toolbox Fields and Tabs

  1. When the dialog for cutting the view layout appears, a toolbox is displayed to the left.

    The toolbox renders the following fields:

    • RESPONSIVE LAYOUT—Represents the responsive elements and their hierarchy from the RESPONSIVE canvas. To reorder elements, drag and drop them or create new layout containers (container, row or column) by clicking the Container, Row or Column button.
    • DETACHED ELEMENTS—Represents the absolute positioned elements from the canvas which are rendered in the DESIGN tab. To reorder elements, drag and drop them or select elements and wrap them in responsive containers by clicking the Row, Column or Container button.
    • COMPONENT—Includes all available components which can be used in the Studio. You can drag and drop components directly on the RESPONSIVE canvas and configure their properties.


  2. To design and configure the components, use the DESIGN, RESPONSIVE, and CODE tabs that are located to the right of the toolbox.

    • The DESIGN tab visually represents the absolute positioned elements which are related with the DETACHED ELEMENTS list of the toolbox.

      • The DETACHED ELEMENTS list includes all elements from the DESIGN tab canvas.

      Design Tab

    • The RESPONSIVE tab visually represents the responsive elements which are related with RESPONSIVE LAYOUT tree of the toolbox.

      • The RESPONSIVE LAYOUT tree represents all elements from the RESPONSIVE tab canvas.

      Responsive Tab

    • The CODE tab displays the code editor which loads files for each corresponding view from the file system.

      When you generate an application and depending on the selected RESPONSIVE or DESIGN tab, the corresponding HTML content will be built—for RESPONSIVE, the responsive elements built with Bootstrap, and for DESIGN, the absolute positioned elements.

      Code Tab

Cutting the Layout

To make an absolute positioned view responsive, wrap all DETACHED ELEMENTS components as row and column elements and move them to RESPONSIVE LAYOUT either by selecting them and using the Row or Column wrapping buttons, or by dragging and dropping the components directly from DETACHED ELEMENTS to RESPONSIVE LAYOUT.

Using the Property Inspector

When you select a component from the canvas, the INSPECTOR displays all available properties for that component. In this way, you can configure and customize each component depending on its specific requirements.

Property Inspector

In this article
Not finding the help you need?

Unite UX direction is evolving!

Dear friends, after gaining plenty of great experience and feedback through working with you, our direction evolves to better serve your needs. Our mission to bridge the design to development gap remains unchanged. The way to solve it, though is new. Visit our webpage to meet the new Unite UX: The collaborative design to development UI components builder.

Explore the New Unite UX