The Style tab in QSM gives you full control over how your quiz or survey looks on your WordPress site. From selecting pre-built themes to customizing CSS, this tab ensures your quiz seamlessly matches your website’s design and branding.
To customize the aesthetics of your quiz or survey, navigate to the “Style” tab in the quiz you have edited.
Choose a Theme
When you navigate to the Style tab, you’ll see the first option of Themes to change the look & feel of your quiz. The Themes option allows you to choose from QSM’s pre-built quiz themes.
Each theme comes with a different layout and style, and it comes with the settings to “customize,” so you can easily customize the theme to match your brand colour & style.
To preview each theme, hover over the particular theme and click on the Live Preview
To add the theme into your quiz or survey, click on the Activate button
Once you’ve activated the theme, you can click on the Customize button to tailor the changes.
👉Note – You can learn more about each themes and it’s installation from here – QSM Themes
Customize Quiz Appearance
Under the Style section, go to Appearance tab.
The Appearance settings let you customize the default QSM theme. You can easily change colours, fonts, and button styles, or adjust the overall layout.
This option is available with the QSM Ultimate Add-on.
👉Note: To unlock these advanced styling options, you’ll need to upgrade to premium.
Add Featured Image
Under the Featured Image tab, you can add a image to your quiz welcome page, it will enhance your quiz’s visual appeal and align it with your brand’s style.
To upload an image, paste the image link in the input field (if you have the URL of the image)
Click Save Image to update it. You’ll see the preview of the image you have added
But, you can also upload the image from WordPress media library or own device
Custom Styling with CSS
The CSS tab in the Style option allows for custom styling of your quiz or survey. If you know coding and want to change the aesthetic of the quiz in specific personalized way then Custom CSS option is suitable.
You can input the code in the text editor field provided and Save the Quiz Style
If you want to know more about CSS in detail, then check out this documentation – Editing Design Styles (CSS)
Still stuck? How can we help?
