CMS Development

Natalia_RC
Member

Mobile Stacking Order in Drag and Drop Email Template

SOLVE

Hi community,

 

I am trying to create an email with multiple content sections. In a non-mobile view, the image and copy in each content section would alternate sides of the screen (i.e. Section 1: Image Left and Copy Right, Section 2: Image Right and Copy Left etc.).

 

tablet / desktop view - desired alignmenttablet / desktop view - desired alignment

Using the drag and drop email template builder, I have created an email which does this (see above) - except in mobile view (see below).

 

mobile view - images not stacking firstmobile view - images not stacking first

 

I tried using this article to help me with code to create a mobile stacking order (https://designers.hubspot.com/docs/snippets/responsive/how-to-customize-your-mobile-stacking-order). As I couldn't see how to attach a css file, I added to code to the head markup in the email template:

 

adding code from HS article to head markupadding code from HS article to head markup

and added the css classes to the modules:

 

css classes in modulescss classes in modules

It's not working and as a marketer, not a developer, I'm out of my depth now. Can anyone help me resolve the issue please?

 

Many thanks,

 

N

1 Accepted solution
karstenkoehler
Solution
Hall of Famer | Partner
Hall of Famer | Partner

Mobile Stacking Order in Drag and Drop Email Template

SOLVE

Hi @Natalia_RC,

 

Great news, this can now be configured directly in the drag and drop email editor:

 

 

Marketing Email
Mobile Optimised Email
August 16, 2024


What is it?

You can now optimise your marketing emails for mobile, enhancing your end recipient experience, improving engagement rates, and ultimately drive higher conversions.

This rollout provides the ability to hide modules and sections on both mobile and desktop, as well as changing the layout and disable automatic column stacking on mobile.


Why does it matter?

Mobile devices are an increasingly popular way for customers to view email campaigns, meaning it's now more important than ever to design with mobile devices in mind.

The new Mobile Editor for Marketing Email will enhance the email editing experience that visualises how and where more receipients are opening their emails.

 

How does it work?

  • To customise which modules or sections appear for desktop or mobile recipients:
  • In your HubSpot account, navigate to Marketing > Marketing Email.
    Click the name of a drafted email, or click Create email in the top right to create a new email.
    Click the desktop desktop icon or mobile mobile icon at the top of the email editor to view and configure the settings for each device type.

karstenkoehler_5-1724128267775.png

 

  • Hover over a module or section and click the hide hide icon to hide that module in the version of the email you're editing.
    To show all hidden modules for a version you're editing, click Show all hidden at the top of the email editor.
  • To configure different column layout settings between mobile and desktop devices:
  • Click one of the email sections.
    In the Layout section in the left pane, toggle the All devices switch off, then configure the column layout for Desktop and the stacking layout for mobile.

karstenkoehler_6-1724128273082.png

 


Who gets it?

Marketing Pro, Marketing Enterprise


Learn More:
Join the discussion on our Community
Learn more on the Knowledge Base

 

 

The beta can be found here:

 

karstenkoehler_7-1724128303688.png

 

If you're not seeing it yet, you'll have to be patient for a bit longer or reach out to your customer success manager – but it's on its way 🙂

 

Best regards!

Karsten Köhler
HubSpot Freelancer | RevOps & CRM Consultant | Community Hall of Famer

Beratungstermin mit Karsten vereinbaren

 

Did my post help answer your query? Help the community by marking it as a solution.

View solution in original post

0 Upvotes
10 Replies 10
karstenkoehler
Solution
Hall of Famer | Partner
Hall of Famer | Partner

Mobile Stacking Order in Drag and Drop Email Template

SOLVE

Hi @Natalia_RC,

 

Great news, this can now be configured directly in the drag and drop email editor:

 

 

Marketing Email
Mobile Optimised Email
August 16, 2024


What is it?

You can now optimise your marketing emails for mobile, enhancing your end recipient experience, improving engagement rates, and ultimately drive higher conversions.

This rollout provides the ability to hide modules and sections on both mobile and desktop, as well as changing the layout and disable automatic column stacking on mobile.


Why does it matter?

Mobile devices are an increasingly popular way for customers to view email campaigns, meaning it's now more important than ever to design with mobile devices in mind.

The new Mobile Editor for Marketing Email will enhance the email editing experience that visualises how and where more receipients are opening their emails.

 

How does it work?

  • To customise which modules or sections appear for desktop or mobile recipients:
  • In your HubSpot account, navigate to Marketing > Marketing Email.
    Click the name of a drafted email, or click Create email in the top right to create a new email.
    Click the desktop desktop icon or mobile mobile icon at the top of the email editor to view and configure the settings for each device type.

karstenkoehler_5-1724128267775.png

 

  • Hover over a module or section and click the hide hide icon to hide that module in the version of the email you're editing.
    To show all hidden modules for a version you're editing, click Show all hidden at the top of the email editor.
  • To configure different column layout settings between mobile and desktop devices:
  • Click one of the email sections.
    In the Layout section in the left pane, toggle the All devices switch off, then configure the column layout for Desktop and the stacking layout for mobile.

karstenkoehler_6-1724128273082.png

 


Who gets it?

Marketing Pro, Marketing Enterprise


Learn More:
Join the discussion on our Community
Learn more on the Knowledge Base

 

 

The beta can be found here:

 

karstenkoehler_7-1724128303688.png

 

If you're not seeing it yet, you'll have to be patient for a bit longer or reach out to your customer success manager – but it's on its way 🙂

 

Best regards!

Karsten Köhler
HubSpot Freelancer | RevOps & CRM Consultant | Community Hall of Famer

Beratungstermin mit Karsten vereinbaren

 

Did my post help answer your query? Help the community by marking it as a solution.

0 Upvotes
kkashiva
Participant

Mobile Stacking Order in Drag and Drop Email Template

SOLVE

I ran into and solved the same problem today. What worked for me was using CSS media queries with display property values "table-header-group" and "table-footer-group".

 

For anyone else facing this issue, here's how you can approach it:

 

Imagine you have this HTML code for your 2-column section in the desktop template located somewhere in the email's <body>:

<div class="row1">
    <div class="column1">
        Some text here
    </div>
    <div class="column2">
        <img alt="some image here" src="example_path">
    </div>
</div>
<div class="row2">
    <div class="column2">
        <img alt="some image here" src="example_path">
    </div>
    <div class="column1">
        Some text here
    </div>
</div>

 By default this 2-column section will show in the order 

text image

image text

on desktop and

text

image

image

text

on mobile.

 

To make it show on mobile as

text

image

text

image

add this CSS styling into the <head> section of the template:

<style type="text/css">
    @media screen and (max-width: 690px) {
        .row2 .column1 {
            display: table-footer-group !important
        }
        .row2 .column2 {
            display: table-header-group !important
        }
    }
</style>
0 Upvotes
vanessabt
Participant | Diamond Partner
Participant | Diamond Partner

Mobile Stacking Order in Drag and Drop Email Template

SOLVE

Is there a way to apply this solution when using the front-end drag and drop builder and not using "template" in the design manager?

0 Upvotes
CEvans28
Participant

Mobile Stacking Order in Drag and Drop Email Template

SOLVE

I've found a workaround, use a two column layout, an empty one column layout, and then another two column layout. You can see how it looks in the editor, in desktop, and in mobile below. 

Screenshot 2022-12-12 at 10.21.24 AM.pngScreenshot 2022-12-12 at 10.17.35 AM.pngScreenshot 2022-12-12 at 10.17.49 AM.png

0 Upvotes
Stephanie-OG
Key Advisor

Mobile Stacking Order in Drag and Drop Email Template

SOLVE

Hi Natalia, 

 

Unfortunately email template development's trickier than website development as it's more outdated. The drag and drop modules for webpages use one type of element (divs) whereas emails use nested tables so they behave differently.

 

The two methods on that link are intended for websites. The first method, Flexbox isn't supported on most email clients and the second method, float, isn't supported on Outlook and I'm not certain how it would work with the drag and drop templates in general as I haven't tested it out.

 

The most reliable way I've found to achieve this is to create a custom coded module and use the table's "dir" parameter as described here. I'm afraid this means that some HTML/CSS and email template development knowledge is needed.

 

If it's any consolation, most developers I know also find email templates highly frustrating Cat Sad

 


Stephanie O'Gay Garcia

HubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

AlexMackrill
Participant | Elite Partner
Participant | Elite Partner

Mobile Stacking Order in Drag and Drop Email Template

SOLVE

Is it anywhere on the product roadmap to add a toggle for two coloum modules, or any kind of option for controlling the order? It seems fairly critical to me for most email designs.

adamkushner
Participant | Partner
Participant | Partner

Mobile Stacking Order in Drag and Drop Email Template

SOLVE

It's a shame that Hubspot is not addressing this issue. I'm running into it on an email template and it seems hopeless to resolve.

 

HBurlbaw
Member

Mobile Stacking Order in Drag and Drop Email Template

SOLVE

I found a work around that worked for me. I have an enews with a story that includes an image. I put the image to the right of the copy in the main email creator (see snip below). And then when rendered for the mobile version, they were stacked under the correct story. Maybe this will help y'all!

image1.PNGimage2.PNGimage3.PNG

0 Upvotes
MMMF
Participant

Mobile Stacking Order in Drag and Drop Email Template

SOLVE

I am having the same problem, I want to see two content blocks next to eachother [text + image] and in mobile it stacks. 

 

My work-around essentially defeats the purpose of using a drag and drop but I created the image in canva and made the whole image a link. 

 

Is there any way to do this without  have to create an image first? If I did this in drag and drop it would not display like this in mobile.

 

Affiliate partners.png

 

 

SebSchulze
Participant

Mobile Stacking Order in Drag and Drop Email Template

SOLVE

Hey Stephanie, I'm creating an email template under Design Tools with the drag & drop email editor and I'm having this same problem (unable to change the way the blocks stack on mobile). I'm sure other users are having this issue as well. I looked at the article you linked to and the steps didn't work for me unfortunately. Going over the article with a HubSpot support rep we found that the steps don't apply when working with HubL modules because the "dir" variable is not supported. The only theoretical solution we came up with was to convert the email template to HTML, add the "dir='ltr'/dir='rtl'" style tag in-line for every single <table> and <td> element, and even then, after converting the email template to HTML there is still a mix of HTML and HubL code. It would be great if HubSpot updated the drag & drop email editor to give users the ability to easily change the stacking order of their modules on mobile.