Step 1 – Create a New Lightbox Campaign

Your first step is to create a new campaign. Fill out the details of your campaign, giving it a Title and assigning a domain for it to load on. Then choose the Lightbox Design type and then scroll down to the Transparent Theme.

Step 2 – Add a Background Image

Your campaign will then load in the campaign builder. Here you will add an image to your campaign. This has to be done first, otherwise you may run into some problems.

Create an image that is 700 x 450 pixels. This will be your clickable image. When you’re ready to add the image to your campaign, select the “Archie” Monster where it says Click To Add Media.

This will open the Image Upload lightbox for your campaign where you can upload a new image or select an existing image from your account. Choose the image you want to use and then select the Insert Image into Campaign button.

Step 3 – Add HTML Link

Next we’ll add our HTML link we want to use to make our entire campaign a clickable link.

In the campaign builder select the Integrations tab. Next, choose the Custom HTML from the Email Provider dropdown and add your HTML link code to the Custom HTML Form Code field.

Where you see the href above, is where you need to put the full URL for your target site. The om-trigger-conversion class will allow your campaign to record a conversion each time the campaign link is clicked on.

Step 4 – Add Custom CSS

Next, we’ll use some CSS to expand the HTML link to cover the whole image.

Select the Campaign tab to open the Campaign Builder. Scroll down to the Custom CSS field and add your CSS here.

You can copy and paste the example CSS provided below. Be sure to update it to use your own campaign’s unique slug and namespace. Learn more about using the Custom CSS Tool for a full walk-through.

FAQs

Q: How do I edit the background image later?

A: When following this guide you are making the link tag cover the whole campaign (image and all!). This means you can’t click edit/modify image because it is being covered by the link.

To edit the image in your campaign, temporarily remove the CSS on the campaign that affects your link and it should let you edit the image. After you have updated the image, you can add the link’s CSS back. Don’t forget to save your changes!