(function openLouie() { let louie = document.getElementById("Dropdown-Toggle-14"); louie.classList = "host-toggle w-dropdown-toggle w--open"; console.log(louie); })();
Row & Column

Row is a horizontal block that can be divided into 24 different columns. By default, it has an adaptive width according to the browser window width. It can have an invariable full width (1200px) as well as a max (0-1600px) width. Space can be added to the row and the columns in it with padding in different sizes. It is a container element for all elements.

The row element is combined with the columns in it. They cannot be used separately. Each row can have at least 1 and at most 24 columns.

Adding Rows

You can add the row element from the Elements panel by dragging and dropping it to the screen.

Row element also;

  • To a column of a different Row,
  • Panel,
  • Data Repeater (Carousel, FlexGrid, GalleryView, Horizontal and Table)
  • Content menu,
  • Header,
  • Footer,
  • Tab,
  • Collapse,
  • Badge,

Elements can be inserted into it.


You can adjust the behavior of the columns in the row on desktops, phones and tablets, and perform operations such as authorization and adding actions.

Adjusting the columns

You can divide a row element into 24 different columns. Basically, rows with lower column counts such as 1, 2, 3, 4 are used in the interface design.

Sample column setup for web

Sample column setup for tablet

Sample column setup for phone

Select the row element whose columns you want to manage. You can choose one of the predefined column structures under the desktop properties panel. With Customize, you can prepare custom column widths and number.

You can adjust the sorting order of the columns on tablets and phones. The row, which is displayed as 2 columns on the tablet, can be ordered as a single column on the phone.


You can adjust the alignment of the columns in the row.


You can use the roles defined for the Row or Column element.


You can manage the visibility of the element. It is always visible, hidden, or you can make it appear and hide depending on a condition.


You can add functions to add rows or columns with Add Actions.


Different style arrangements can be made by selecting the row and the columns in it separately.


You can make visual adjustments such as environmental interior spaces and sizing. In the alignment commands given for rows or columns that are parent elements, the child elements under them are affected.


You can fill the bodies of rows and columns with color or add a background image.


You can add lines to the outer edges of rows and columns and give curves to the corner.


You can add a shadow effect to the row and the columns in it. The shadow effect is only displayed in web apps.

No items found.

Simplicity Meets High Performance

Free edition subscription
Keep your work
No credit card required to try