Row Properties
Last updated
Last updated
Rows are foundational to your design, whether it's an email or a landing page. They serve as the container for content blocks and are crucial for mobile responsiveness. Unlike fixed-width layouts, rows in this builder automatically adjust to the screen size of the device on which they are displayed. The builder provides various settings for rows, which allow you to apply design elements to multiple content blocks at once.
To make changes to a row, you first need to select it:
Hover: Move your mouse cursor over an empty space on the stage, usually to the left or right of the content area.
Click: Click outside the content area to select the entire row.
Once you've selected a row, the builder's sidebar will display various row-specific properties you can modify.
Here are some of the properties you can adjust for a selected row:
Row Background Color: Set the background color for the entire row.
Content Area Background Color: Specify the background color for just the content area within the row.
Vertical Alignment: Choose the vertical alignment for the content within the row. Options usually include top, middle, and bottom.
Content Area Rounded Corners: Add rounded corners to the content area.
Content Area Border: Set a border around the content area with customizable color, width, and style.
Mobile Optimization Options: A set of options for mobile responsiveness:
Do Not Stack on Mobile: Prevents the content within the row from stacking vertically on mobile devices.
Reverse Stack on Mobile: Reverses the order of content when stacked vertically on mobile devices.
Hide on Mobile/Desktop: Makes the row invisible on mobile or desktop devices.
By understanding and utilizing these row properties, you can create more effective and visually appealing designs that work across different devices.
Creating dark-mode-friendly designs can be complex, but here are some key pointers to help you:
Avoid using pure white (#FFFFFF) and pure black (#000000); opt for off-whites and gray-blacks instead. This can mitigate the impact on email clients that perform full color inversion.
Transparent PNGs are preferable for flexible design adaptability.
Outline text in contrasting colors for better legibility, particularly if it's part of an image.
By making the most of the Dark Mode Preview feature and adhering to these design guidelines, you'll be better equipped to produce emails that offer a consistent and appealing experience, regardless of your audience's device settings.
