Octane AI features a large range of design settings that help make your quiz as on-brand as possible without requiring any code (advanced developer options are supported too).
Use this guide as a tour through Octane AI's design settings and the things you should know.
💡 What you'll learn about
Locating design settings (jump to section)
Working with fonts (jump to section)
Images in quizzes (jump to section)
What is max content width for? (jump to section)
Locating design settings
The vast majority of Octane AI's design settings can be found under the Design tab in Octane AI's quiz editor.
Here's a quick summary of what each section of the Design tab does.
| What it does |
Layout | Set the alignment of elements in the quiz as well as content width & autoscroll. |
Typography | Set the font name, color, weight and size of text in your quiz. |
Colors & styles | Set the color of elements in your quiz (except text, which is in Typography). |
Background image settings | Upload a general background image for the quiz. |
Spacing | Edit the vertical spacing between elements in the quiz. |
Transitions and animations | Toggle page & button hover animations. |
Custom CSS | Set custom CSS class names for elements in the quiz. |
Answer display settings
Design settings for answers can be found in the DISPLAY SETTINGS menu found under ANSWERS in every picture choice question.
These settings let you change:
Image ratio: the shape of the image answerImage scaling: how your image file fits the answer spaceText position: where the answer text appears in relation to the imageContent width: how large each image answer isAnswers per row: how many image answers are displayed per row
The content width of answers as well as how many answers per row can fit is related to the size of the space that the quiz is published in.
Regular text-based multiple choice questions will have the option to select what kind of text-based options the question displays.
Product display settings
Design settings for product appearance can be found inside of content blocks. Click inside of a RESULTS PAGE, then click into a CONTENT BLOCK holding products to find its DISPLAY SETTINGS menu.
These settings let you change:
Image ratio: the shape of the product imageImage scaling: how your image file fits the product spaceProduct display: the formatting of each productContent alignment: the alignment of content in each productProduct size: how large each product isMax products per row: the maximum number of products per rowOptional product information: toggle the information that displays per product
Much like answer content, the number of products you can display per row may depend on the amount of space your embedded quiz allows for.
Working with fonts
Quizzes have 3 options when it comes to fonts:
Inherit font settings from your website
Manually assign website fonts to quiz content
Use the quiz's default fonts
You can view exact font sizes for quiz elements here:
💡 Previewing custom fonts
Most custom fonts won't be displayed inside of the quiz editor or the quiz editor's preview, since the font files are present on your website.
To preview quizzes with custom font settings, publish the quiz in a page on your website first such as a hidden or unlinked page.
Inheriting font settings
To inherit font settings, simply to go to:
Design > Typography
Under SETTINGS, you'll be able to check an option labeled "Inherit font family from destination website".
When using this setting, fonts will be applied to your quiz according to their assigned hierarchy in your website's theme code.
In some cases, fonts may not apply the way you intend them to, in which case we recommend using the next method of manually assigning fonts.
Manually assigning fonts to quiz content
In the Typography section, every piece of editable text in the quiz also has an option labeled "Use custom font family".
By checking this, you can type in the exact font family you want to apply to that section of text in your quiz. The name of the font as it appears in your website code should be used.
You should avoid using the INHERIT FONTS option if you're also manually assigning fonts.
Images in quizzes
Background images in quizzes can use a different version for mobile vs. desktop devices. Currently, only background images can use this option.
Full-page quiz embeds are recommended when using a background image. This is because the shape of your quiz embed will flex with the size of the space that the quiz is shown in.
When quizzes use page body embeds, this results in a quiz space that constantly changes with each device and browser window that views the page. This happens in full-page embeds as well but to a much lesser extent, helping your background image keep a more consistent aspect ratio.
For details on image sizing and formats, check out this article:
What is max content width for?
The LAYOUT settings in your quiz allow you to set a max content width.
This setting is important for page body embeds, where the width of the embedded content area should match the max content width.
Making the max content width exceed the size of the page's embedded content area won't make the quiz larger than what the page itself allows, so the max content width should only match the content area of the actual webpage.
If you're unsure of what this is, you can leave it at the default value.
