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. You can change the column width by selecting one of our column split options from the edit content panel of the column blocks.
Columns in 4+ Column blocks are always equal in width.
Step 1. Click the column block in your design
Step 2. In the left panel, select the desired column split
***Not seeing some options when building your design? Update your code.
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.
Step 1. Click the column block in your design
Step 2. In the left panel, check the box `Reverse 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. Click the column block in your design
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 the column block in your design
2. Click the Styles tab in the left panel
3. Open the Column styles
4. Adjust the vertical alignment
Set top alignment, center alignment, or bottom alignment.
Not seeing this option? Upgrade 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. Click the column block in your design
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, e.g., 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.