Row Properties
This article applies to the Email and Pages builder in all plans.
Overview
Every design created in Beefree includes at least one row. Rows are the primary structural element for any email or page you create in Beefree. Any content block that you drag and drop onto the builder stage is placed into a row.
Rows allow your design to be mobile-responsive. They adjust their width automatically to fit the screen of the device that the design is viewed on. In other words, there are no hard-coded values applying to row size. You can see this behavior with both the builder stage and export output.
Row Properties
By selecting an entire row, you can apply design elements to several content blocks at the same time. Here's how you can select and work with rows:
1. Hover your mouse over an empty area on the stage, either to the left or right of the content area width.
2. Click outside of the content area to select the entire row.
Once selected, the builder sidebar will reflect several row properties. You can use these options to apply design elements to the entire row. These options are broken up into sections to help you better identify them:
Backgrounds
The Backgrounds Row Properties provide you with the following customization options:
- Row background color
- Content area background color
- Row background image
Borders
The Borders Row Properties provide you with the following customization options:
- Content area border
- Content area rounded corners
Layout
The Layout Row Properties provide you with the following customization options:
Dynamic Content
The Dynamic Content Row Properties provide you with the following customization options:
Cards Style
The Cards Style Row Properties provide you with the following customization options:
Columns Structure
The Column Structure Row Properties provide you with the following customization options:
- Column background
- Column padding
- Column border
*Only available in paid accounts. This section only populates if you enable display conditions in your account settings.
Each column within a row has its own Columns Structure option. You can learn more about using columns in Column management.
If you have any questions, feel free to contact us.
Comments
5 comments
Can I have a row with 5 columns?
Hi Nick, not yet, but this is a limit we would like to overcome soon. In the meantime, we recommend using custom HTML for special layout needs, we know that it's not ideal, but may be of help in some cases.
Hi there, I have a one column eDM, but am trying to change the background colour of one row to yellow so I can have the text in charcoal, but its changing the background colour of the whole edm...
Is there a way to set the height of a row? And set it depending on the screen size?
Hi Christoph,
Thanks for sharing your question with the Beefree community!
The height of your row depends on the content you have in it. To increase the height, you can use the Spacer content block in the Beefree builder. For more details, please see our help center article: Using dividers and spacers.
What you create with Beefree will automatically be a responsive design that adapts to the screen size of the device that is used for viewing the design, but you can create separate versions of your design for a mobile or desktop by using the mobile design mode as well as the hide on desktop/mobile feature.
I hope this helps!
Please sign in to leave a comment.