The Row element consists of a single row with three columns and is an excellent way of structuring and organizing content in your form.  

 

Adding the Row

1. Find the Row element in the toolbar on the left-hand side. 

 

 

2. Drag-and-drop the Row into your form.

 

Tips: A dashed blue line appears when you've started dragging an element. It shows you where the element will be added once you drop it into the form. 

Use “Ctrl+Z” shortcut to undo the last action or use arrows in the toolbar at the top of the page. You can duplicate any container along with its content, lock it in the form, edit or delete it.

 

Customizing the Row

3. Select the Row element in your form or one of its Columns, click it to open the formatting toolbar and click the Pencil icon to open the Inspector tab.

 

Tip: You can also duplicate, lock or delete the Row or a Column right from the formatting toolbar.

 

4. In the Inspector tab, you have a number of options to customize the Row.

  • In the Attributes section, choose the devices that will show the Row, align it in the form, change its height and width, and change the class and ID.

  • Under Text Style, change the text's font, size, format, align it within the Row element and access Google fonts by clicking the G icon.

  • Add padding, margins and shadows to the Row under the relevant section.

  • Under Background, support your Row with a relevant image or a color pattern.

  • Border and border roundness allow you to create a border around the Row and round up its corners.

 

Tip: Learn more about the Inspector tab here.

 

Formatting the Row

5. To change the layout of the Row, you need to select the Row on your landing page and click "Edit Columns".

 

 

6. Here you can delete or manually add more columns, change their layout manually or by selecting a layout template, as well as equalize their width.

Click "Save & Close" to continue.

 

Tip: 12-column grids let you divide rows/screens into 12, 6, 4, 3 and 2 equal parts.