How to Use Rows & Columns for Page Structure

Before designing a page, you need to add structure using rows and columns. These container elements help organize content and create responsive layouts.

1. Understanding Columns & Rows

• Columns: Vertical containers that hold content like images, text, and buttons.
• Rows: Horizontal containers that span the entire page width, organizing multiple columns.

2. Adding Columns

1. Open the Elements Panel from the left sidebar.
2. Drag and drop the Columns element onto the page.
3. By default, two columns are added.
4. Click Add New Column to insert more (up to six per row).

Adding Content to Columns

• Click the + button inside a column to insert elements (text, images, buttons).
• You can also nest columns inside other columns.

3. Customizing Columns

• Resize columns by dragging the blue handlebar or setting a percentage width in Column Settings.
• Reorder columns using the arrow buttons in the settings toolbar.
• Delete a column by right-clicking or selecting the Delete button in the toolbar.
• Duplicate columns to copy content and structure.

4. Styling Columns

• Add Backgrounds – Use colors, images, videos, or maps.
• Apply Borders & Shadows – Enhance design with outlines or drop shadows.
• Link a Column – Set it to navigate to a page, block, popup, or downloadable file.

5. Making Columns Responsive

• On Tablet View, columns still appear side by side but can be resized or stacked.
• On Mobile View, columns stack automatically for better readability.
• Use Reorder Buttons to adjust column positions for different devices.
• If needed, resize or group columns to keep them side by side on mobile.

6. Adding & Using Rows

1. Drag and drop a Row element onto the page.
2. Rows automatically span the entire width of the page.
3. Inside a row, add columns to organize content.

Key Differences Between Rows & Columns

• Rows are full-width and cannot be placed side by side.
• Columns exist within rows and can be resized or repositioned

7. Why Use Rows & Columns?

Creates a Clean Layout – Organizes content effectively.

 Improves Responsiveness – Adapts designs to different screen sizes.

Enhances Design Control – Allows precise adjustments to spacing and alignment.

By mastering rows and columns, you can build visually appealing, structured, and responsive web pages effortlessly.