Columns: sizes, padding, reverse stack on mobile, scale on mobile

Adjust your columns in Modern Editor to meet your design needs. Learn how to change the width of your columns, reverse stack on mobile, add padding and scale on mobile.


Topics covered in this article:

Changing column widths or sizes

Creating padding between column sides

Reversing column stacking on mobile

Scaling columns on mobile

 

 

Changing column widths or sizes

 

In Modern Editor the 2-column and 3-column blocks are by default equally split: 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. Open your design in Modern Editor.

 

2. 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.

 

 

3. 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 email? Update your Modern Editor code.

 

 

 

Creating padding between column sides

 

Easily 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. Open your design in Modern Editor.

2. Drag a two or three column structural block to the preview panel.

If you already have a column in your template, click on the column block on the preview panel.

3. Pull a single block into one of the column sides, such as an image block.

4. Pull a container structural block below the image block on the same column side.

5. Drag your image block into the container.

6. Drag any other blocks into the container below your image block, re-arrange your blocks in this container.

7. 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.

8. Select the STYLES tab for the container.

9. Adjust your padding on the middle side of the container. Example, insert 10px to the right padding.

10. 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 easily repeat the entire block multiple times in your template.

 

 

 

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. Open your design in Modern Editor.
 

2. Add a column to your preview panel.

If you already have a column in your template, click on the column block on the preview panel.

 

3. 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 email? Update your Modern Editor 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. Open your design in Modern Editor.

 

2. Add a column to your preview panel.

If you already have a column in your template, click on the column block on the preview panel.


 

3. 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 email? Update your Modern Editor code

 

 

 

 

Have more questions? Submit a request
Powered by Zendesk