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.
Changing Column Layouts: After adding a row (which defaults to a single column), you can easily change its column structure.
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).
In the right-hand sidebar, under the "Row" properties, locate the "Columns" section.
You'll see various predefined column layouts (e.g., 100%, 50% | 50%, 33% | 33% | 33%, 25% | 25% | 25% | 25%, 67% | 33%, etc.).
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.
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.
Adjust Column Properties:
Background Colour:
In the "Column Properties" section of the sidebar, find "Background Colour."
Click the color swatch to open the coloyr picker.
Select your desired colour. The chosen column on the canvas will update.
Padding: Adds space inside the column, between its border and its content.
Locate the "Padding" section.
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.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.
Find the "Border" section.
Style: Click the dropdown (default might be "Solid") and choose a style (e.g., "Solid," "Dotted," "Dashed").
Width: Enter a pixel value for the border thickness in the input field next to the style dropdown.
Colour: Click the colour swatch to select the border colour.
More Options: Similar to padding, toggle "More Options" to apply different border styles, widths, or colours to individual sides of the column if needed.
Rounded Border: Adjust the radius for rounded corners. This also has "All Sides" and "More Options."
Customising Row Properties
You can also style the entire row that contains the columns.
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.
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):
Scroll down to the "Background Image" section within "Row Properties."
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."
Once the image manager appears (e.g., "Images" tab showing stock photos), select an image.
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" -
xicon).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.
Responsive Design for Rows
Control how rows appear on different devices.
Select the Row.
Scroll to the bottom of the "Row Properties" in the sidebar to find the "Responsive Design" section.
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.
Last updated