Quiz Design Settings
Font: You can edit your font styling by using the options in the Font section. There are options to choose your font-family, size, color, alignment and more.
You can choose different font options for Questions, Subtext or any Button styles by switching to them from the Element dropdown.
Desktop vs Mobile:
Changes to the design elements will do so across both desktop and mobile, with the exception of Answer Button sizing and margin. By default, the sizing of Answer Buttons will be set up to accommodate desktop and mobile, but if you would like to edit them, you can do so by selecting the specific type of Answer Button and using the Dimension and Marin settings towards the bottom.
The Global Design Settings allows you to preview how your design changes will look on desktop and mobile by choosing the view from the dropdown.
Background image: To add a background, go to the Background section of the Layout. Toggle ON “use image” and select the image you would like to use from the dropdown. You can use the dropdown options under “repeat / size” and “position” to place it how you would like it.
A similar method can be used if you would like to use images on buttons.
Borders:
You can set the border for buttons or the layout using the Border design options. Something as simple as border radius can really help a quiz look more branded.
- If most of your buttons should look a similar way, start by editing All Buttons (inherited Base Styles) to set the changes you need, and then edit each specific Answer Button type after.
- You can change Hover, Selected and Selected+Hover states for buttons by clicking the section label dropdown for each design element.
- You can always edit the quiz further in the normal editor after you finish the quiz, including using Campaign and Account styles. If things aren’t looking perfect in the Quiz Builder preview, don’t sweat it!
Multi-Select Buttons
If your quiz contains questions that allow more than one answer, these are known as “Multi-select” questions. You will need “Select” buttons, as well as a “Next” Button.
When customizing the design Multi-select buttons, it’s important that quiz takers can easily tell when a button is selected vs deselected. By default, the quiz will use checkmark images to indicate that an answer is selected, but you can also easily stylize the various states of your buttons using our Campaign Styles.
For more tips about styling Select Buttons, read How to Make Multi-select Answers
Once you generate your quiz, you will be taken to the main editor for the campaign. This is where you can use our drag and drop builder to add additional questions, modify questions, and more.
When you click inside the editor, every item is Drag and Drop, you can move the buttons around and when you click on them you can modify the text, color, fonts, and more on the left panel.
Your next step is work on your quiz logic and other settings. You can find that guide here!
Want to get more from Digioh?
Get the playbooks leading brands use to convert more visitors into revenue.
Browse the Playbooks ?Platform Tour
See what else you can do with Digioh in our self-guided platform tour.
Take the Tour ?