Strange subhead showing in email client

Brandon Gresham

Hello all! We are just getting started with Luminate Online and sent our first email this morning. Something odd happened in the subject line of the email and we're trying to figure out where to edit this. Directly below the subject, the text "Updates from our organization" showed up in delivered messages? See here:



We could not find anywhere in the stationary, email envelope, or HTML code where this text exists? This has never happened with our old email client, so I can only assume it's related to the message being sent via LO. Any thoughts of where we could change/omit this? Thanks in advance for the help!

Erik Leaver

Hi Brandon,


Most email clients display the first line of text in an email in the preview pane. So you'll want to look through the code to see where that is displaying as it's not always the first line of viewable text, sometimes it can be alt text or other attributes.


Once you find where it lives, you can either update that text for each send or you create what is called "pre header" or "preview text" so you can control what is displayed in the preview. This is hidden text placed just after the body tag. Here's an example where the pre header is set to not display to the recipient but will show in the email preview pane:


<div style="display:none;font-size:1px;color:#{color};line-height:1px;font-family:{font};max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;">

    Pre headerPreview text here

</div>


In the example, you would set the color to the background color of your email and set the fonts to those in use in the email.


Good luck!

Erik



 

Jeremy Reynolds

<div style="display:none;font-size:1px;color:#{color};line-height:1px;font-family:{font};max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;">

    Pre headerPreview text here

</div>


In the example, you would set the color to the background color of your email and set the fonts to those in use in the email.


Good luck!

Erik

Slight tweak to that html, if it's helpful. Several email clients have switched from only a handful of characters in preview text to several sentences, so it's good to add an ellipsis at the end so it makes a break between the "real" sentence and the end of the preview text. Many clients have also added a dark mode that borks tricks that depend on background color, but those do tend to support transparent text colors...

 

<!-- email client preview text -->

<div style="display:none;visibility:hidden;font-size:1px;font-size:.000001rem;color:#rgba(0,0,0,0);line-height:1px;line-height:.000001rem;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;">

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam voluptatibus asperiores hic laudantium maxime id consequuntur eligendi repellendus, aut

&hellip; </div>

Philip Nawrocki

Hi Brandon,


Erik and Jeremy are spot on. This is the preheader text. It is basically another way to get your email recipient to open your email. It usually compliments your subject line.


Our code is like this:


<!-- Visually Hidden Preheader Text : BEGIN -->

        <div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: Tahoma, Calibri, Arial, Candara, Segoe, 'Segoe UI', sans-serif;">

            Celebrate your birthday, run a 5K or start a virtual fundraiser for the patients at Lurie Children's

        </div>

        <!-- Visually Hidden Preheader Text : END -->


        <!-- Create white space after the desired preview text so email clients don't pull other distracting text into the inbox preview. Extend as necessary. -->

        <!-- Preview Text Spacing Hack : BEGIN -->

        <div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: Tahoma, Calibri, Arial, Candara, Segoe, 'Segoe UI', sans-serif;">

            &zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;

        </div>

        <!-- Preview Text Spacing Hack : END -->


If your preheader is short, the &zwnj; will help add spaces in order to not pull the first bit of copy from your email or the alt tag if you have an image as the first part of your email.


Let us know if all this info helps!


Phil

Erik Leaver

Thanks Jeremy & Phil for the updates & additional suggestions -- good to know about the longer preview text and hadn't thought about the impact with dark mode!