New Email Editor: Hiding Button via Conditional Content

Hi ​@RachelPr4 ,

For each conditional content block, you can modify the styling from the right-hand side panel.

Once you select the condition you want to hide, go to the right-side panel and open the Style tab. At the bottom, expand the Advanced section, where you’ll find additional styling options.

From there, you can change the display attribute to none, which will hide the button for that specific condition.

Hope this helps!

Actually, if you test it out, using display:none; really isn’t a good approach here b/c it doesn’t work in Outlook.

This is one of the things about the new editor that drives me crazy -- my opinion is that it’s still half-baked (behind the scenes) and just not ready for production use compared to the existing email editor which could easily use a boolean toggle to accomplish this exact situation.

Here’s a look at what happens when you create a button in an email and then use the advanced controls to add “display:none;” to it...
 

1. Notice that you can’t see the button on the canvas so it looks like this is working? This is because the email builder uses all kinds of web-rendering css which has nothing to do with the end-product for your email. You’ll still find things like “normalize.css” (a web-browser specific library which isn’t even meant for email code) firing on the canvas elements in the design tool. In short, this means what-you-see-is-NOT-what-you-get

2. If you actually go look at the code that gets sent out - the display:none; ends up on a <div> (the button container - in the green box) but not in the MSO (Outlook-only) code just above it (red box). Technically, display:none; doesn’t work in the MSO code, so there’s a translation to the “MSO language” that needs to happen to hide things in Outlook AND other places and that’s clearly not happening in the code here b/c the new editor is still kind of basic from a technical perspective.

3. The proof is in the pudding if you actually send render tests for this scenario for review. The image above shows Desktop clients where the button is hidden (green boxes) and where it is not (red boxes). 

If you really wanted something like this to be able to actually work consistently, you’d need to edit the actual HTML of the button for both the MSO code and the normal HTML code. This is why it’s important to give developers access to the code base to be able to setup these types of things and solve for these types of situations but the new email editor is just not setup this way -- instead it assumes that you don’t want to have to code anything and also don’t want to do anything complicated like conditionally hiding a button because that would require access to the codebase. 

Bottom line: This tool is designed for and meant for entry-level email marketing where you do not have access to professional developers, aren’t doing anything non-basic and want non-technical people in your organization (or another 3rd party you hire to do it for cheap) to be able to do technical things in email.

Spoiler alert.. you get what you pay for and it literally doesn’t work when you do it that way (as in the example above). 

Might not exactly meet the needs as you’d still see a bit of padding/white space. But you could consider putting the buttons, text, etc. into a Container, then doing the Conditional Content aspect on the Container level.

That way all the content you’re showing in there you can delete and edit to show to your audience.