Adding a header background with text on top

June 24, 2019 19:13
5 comments

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
------------------------------

Comments

5 comments

Robert Kohnke Act-On Team
- June 28, 2019 20:50
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]');'>HEADER TEXT HERE

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
Courtney Nirenberchik
- June 28, 2019 20:50
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]');'>HEADER TEXT HERE

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
Linda Mecimore
- January 30, 2020 18:41
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
Robert Kohnke Act-On Team
- January 30, 2020 19:08
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
Linda Mecimore
- January 30, 2020 19:10
Hi we have office 365.

0