Column management
This article applies to the Email and Pages builder in all plans.
Column Management
Here are a few of the actions you can take when using column management:
- Use resizable columns
- Adjust the width of each column
- Add or remove a column from an existing row
- Align images in a row
How it works
Once you start designing, add a row with the number of columns you need. Then, from the side panel, you can adjust the size of the existing columns by dragging the divider. You can also add or delete columns from the existing row.
The email layout has a maximum of 12 columns, while the minimum column width is 1. This means that you can build rows like the following:
- One column, with a width of 12.
- Two columns, each with a width of 6.
- Three columns, each with a width of 4.
- And all other column combinations that equal a total width of 12.
Add a column
Click on + Add new action to add a new column inside the row.
-
the New Column is always added on the far right, with default size 1 for email and pages. At the same time, the nearest column on the left is reduced accordingly.
-
If the nearest column on the left is already at the minimum width, the widget automatically finds the best solution, by resizing other columns in the row.
-
-
The minimum column width is 1 for Email. As a consequence, emails can have a maximum of 12 columns
-
When the max number of columns is reached, the + Add new disappears.
-
Adjust a column
You can adjust a column's width by clicking it and sliding your mouse in either direction to edit it accordingly. The following GIF displays an example of adjusting a column's width:
Remove a column
Click the Delete action in the top-right of Column structure area to remove it.
Here’s how it works:
-
When a column is deleted, the nearest columns on the left will inherit its width.
-
If the deleted column is the first on the left, the right column will inherit the width.
-
-
The Delete action will not be visible if there is just one column.
Please note
-
The order of the columns cannot be changed.
- If you accidentally delete a column use the undo feature to restore it.
-
It is not possible to specify the width in pixels, only in column numbers.
- The builder allows a maximum of 12 columns.
Cards Style
Cards Style is a Row Property that enables you to create space between columns and round the corners of columns within a row.
Add Space Between Columns in a Row
Take the following steps to create space between columns within a row:
- Enter your design within Beefree App
- Click on a row within the builder
- Navigate to the Cards Style section of the Row Properties located on the right-hand side of the screen
- Navigate to the Spacing option
- Click the plus (+) symbol to increase the spacing between columns within the row
You successfully added space between columns in a row.
Note: To reduce the spacing between columns in a row, take steps one to four and then click the minus (-) symbol to reduce the spacing.
Round the Corners of Columns in a Row
Take the following steps to round the corners of columns within a row:
- Enter your design within Beefree App
- Click on a row within the builder
- Navigate to the Cards Style section of the Row Properties located on the right-hand side of the screen
- Navigate to the Cards Rounded Corners option
- If you'd like to round each corner of the columns within the row equally, click the plus (+) symbol below All corners to round all four corners simultaneously
- If you'd like to round each corner separately, toggle on More options
- Click the plus (+) symbol to round each corner individually
You successfully rounded the corners of the columns within the row.
Note: Rounded image corners do not render with Outlook. The fallback for Outlook emails is squared corners.
Vertical alignment
Vertical alignment is a row-level option, but it’s useful when working with columns. This setting allows you to determine whether your content sits at the top, bottom, or middle of the row.
Oftentimes, the content in each row will have different heights. This may cause unwanted empty space below the column with less content.
The entire row will always inherit the height of the taller column. In this example, the images are not as tall as the text in the other column. As a result, the text content takes up the entire height of the row. However, the image sits near the top of the row with a lot of white space beneath it. This is due to the default setting of top alignment.
Perhaps you want an equal amount of empty space above and below the image. You can use middle vertical alignment to accomplish this. If you would rather the image renders at the bottom boundary of your row, you can use bottom alignment.
If you have any questions, feel free to contact us.
Comments
10 comments
Is this update going to be available for BEE PlugIn?
Hi James, thanks for reaching out. Yes, this will be available in Plugin as well! You can subscribe to our BEE Plugin product updates newsletter if you'd like to receive a notification once column management is available: https://docs.beefree.io/updates/
Hi James, the update for BEE Plugin went live today, and an email with more details was sent out to all newsletter subscribers. Hope your customers enjoy the new feature!
Thanks. I received the email. I am excited about the update and can't wait to check it out.
Is it possible to have one column for text then two columns underneath inside a single row? Prefer to have this capability in one row so I can save it as a synched row to input across multiple templates.
Hi there, Xplan Team!
Thanks for reaching out to our community; we're happy to have you here!
In regards to your question, the option to stack columns within a single row regrettably isn't available within the BEE Builder at this time, however, we sincerely appreciate your feedback, and I will forward this to the Product Team for further review.
In the meantime, the current option to accomplish this would be to create two separate rows, and create the columns as previously mentioned in your comment. We apologize for any inconvenience this may cause, but if you have any additional questions, you've come to the right place to ask around!
Is there ever going to be the ability to have a pixel set column width, rather than just numbers? OR even down to a column width of 0.5 etc rather than just 2?
Hi Mr. D, thank you very much for your feedback! There are currently no plans to change the way column management works in Beefree in terms of setting a column width in pixels, but I'll make sure to share both of your suggestions here with our Product Team.
I have three images of different heights/aspect ratios that I want to put in a row with the heights automatically made equal. I've put them in a row with three columns, but I can't find any option to set the heights, only the widths. I've adjusted the widths of the larger images to get them the same height as the smallest one, but the spacing is a bit goofy. Is there a proper way to do this? Thanks.
Hi Craig, thanks for your comment. Did you try to use this feature where you can vertically align the items in your design?
Please sign in to leave a comment.