Please sign in to get the most from this site.

Adding a header background with text on top

Comments

5 comments

  • Robert Kohnke
    Hi @Courtney Nirenberchik
    I am actually in the middle of fully testing some custom inline CSS to accomplish this exact thing.

    I am going to make a full Community post out of it with step-by-step instructions once it is done.

    In the meantime, I will paste it below so that you can use it as-is.

    Would you mind providing feedback about where it works, where it doesn't, details, etc. ? That would be really helpful!

    Here is what I am doing:

    In a Rich Text Block, I edit it using the HTML editor button and place the following HTML into the block:


    <p style='padding-top: 20px; height: 100px; background-color:[place Hex code for your backup BG color here]; text-align: center; vertical-align: middle; background-position: center center; background-image: url('[insert Public URL for your BG image here]');'><span style='color: #ffffff; font-size: 16pt; font-family: 'helvetica neue', helvetica, arial, sans-serif;'>HEADER TEXT HERE</span></p>


    There is a lot of customization you can do here, but the three main components are:

    1. background-color: this is a backup color, because some browsers/ email clients (like Outlook 2013) don't display the background image, so I use a color just in case.

    2. background-image: this is the URL for your actual background image. You CAN use the public URL of an image in your Act-On Image Library. Make sure to format this inline CSS like this - background-image: url('URL HERE');

    3. Your Text (HEADER TEXT HERE): This is the actual text that will display over your image.


    Feel free to customize and adjust the other style attributes, like 'height' and 'padding-top'. The numbers above are what we are using internally but may not be exactly what you need in your emails.

    Please let me know if this helps.

    Have a great day and Happy Marketing!

    ------------------------------
    Robert Kohnke
    Marketing Operations Strategist, Act-On Software, Inc.
    ------------------------------
    -------------------------------------------
    Original Message:
    Sent: 05-10-2018 12:36
    From: Courtney Nirenberchik
    Subject: Adding a header background with text on top

    Hello,
    Does anyone know if you can add text on top of a background in Act-On, strictly using the content blocks? In the past, I have used tools such as MailChimp and Campaign Monitor where you have the capability. In Act-On seems as I would have to design the header in Photoshop in bring in as an image or use some HMTL code.

    ------------------------------
    Courtney Nirenberchik
    Email Marketing
    ------------------------------
    1
    Comment actions Permalink
  • Courtney Nirenberchik
    Thank you for the tip! I will try it out and be sure to let you know how it works out.

    ------------------------------
    Courtney Nirenberchik
    Email Marketing
    ------------------------------
    -------------------------------------------
    Original Message:
    Sent: 05-10-2018 13:07
    From: Robert Kohnke
    Subject: Adding a header background with text on top

    Hi @Courtney Nirenberchik
    I am actually in the middle of fully testing some custom inline CSS to accomplish this exact thing.

    I am going to make a full Community post out of it with step-by-step instructions once it is done.

    In the meantime, I will paste it below so that you can use it as-is.

    Would you mind providing feedback about where it works, where it doesn't, details, etc. ? That would be really helpful!

    Here is what I am doing:

    In a Rich Text Block, I edit it using the HTML editor button and place the following HTML into the block:


    <p style='padding-top: 20px; height: 100px; background-color:[place Hex code for your backup BG color here]; text-align: center; vertical-align: middle; background-position: center center; background-image: url('[insert Public URL for your BG image here]');'><span style='color: #ffffff; font-size: 16pt; font-family: 'helvetica neue', helvetica, arial, sans-serif;'>HEADER TEXT HERE</span></p>


    There is a lot of customization you can do here, but the three main components are:

    1. background-color: this is a backup color, because some browsers/ email clients (like Outlook 2013) don't display the background image, so I use a color just in case.

    2. background-image: this is the URL for your actual background image. You CAN use the public URL of an image in your Act-On Image Library. Make sure to format this inline CSS like this - background-image: url('URL HERE');

    3. Your Text (HEADER TEXT HERE): This is the actual text that will display over your image.


    Feel free to customize and adjust the other style attributes, like 'height' and 'padding-top'. The numbers above are what we are using internally but may not be exactly what you need in your emails.

    Please let me know if this helps.

    Have a great day and Happy Marketing!

    ------------------------------
    Robert Kohnke
    Marketing Operations Strategist, Act-On Software, Inc.
    ------------------------------

    Original Message:
    Sent: 05-10-2018 12:36
    From: Courtney Nirenberchik
    Subject: Adding a header background with text on top

    Hello,
    Does anyone know if you can add text on top of a background in Act-On, strictly using the content blocks? In the past, I have used tools such as MailChimp and Campaign Monitor where you have the capability. In Act-On seems as I would have to design the header in Photoshop in bring in as an image or use some HMTL code.

    ------------------------------
    Courtney Nirenberchik
    Email Marketing
    ------------------------------
    0
    Comment actions Permalink
  • Linda Mecimore

    Hi Robert,

    I was thrilled to find this and we were able to get the header to show up in Act-on with text on top in the previews but it doesn't show up in Outlook on the email. Is there a way to resolve. 

    Please let me know if you have any suggestions.

    thanks

    Linda

     

     

    0
    Comment actions Permalink
  • Robert Kohnke

    Linda Mecimore -

    What version of Outlook are you having trouble with? 

    I know that Outlook does support the background-image inline css, but it may require tweaking.

     

    Have a great day!

    Robert Kohnke

    Marketing Consultant and Strategist

    robert@robertkohnke.com

     

    0
    Comment actions Permalink
  • Linda Mecimore

    Hi we have office 365.

    0
    Comment actions Permalink

Please sign in to leave a comment.