This slideshow provides easy-to-follow, step-by-step instructions, demonstrating how to change the look and feel of a Qualifio campaign:
You have the possibility to customise the design of your campaign for each publication channel defined in the Channels step. Select a template, change the settings you want and apply them to your campaign.
1. Choose a template:
Read more:
2. Customise it by clicking on "Change Look & Feel":
This opens a workspace dedicated to the design of your campaign. This zone takes the whole width of your screen and lets you real-time preview your changes, so you can see and adjust the design of your campaign as you go. On the left are the various steps used to customize your campaign.
General
Width and height: Set the width and height values in pixels of your campaign.
Position: This option enables you to control the behaviour of your iframe, page after page.
3 options :
- Stay on the same position (default),
- Go to top of the iframe,
- Go to top of the page.
Read more:
Banner: the image you upload here will be displayed on top of the iframe:
- always if no background image has been uploaded;
- when the screen is smaller than the width specified (810 px by default). The background colour will then appear in the background of your campaign. It is displayed on the mobile version when there is no background image.
Background image: The image you upload here will become the wallpaper/background of your campaign when the user's screen is the same size as the image uploaded and defined in the "Look and Feel" tab. We set it up at 810px wide by default but you can choose other values.
This background image disappears when the width of your screen is smaller than the width given to your quiz. It is therefore important to add a banner, which will be displayed on smaller screens such as smartphones or tablets.
Footer: the image you upload here will be displayed below the content of your campaign:
- always if no background image has been uploaded;
- when the screen is smaller than the width specified (810 px by default). The background colour will then appear in the background of your campaign. It will also be displayed on the mobile version when there is no background image.
Read more: What's the difference between the background image and the banner?
Game zone
Use this section to set the width, minimum height and background colour of the game zone. It's also possible via this section to choose if you want to centre the questions/answers as well as the form.
Texts
Use the 'Texts' section to set the font size, the colour, the font family, and the font-weight. There are 4 different kinds of texts:
- General (simple texts, question fields and form fields, and links);
- Titles (h1);
- Subtitles (h2);
- Questions.
Read more:
Buttons, Menu & Checkbox/Radio buttons
Use this section to set the style, format and colour of the buttons and the menu buttons (top right of the iframe), as well as assign some colours to the radio buttons and checkboxes. You can also change the button labels using the "Button text" and "Menu text" sections located outside the campaign design workspace (still in the "Look & Feel" step).
CSS
Use the CSS tab to go further in your customization.
Save
Once you're done customizing your template, you have 3 options:
1. Save and quit: your customized look & feel will ONLY apply to the campaign you are currently working on and on the selected channel. You will be redirected to the 'Look & Feel' step.
2. Save as a new template: this option appears when you click on the 'Save the template' button located on the left of "Save and quit". This will create a new template, which will be available for this type of campaign and on selected channels.
NB: Campaigns that use this template won't automatically be adjusted. Changes will only apply to the campaign you are currently working on, as well as to future campaigns. If you wish to apply these changes to your previous campaigns, you need to access the said previous campaigns, go to the "Look & Feel" step, load the new template, and save.
3. Save the template: This button saves the changes in your existing templates. This option is not available on templates proposed by Qualifio, as you cannot alter those. (In this case, you'll need to save it as a new template.)
NB: Campaigns that use this template won't automatically be adjusted. Changes will only apply to the campaign you are currently working on, as well as to future campaigns. If you wish to apply these changes to your previous campaigns, you need to access the said previous campaigns, go to the "Look & Feel" step, load the new template, and save.