Add an Image to Every Optin Type and Theme

Looking to add an image to your optin 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 optins. 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 optin:


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 optin 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 optin using the Custom HTML integration option!


Modify the Optin Title

If you prefer to use one of our native Email Service Provider integrations, you can still add an image to your optin 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 optin. This method can be used with any of our templated optins.

The image you use for your background image should be the exact size you want it to appear in the optin 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 optins. 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 optins. You can apply the same process to any other type of optin.

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 optin’s unique slug and namespace.

In the optin builder navigate to the Optin 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 optin should update in the live preview immediately; if there’s a delay you can also save your optin and refresh the browser window.

Optin Background Image

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


Modify the Optin Tagline

Following the same steps as above, we can modify the optin’s Tagline instead of the Title. This works for any templated optin that contains a Tagline text area. Note: our Floating Bar optins 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 optin’s unique slug and namespace.

In the optin builder navigate to the Optin 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 optin should update in the live preview immediately; if there’s a delay you can also save your optin and refresh the browser window.

Tagline Background Image

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