Adding Sections, Rows, and Elements

Sections, Rows, and Elements Brief Explanation

There are 3 primary components within the 22apps Visual App Builder.

  1. Sections
  2. Rows
  3. Elements

Elements go inside of rows, and rows go inside of sections.

Think of it like a house. A section is like a house, the entire building. Rows are the rooms in a house, such as the kitchen, bedroom, living room, and more. Elements are the things that go in each room. For example, the kitchen’s elements would include a fridge, a stove, a sink, a dishwasher, and more.

If you had just a building with empty rooms, it wouldn’t have very much. On the flipside, you can’t have a fridge or a dishwasher in the middle of nowhere. That’s why the structure of the house is so important, and it’s exactly the same with Sections, Rows, and Elements in the app builder.

Adding Sections and Rows

  • A section is used as a whole area of the screen where you can input content.
  • Rows are placed inside of sections. They are used as places to input elements. You can put any amount of rows inside of a section.

Adding a section

  • To add a section, navigate to the “Add Section / Row” tab by clicking the “+” icon on the left menu. From this menu, drag the “Section” icon from the left into the app screen.
  • Your section will now appear in the app screen preview.

Adding a row

  • To add a row to a section, navigate to the “Add Section / Row” tab by clicking the “+” icon on the left menu. From this menu, drag the “Row” icon from the left into the section on the app screen that you’d like the place the row in.
  • Note – to add a row, you must already have a section added to your screen.
  • Your row will now appear in the app screen preview.

Adding an element

  • To add an element to a row, navigate to the “Add Element” tab by clicking the “+” icon on the left menu. From this menu, drag your preferred element from the left into the row on the app screen that you’d like the place the element in.
  • Note – to add an element, you must already have a row added to your screen.
  • Your element will now appear in the app screen preview.

If you have any questions about this article, feel free to reach out to our support team! We're happy to help.