Design, colors and backgrounds

Design settings are per quiz. They live in a drawer, not a tab, and they control the look of the whole quiz. Backgrounds can also be set screen by screen.

Open the Design drawer

1. Open a quiz in the builder.
2. Click the sliders icon in the top bar, labeled Design settings.
3. Change the options you want.
4. Click Save at the bottom of the drawer.

Nothing in the drawer saves on its own. Your changes are kept when you click Save or move on with Next in the top bar.

Design options

Layout

Layout controls do not appear for the Full Screen template.

Option	Default	Notes
Card or Full width	Card	Switches between a framed card and a full width stage.
Card width	640 px	Slider, with a unit of px or %.
Min height	auto	Slider, with a unit of px or vh.
Inner width	auto	Slider, with a unit of px or %. Limits the readable column inside the container, which helps with wide cards or full width mode.
Show card border	n/a	A toggle shown only for some card style templates, such as Classic.

Template

Shows the four free templates and the active one. See Templates.

Colors

Color	Default
Brand	#4F46E5
Background	#FFFFFF
Text	#0A0A0B
Accent	#F59E0B

Background opacity runs from 0 to 100% (default 100). The Reset link restores the default colors.

With Full Screen, the color fields read Brand, Background, Dark tone and Text, and Text defaults to #FFFFFF.

Typography

• Font: Default, Geist, Inter, System Sans-Serif, Georgia or Courier. Geist is bundled with the plugin. Inter is not bundled, so on a visitor’s device it falls back to the system sans-serif font unless it is installed there.
• Text size: 70% to 150% in steps of 5 (default 100%).

Button style

Rounded (default), Pill or Sharp.

Animation

How screens change: Fade (default), Slide or None. Visitors who have reduced motion turned on in their system settings see reduced animation.

Background images and overlays

You can add a background image in the Design drawer and on individual screens.

1. In the Background section of the drawer, click Upload background and choose an image from the WordPress media library.
2. Once an image is set, an overlay color picker and an Overlay slider appear.
3. Set Overlay from 0 to 100%. The default is 0, which disables the tint.
4. Click Save.

For Full Screen the section is titled “Full-bleed background”.

Backgrounds per screen

The drawer background applies to the whole quiz. To give one screen its own image, use that screen’s properties panel:

Screen	Where
A question	Questions tab, select the question, Background section, toggle Custom background.
The intro	Intro tab, Background section.
The lead form	Form tab, Background section.
A result	Results tab, select the result, Background section.

Each has Upload background and Overlay opacity (0 to 100%). Use Replace background or Remove background to change or clear it.

Tips for legibility

• Add an overlay whenever text sits on a photo. A dark overlay at 40% to 60% is a common starting point.
• With Full Screen, use a dark overlay color. Text is white by default and a light overlay washes it out.
• Check contrast between Text and Background after changing either one. Lowering Background opacity can reveal whatever is behind the card.
• Raise Text size toward 110% to 120% for quizzes read on phones, then check that long answers still fit.
• Keep background images simple. Busy patterns compete with answer labels.
• Use Image fit set to Contain for images that must not be cropped, such as charts or logos.

Note: The Branding and Defaults options in the plugin Settings screen do not change how new quizzes look. Set colors and fonts in each quiz’s Design drawer.

Related

• Templates
• The Questions tab
• The Intro screen
• Results tab