The Row element consists of a single row with three columns and is an excellent way of structuring and organizing content on your landing page.
Adding the Row
1. Find the Row element in the toolbar on the left-hand side.
2. Drag-and-drop the Row onto your landing page.
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 on the page.
Use “Ctrl+Z” shortcut to undo the last action or use arrows in the toolbar at the top of the page.
Customizing the Row
3. Select the Row element on your page 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 on the page, 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.
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.