Column block options: sizes, padding, reverse stack on mobile, scale on mobile (Modern Editor)

Modern Editor: How do I edit the column sizes, reverse stack on mobile or scale on mobile?

In Modern Editor you can adjust the ratio of the column blocks to split differently than the default that you pull into your email. You can also revers the stack of the columns on mobile so that right sides stack on top of left. And, you can opt to scale your columns on mobile so there is no stacking of the two sides when the email shifts into a one-column layout.


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 email in Modern Editor.

 

2. Add a column to your email preview panel.


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

 

 

3. On the edit content panel, click on split you would like your column to resemble.

Watch the column width update on your email preview panel.

 

 

 

 

**Not seeing these options? This is NEW for "WordFly 3.0.0.523" emails or later (Version can be found on Line 3 in the HTML Editor). Click here for instructions to upgrade your email with this feature.

 

 

 

Creating padding between column sides

 

Easily create padding between column sides in two or three column areas by using containers to hold your single or grouped blocks.

 

The Modern Editor starter emails do contain some built in padding to the columns in the starters which you can copy by right-clicking on the column area and selecting duplicate. By default any new columns you add to your template design do not have any padding between column sides which makes this solution really helpful.

 

Example of two column area with padding between the two columns.

 

 

 

Follow these instructions to easily create this type of padding with a container in your columns:

 

1. Open your email in Modern Editor.

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

If you already have a column in your template, click on the column block on the email 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, when a Modern Editor email renders 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 email, 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 email in Modern Editor.
 

2. Add a column to your email preview panel.

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

 

3. On the edit content panel, check the box Reverse stack on mobile.
Toggle the email preview panel slider bar to the mobile preview and see how your columns are now stacked!

 

 

 

**Not seeing this option? This is NEW for "WordFly 3.0.0.559" emails or later (Version can be found on Line 3 in the HTML Editor). Start a new email or add this code to your email template HTML:

...find this line:
.column { float: left; }

add the following immediately after it:
.desktop-reverse .column { float: right; }

 

 

 

Scaling columns on mobile


By default, side-by-side content in Modern Editor emails will stack left on top of right. For example, if you have a two-column block in the email, 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 inside the one-column layout as the email renders 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 email in Modern Editor.

 

2. Add a column to your email preview panel.

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


 

3. On the edit content panel, check the box for Scale on mobile.


Toggle the email preview panel slider bar to the mobile preview and see how your columns are not stacked on mobile now! 

 


 

 

 

**Not seeing this option? This is NEW for "WordFly 3.0.0.538" emails or later (Version can be found on Line 3 in the HTML Editor). Click here for instructions to upgrade your email with this feature.

 

Have more questions? Submit a request
Powered by Zendesk