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.