Skip to main content

How can I hide the pre-header text in my campaign, while still being able to edit it?

Here in Adestra’s Digital Design team, we often find ourselves answering this question for our community of platform users. As a designer you may well find yourself in a situation where you don’t want the pre-header visible within the campaign itself so you can separately control what your readers see in the inbox view, and the header that they see when they open it.

Our quickest fix here is to advise that you target the Email Editor using CSS, which initially means you’ll have to hide the pre-header entirely. Use inline styles, as in the following example:

Inline styles

Notice how we’re using display:none and visibility:hidden to ensure the column is not displayed anywhere. As it is, it won’t show in the Email Editor either. However, we can use a class to target the Email Editor exclusively, so that the pre-header becomes visible only when editing or previewing:

Class targeting editor

Now, when opening the Email Editor, you will be able to select and amend the pre-header text as usual…

Pre-header visible in editor

…but this text will no longer appear within the final campaign on sending:

Pre-header not visible in campaign


You will, however, need to bear in mind that hiding the pre-header text from the campaign will not affect how it’s displayed in your email client:

Pre-header in email client