Adjust your columns to meet your design needs. Learn how to change the width of your columns, reverse stack on mobile, add padding, and scale on mobile.
Changing column widths or sizes
2-column and 3-column blocks are equally split by default: 2-column is a 50/50 split and 3-column is a 33-33-33 split. You can change the column width by selecting one of our column split options from the edit content panel of the column blocks.
1. Add a column to your preview panel
If you already have a column in your design, click on the column block on the preview panel.
2. On the edit content panel, click on split you would like your column to resemble
Watch the column width update in the preview panel.
***Not seeing some options when building your design? Update your code.
Creating padding between column sides
You can create custom padding between column sides in two or three column areas by using containers to hold your single or grouped blocks. By default new columns you add to your design do not have any padding between column sides which makes this solution really helpful.
Note: This option works for every WordFly starter except starter E.
Example of two column area with padding between the two columns,
Follow these instructions to create this type of padding with a container in your columns:
1. Drag a two or three column structural block to the preview panel.
If you already have a column in your email, click on the column block on the preview panel.
2. Pull a single block into one of the column sides, such as an image block.
3. Pull a container structural block below the image block on the same column side.
4. Drag your image block into the container.
5. Drag any other blocks into the container below your image block, re-arrange your blocks in this container.
6. Hover over your container in the column and click on the title 'container'.
This will open the edit content window on the left side of the editor for this container.
7. Select the STYLES tab for the container.
8. Adjust your padding on the middle side of the container. Example, insert 10px to the right padding.
9. Toggle your container STYLE tab to mobile and adjust the padding to 0px.
Do this step if this column will adjust on mobile to one-column. Removing the padding will ensure this container matches the padding of other blocks on mobile. Skip this step if you plan on scaling your column on mobile.
Once you've set the style on the container in one side of the column you can hover over the container, right-click on it and select duplicate. Then drag this container to the other side of your column. Go through the steps above to make similar edits to the other side of the container (remove the padding on the right and adjust it on the left instead).
With your padding set on both sides of the column (or in three columns) using a container, you can hover over the column and right-click on it and select duplicate to repeat the entire block multiple times in your email.
Reversing column stacking on mobile
By default, on mobile all side-by-side blocks will stack left on top of right. For example, if you have a two-column block in the design, with an image and text block side-by-side, the natural stack on mobile will be the image block on top of the text block. You can reverse the stack of your columns on mobile so that right blocks stack on top of left. Follow these instructions to do this.
1. Add a column to your preview panel.
If you already have a column in your email, click on the column block on the preview panel.
2. On the edit content panel, check the box Reverse stack on mobile.
Toggle the preview panel slider bar to the mobile preview and see how your columns are now stacked.
***Not seeing some options when building your design? Update your code.
Scaling columns on mobile
By default, on mobile side-by-side content will stack left on top of right. For example, if you have a two-column block in the design, with an image and text block side-by-side, the natural stack on mobile will be the image block on top of the text block. You can opt to scale your side-by-side content so the blocks do not stack but instead scale on mobile.
Be sure to test how this looks on mobile! Scaling columns on mobile may make the content hard to read or take action on.
1. Add a column to your preview panel
If you already have a column in your email, click on the column block on the preview panel.
2. On the edit content panel, check the box for Scale on mobile
Toggle the preview panel slider bar to the mobile preview and see how your columns are not stacked on mobile now!
***Not seeing some options when building your design? Update your code.
Vertically align columns
1. Click on your two- or three-column block from the preview panel (right side)
2. Select the STYLES tab from the edit content panel (left side)
3. Under ALIGNMENT, click on Column
4. Adjust the alignment as needed
Set top alignment, center alignment, or bottom alignment.
Not seeing this option? Upgrade your code