You can choose between design options for the overall project and the design of each page. You can adopt the project settings on each individual page or choose to customize the look and feel of specific pages by unticking the "Same as project" box.
Once you've chosen the level on which you want to apply the settings, you have general styling options for your content elements, the background, as well as the option of uploading and positioning background images for desktop and mobile.
Content Options
Here you can choose the alignment and position of your content, as well as change the page transition speed.
Fonts
Choose two fonts, one for your headings and question texts, and another one for all other text. Font size for headings and questions texts can also be changed. For custom fonts see the article: Add custom fonts
Colors & Style
This is where you change the colors and design of your content elements and overall project.
Transparent Design - With this option you define how your colors are applied on your content elements. Either with a solid colored styling or a more transparent style.
Colors (Text, Elements and Highlights) - Using three colors you can create a unique look for all content elements.
Content Card - You can change the color of your content card (content card is covers the area where the content elements appear) or lower its transparency. Zero transparency will make the content card invisible.
Background - Change the project/page background color covering the whole width of the project pages.
Rounded Corners - With this option you can make the element's corners rounder or sharper.
Desktop Background Image
Image Upload - Upload any image of your choice, just click on the dropzone or drag & drop images to upload them. In order to ensure a seamless user experience, make sure that your desktop and mobile background images are at least 1250×800 pixels and 640×960 pixels respectively. The data size limit is 3 MB for both.
Brightness - Use a black or white overlay on your background to make content stick out more. Slide left from the center to go more black and right from the center to go more white.
Image Alignment - Choose the positioning of your background image by clicking on the arrows.
Image Scaling - You can choose between Original Size, Cover Screen, Fit Height, Fit Width.
Fixed Image on Scroll - By ticking this option, you can make the background image sticky.
Mobile Background Image - You can choose to have different images on Mobile and Desktop by unticking the "Mobile Same As Desktop" box.
Background Image Design Recommendations
Since background images are behind your content and the screen resolution of different devices varies, we recommend not adding logos or photos of people to your background images, as they may naturally be covered or cropped by your content in the frontend. Backgrounds are best used with illustrations, patterns, gradients, or colors only. Visual assets that need to be always visible should be added as an Image content element in your content area in the foreground.
Advanced: Additional Customization Options
It can be that sometimes the general customization is not enough, maybe you want the change the font size of your answers, or perhaps you would like to have more control over the colors and highlights of certain elements.
When that happens, you can easily access additional customization options by clicking on the element you want to customize, go to "Design" and toggle the option "Customize this element only". This will provide you with additional options that you can work with.
If you're happy with how an element looks and you have more of it (eg. Button element), then you can click on "Apply design for all multiple choice elements" to apply that design to all buttons in your project.
If you want to remove the design from an element, then do the same as above.
Click on the element you want to remove the design from, go to "Design" and toggle off the option "Customize this element only", then just hit "Confirm" on the popup.