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:
Notice how we’re using
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:
Now, when opening the Email Editor, you will be able to select and amend the pre-header text as usual…
…but this text will no longer appear within the final campaign on sending:
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: