Add or remove a banner image in specific campaign screens

Tabata Vossen -

It is easy to add and remove banner images on specific campaign screens with CSS. To add a banner image to your entire campaign, use these instructions to manage the look & feel of your campaign.

Quick access:

☑︎ Add a banner image to a specific campaign step

☑︎ Remove a banner image from a specific campaign step

 

To begin, log into Qualifio.

Click the Change look & feel button within your campaign. Hint: it's at the very end, within the 'Look & feel' step.

 

Add a banner image to a specific campaign step

Step 1: Resize the image to the appropriate size (around 300px high).

Step 2: Navigate to the Advanced settings.

Step 3: In the CSS tab, use this snippet of code.

body[data-qlf-step-name="questionset"] #bandeau_sup{
background-image: url(https://files.qualifio.com/library/demo/images/2020/landscape.jpeg) !important;
width: 100%;
height: 250px;
background-size: cover;

}

The way this code works is very simple. It has three main parts. This first one targets a specific step in your campaign ('intro' for the welcome screen, 'questionset' for the questionnaire, 'identityset' for the form, or 'exit' for the exit screen).

For instance, if you wanted to add a banner image only on the welcome screen, the piece of code would look like this:

body[data-qlf-step-name="intro"] #bandeau_sup{
background-image: url(https://files.qualifio.com/library/demo/images/2020/landscape.jpeg) !important;
width: 100%;
height: 250px;
background-size: cover;

}

The second part provides the URL of the banner image you'd like to add. (You can upload your image to Documents > Multimedia Library.)

The 'height' part should be used to indicate the height of your banner image.

Step 4: Preview your changes by clicking Apply.

Step 5: Save your changes by clicking Save and quit.

Remove a banner image from a specific campaign step

Step 1: Navigate to the Advanced settings.

Step 2: Add the following code to the CSS section.

body[data-qlf-step-name="questionset"] #bandeau_sup img {
display: none;
}

The way this code works is very simple. It targets a specific step in your campaign ('intro' for the welcome screen, 'questionset' for the questionnaire, 'identityset' for the form, or 'exit' for the exit screen) and will have it removed from this specific step.

Step 3: Preview your changes by clicking Apply.

Step 4: Save your changes by clicking Save and quit.

 

Help! I don't see my changes!

If you don't see your changes after updating your campaign, you may need to clear your cache. The cache holds the little bits of data that can sometimes prevent it from refreshing completely. Unlike refreshing the page normally, clearing the cache is a 'hard reset' of the campaign. The process differs slightly from Windows to Mac products.

 

Thank you for reading. If you need any help making changes to your campaign, contact us.

Powered by Zendesk