Add an Image to Every Campaign Type and Theme

Looking to add an image to your campaign when using a template that doesn’t support image upload? You can use CSS to create an image display area with any of our templated campaigns. Follow this guide to get started.

IMPORTANT: This guide assumes you’re already familiar with our Custom CSS tool.

This guide is meant to help you get started however it does require at least a little knowledge of CSS and HTML.

There are several different ways you can add an image to a templated campaign:


Using a Custom HTML Integration

If you’re flexible about using one of our native Email Service Provider integrations, you can use the Custom HTML option and add the HTML for your image to the Custom HTML Form Code field.

This is the easiest way to add an image, but requires more customization to add your form. This way is easier because you have an HTML container where you can add an image and a form code to collect email.

Your image HTML may look similar to the following:

<img src="http://www.example.com/image.jpg" height="100" width="100" alt="Descriptive text of my image for search engines and screen readers." />
Note: It is important to note that you must have your image already hosted on a public site.

Once you’ve added the HTML for your image, you can add your HTML form code either before or after the image HTML following our documentation on using the Custom HTML integration option.

Optin Image Custom HTML Code

The live preview of your campaign will then show the image and form you’ve added to the Custom HTML Form Code field.

Custom HTML Image and Form

That’s it, you’ve successfully added an image to your campaign using the Custom HTML integration option!

Modify the Campaign Title

If you prefer to use one of our native Email Service Provider integrations, you can still add an image to your campaign using CSS instead.

Important: you need to have a basic understanding of CSS. You can watch this video to learn more and then follow our CSS guide for implementation.

With this method we’ll be adding the image as a background-image for the Title text-area of your campaign. This method can be used with any of our templated campaigns.

The image you use for your background image should be the exact size you want it to appear in the campaign or slightly larger. If you use an image that is smaller than you plan to display it you’ll notice the image becomes pixelated or loses quality.

In this example I’ll be adding an image to one of our Floating Bar templated campaigns. Since at the time of this writing none of our Floating Bar templates support image upload, this guide will give you an intro to adding an image to a Floating Bar. Note: this method is not exclusive to Floating Bar type campaigns. You can apply the same process to any other type of campaign.

Example CSS

The following CSS is intended to help you get started. You’ll need to update it to include the URL for your specific background image URL and dimensions.

If you’re copying the example CSS be sure to update it to use your specific campaign’s unique slug and namespace.

In the campaign builder navigate to the Campaign panel, scroll down and add your CSS to the Custom CSS field.

Title Background Image CSS

html div#om-ekdsr8dvkgsfnthk .washington-element-title {
    /* Make the Title text transparent */
    color: transparent !important;
    
    /* Set a background image for the Title area */
    background-image: url('http://www.example.com/image.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    /* Background image height */
    width: 234px;
    /* Background image width */
    height: 36px; /* Width for your image */
}

Your campaign should update in the live preview immediately; if there’s a delay you can also save your campaign and refresh the browser window.

Optin Background Image

That’s it, you’ve replaced your campaign’s Title text with an image!

Modify the Campaign Tagline

Following the same steps as above, we can modify the campaign’s Tagline instead of the Title. This works for any templated campaign that contains a Tagline text area. Note: our Floating Bar campaigns only contain a Title text area at the time of this guide.

Example CSS

Our CSS will follow the same procedure as the CSS used to modify the Title text area, only we’ll be targeting the specific Tagline element instead.

The following CSS is intended to help you get started. You’ll need to update it to include the URL for your specific background image URL and dimensions.

If you’re copying the example CSS be sure to update it to use your specific campaign’s unique slug and namespace.

In the campaign builder navigate to the Campaign panel, scroll down and add your CSS to the Custom CSS field.

Tagline Image CSS

html div#om-calxawqovceg1wnc .chicago-element-tagline {
    /* Make the Title text transparent */
    color: transparent !important;
    
    /* Set a background image for the Title area */
    background-image: url('http://www.example.com/image.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    /* Background image width, using max-width so the area is responsive on all devices */
    max-width: 560px;
    /* Background image height, using max-height so the area is responsive on all devices */
    max-height: 110px;

    /* Adding a margin to the bottom of the background image area, this is optional depending on your own needs */
    margin: 0 auto 30px;
}

Your campaign should update in the live preview immediately; if there’s a delay you can also save your campaign and refresh the browser window.

Tagline Background Image

That’s it, you’ve replaced your campaign’s Tagline text with an image!