# Adding and Editing Rows and Columns

Rows are the foundational building blocks of your email layout.

**Add a New Row:**

* **From Content Tab:** Drag the "Columns" element from the **Content** tab onto the canvas.
* **Using "Add Row" button:** If the canvas is empty, you might see an "Add Row" button directly on the canvas. Clicking this will add a default single-column row.
* **From Blocks Tab:** Drag a pre-designed block from the **Blocks** tab. These blocks already contain rows and columns.

Once a row is added, it will be selected, and its properties will appear in the right-hand sidebar, typically under a "Row" heading.

<figure><img src="/files/NWnFhkIIDJdSHtznO3sH" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/jfbm8uZi4xOdml2UmMQJ" alt=""><figcaption></figcaption></figure>

**Changing Column Layouts:**\
After adding a row (which defaults to a single column), you can easily change its column structure.

1. Ensure the row is selected. You'll see controls around it on the canvas (like a blue outline and a "plus" icon for adding content within it, and potentially delete/duplicate icons for the row itself).
2. In the right-hand sidebar, under the "Row" properties, locate the "Columns" section.
3. You'll see various predefined column layouts (e.g., 100%, 50% | 50%, 33% | 33% | 33%, 25% | 25% | 25% | 25%, 67% | 33%, etc.).
4. Click on your desired layout. The row on the canvas will instantly update to reflect the new column structure. For example, clicking "50% | 50%" splits the row into two equal columns.

> **Tip:** You can switch between different column layouts at any time. Content already placed within columns will attempt to reflow or might be consolidated if the number of columns decreases.

<figure><img src="/files/BjnaIE29xeTWcXYgPYSN" alt=""><figcaption></figcaption></figure>

### Customising Individual Columns

Each column within a row can be styled independently.

**Select a Column:**

* Click directly inside the column you wish to edit on the canvas.
* Alternatively, in the right-hand sidebar, under "Row" properties, you might see tabs like "Column 1," "Column 2," etc. Clicking these tabs will select the respective column and display its properties.

1. **Adjust Column Properties:**
   * **Background Colour:**
     1. In the "Column Properties" section of the sidebar, find "Background Colour."
     2. Click the color swatch to open the coloyr picker.
     3. Select your desired colour. The chosen column on the canvas will update.
   * **Padding:** Adds space inside the column, between its border and its content.
     1. Locate the "Padding" section.
     2. **All Sides:** Enter a pixel value (e.g., `20px`) in the "All Sides" input field to apply equal padding to the top, right, bottom, and left.
     3. **More Options:** Toggle the "More Options" switch (or click a similar link) to reveal individual input fields for "Top," "Right," "Bottom," and "Left" padding. This allows for precise control over spacing on each side.
   * **Border:** Adds a border around the column.
     1. Find the "Border" section.
     2. **Style:** Click the dropdown (default might be "Solid") and choose a style (e.g., "Solid," "Dotted," "Dashed").
     3. **Width:** Enter a pixel value for the border thickness in the input field next to the style dropdown.
     4. **Colour:** Click the colour swatch to select the border colour.
     5. **More Options:** Similar to padding, toggle "More Options" to apply different border styles, widths, or colours to individual sides of the column if needed.&#x20;
   * **Rounded Border:** Adjust the radius for rounded corners. This also has "All Sides" and "More Options."

<div align="left"><figure><img src="/files/ZwVHKnB71kq2sXsU8ABe" alt="" width="355"><figcaption></figcaption></figure></div>

### Customising Row Properties

You can also style the entire row that contains the columns.

1. **Select the Row:** Click on the row's outer frame or ensure no specific column within it is selected. The sidebar should update to show "Row" properties.
2. **Adjust Row Properties:**
   * **Background Color:** Sets the background color for the entire row area, behind the columns.
     * Locate "Background Color" under "Row Properties" and use the color picker.
   * **Content Background Color:** Sets the background color specifically for the content area *within* the columns of that row. This can be different from the row's main background color, creating layered effects.
     * Find "Content Background Color" and select a color.
   * **Content Alignment:** Aligns the content block (containing all columns) within the row. Options are typically Left, Center, Right.
     * Find "Content Alignment" and select an option (e.g., "Center").
   * **Background Image (for the Row):**
     1. Scroll down to the "Background Image" section within "Row Properties."
     2. Click **Upload Image** or the **More Images** dropdown.
        * **Upload Image:** Allows you to upload an image from your computer.
        * **More Images:** Gives options like "Stock Photos" or accessing your "Uploads." The video shows selecting "Stock Photos."
     3. Once the image manager appears (e.g., "Images" tab showing stock photos), select an image.
     4. After selecting an image, it will be applied as the row's background, and further "Image Options" will appear in the sidebar:
        * **Container Width:** Choose if the image spans the "Content" area or "Full Width" of the row. (Video selects "Full Width").
        * **Image Size:** Options like "Contain," "Cover," or "Custom." (Video uses "Custom" and sets width/height, but "Cover" is also a common choice).
        * **Repeat:** Control if/how the image repeats (e.g., "No Repeat," "Repeat," "Repeat X," "Repeat Y"). (Video uses "No Repeat" - `x` icon).
        * **Position:** Align the image within the row (e.g., center, top-left, etc.). (Video uses "Center").
        * **Padding:** Adjust padding for the row itself, affecting the space around the background image and columns.

<div align="left"><figure><img src="/files/jRw3ScAFM4MGcvxxCQmL" alt="" width="351"><figcaption></figcaption></figure></div>

### Responsive Design for Rows

Control how rows appear on different devices.

1. **Select the Row.**
2. Scroll to the bottom of the "Row Properties" in the sidebar to find the "Responsive Design" section.
3. Here you can find options like:
   * **Hide on Desktop:** Toggle to hide the row when viewed on desktop devices.
   * **Hide on Mobile:** Toggle to hide the row when viewed on mobile devices.

### ![](/files/FY9GMGTLTPOTp8CPZEOG)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://userflux.gitbook.io/userflux-docs/feature-guides/user-journeys/email-builder/adding-and-editing-rows-and-columns.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.