Skip to main content
Layout with columns
Yuan avatar
Written by Yuan
Updated over a week ago

In this article:

What is layout?

When you design a Page, you must add at least one Layout to the Page, and then add Elements to the Column of the Layout. For example, if you want the left side of the Page to display a text and button, and the right side to display a picture, then you need to add a Layout with 2 columns, add a text and button to the left Column, and add a picture to the right Column.

This article will explain Layout in detail.

Supported layout types

Layout is composed of columns, some Layouts contain one column, some Layouts contain 2 columns, and so on. uShopAid provides multiple Layouts to meet all your requirements.

With Layout with 1 column, you can design a page like this.

With Layout with 2 columns, you can design a page like this.

How to add layout in page

  1. Click on the Add elements on the left and drag the Layout into the workspace.

  2. If you drag the Layout into the workspace, drop-zones will automatically appear showing where you can place the Layout within the Form.

  3. Simply drop the Layout where you would like to place it.

How to delete layout

In the Elements list on the right, click on the 3 dots on the right of the Layout, and then click on Delete.

How to locate layout

The Elements list on the right shows all Layouts and Elements in the Page. Click on Layout, and you can accurately locate it in the Workspace.

How to adjust column size

Click on the Layout in the Elements list, you can see the size of each Column in the Layout in the Workspace, and you can adjust the size of the Column by dragging the icons showing in the following picture.

How to set column background

Select Column, set Background fill, you can set any color and picture.

How to add elements

Add at least one Layout in the Page, then you can add Elements in the Column of the Layout.

  1. Click on the Add elements on the left and drag the element into the workspace.

  2. If you drag the Element into the workspace, drop-zones will automatically appear showing where you can place the Element within the Form.

  3. Simply drop the Element where you would like to place it.

Did this answer your question?