Rows
siddarth avatar
Written by siddarth
Updated over a week ago

A Section can hold multiple Rows. Rows contain the Columns.

Rows are by default wrapped to the width of the container. However, you have the option to enable Full Width on a specific Row.

In this article, you will find the details about how to Add, Edit, Delete, Duplicate, and Rearrange a Row.

Adding a Row

Method 1: FROM CONTEXT MENU


Right-click on any module on the right panel to open up the CONTEXT MENU.

Then, click on the 'Add Row' option to add a new Row right after the row that you are working on.


Method 2: FROM TREE VIEW

Click once on a particular module and then, click on the tree view icon.

This will open up the tree view of that particular module.

Navigate to the respective row.

You will see the 'Add Row' button at the bottom of the tree view of that particular module.

Here is how you can do it. Please see the video below.


Method 3: USING THE “+” ICON IN RIGHT PANEL

Hover over the bottom or top of any existing section and you will see a ‘+’ icon that pops up.

The popup will show two options:

  • Add Section

  • Add Row

Select 'Add Row' and a new row will be added to that particular section.

Edit a Row

Method 1: OBSERVER BAR

When you click on any module on the right panel, an OBSERVER bar opens up.


Use the Observer to navigate to the respective Row.

Then, click on the Style icon in the left panel to open up the respective row's settings.

Here is how you can do it. Please see the video below

Method 2: FROM BREADCRUMB BAR


Click on any module on the right panel to open up the breadcrumb bar.


Use the Breadcrumb bar to navigate to the respective Row. Then, click on the Style icon on the left panel to open up the row’s settings.

Here is how you can do it. Please see the video below.

Method 3: FROM TREE VIEW

Click once on a particular module and then, click on the tree view icon.

This will open up the tree view of that particular module.

Navigate to the respective row.

You will see a menu icon on the row panel. Click the menu icon on the row panel and select EDIT from the drop-down menu.

This will open the respective row's settings. Then, click on the 'Style'.

Here is how you can do it. Please see the video below.

Method 4: FROM RIGHT PANEL


Hover on the row and you will find a row layout icon in the left top corner.


Click on it and this will open up the row settings on the left panel. Then, click on the 'style' icon.

Here is how you can do it. Please see the video below.

USEFUL TIP:

Row Wrapping and Padding shortcuts:

Select a row on the right panel.

You will find options in the observer to wrap the row and change the row padding.

You can also change the wrapping from the left panel under the style tab.


Deleting a Row

Method 1: USING THE OBSERVER BAR

When you click on any module on the right panel, an OBSERVER BAR opens up.

Use the Observer to navigate to the respective Row.


Then, click the delete button available in the observer.

Here is how you can do it. Please see the video below.

Method 2: USING TREE VIEW

Click once on a particular module and then, click on the tree view icon.

This will open up the tree view of that particular module.

Navigate to the respective row.

You will see a menu icon on the row panel. Click the menu icon on the row panel and select DELETE from the drop-down menu.

This will delete that particular row.

Here is how you can do it. Please see the video below.

Duplicate a Row

Method 1: USING THE OBSERVER BAR

When you click on any module on the right panel, an OBSERVER BAR opens up.


Navigate to the respective row. In the observer bar at the row level, you can find a Duplicate icon. Click on that and the row gets duplicated.

Here is how you can do it. Please see the video below.

Method 2: USING TREE VIEW

Click once on a particular module and then, click on the tree view icon.


This will open up the tree view of that particular module.

Navigate to the respective row.

You will see a menu icon on the row panel. Click the menu icon on the row panel and select DUPLICATE from the drop-down menu.

This will duplicate that particular row.

Here is how you can do it. Please see the video below.


Rearrange a Row

To rearrange a Row, navigate to the Tree View in the Left Panel.

Open the Section that contains the Row.

Drag the Row panel and Drop at the desired location.

You can also drop a Row from one Section to a different one.

The right panel will automatically scroll to the new location of the section.

Here is how you can do it. Please see the video below.

Did this answer your question?