Add or remove a banner image in specific campaign screens

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

☑︎ Change an existing banner in 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.

 

Change an existing banner in 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 {
content: url("add the url of your picture here");
}

Step 3: Preview your changes by clicking Apply.

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

 

 

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