14 Design

In this video we look at and change the design of the Riddle.

In these steps, we:

• change the palette
• switch off block instructions
• customize how the block media is used
• discuss custom CSS

Transcript:
Hi there everyone, welcome back to Riddle. Now that we have the content for our poll, let’s look at some design aspects. So this was the one that we’ve been using as an example, and you can see it looks different to the one that we’ve been creating, and that’s because of palette, or the palette that we’ve chosen for this design. Let’s have a look at the palette and a few other design features. So in our Riddle, On the left hand side, click on the paintbrush symbol here to go to the palette. And you can see all these default palettes that are here. The default default is timeless. And that’s what we’ve been having as we’ve been creating. But the one that I used in our example here was the rocket ship.

And that will make it look like this. It changes the font to a default font for rocket ship. It changes the colors. Choose one of these defaults or of course also use your own by creating a palette or using an existing one, clicking on the three dots and then copying and editing it. What that would look like if we do that, so let’s say Rocket Edits, is that within that you can change the font. You can use your own, use a Google, use an Adobe font, for example. And then for each aspect, specify that if you want to. What we can also do is switch on or off the block instructions. And that’s here, if I start the quiz. You can see here it says order the answers.

Now if I disable that, that will be gone. It’s on by default. Okay, what we can also do is look at the images that, as a whole, for the whole riddle, the images that are used in each block; you can decide how they’re used, so there are three options: one is we just have the image here and below us in this case white because that’s the the color used in the palette but you could also change the color; there what you could also do is enable block image as blurred background and that would take the colors from this picture for each block and extract the colors and create a blurred background underneath all of this, so you’ve got a really nice effect, a subtle effect of using those colors and giving it a uniform feeling.

But it’s also slightly warmer than just having a block color; So that’s up to you; You can play around with that. Okay, the third option we can have here is having this picture here as the background for the whole of that block; It works very nicely if the picture isn’t important for the question and it also works and only works if the picture doesn’t disrupt the questions and any other text; In this case, it really does. So it’s not the best for this option. It might work nicely with a different palette; then let’s change the palette to timeless and then click on copy and edit palette. Timeless edits. And then here you can see, for example, it’s much more subtle.

So you can really play around with that and use those default palettes and play around with them or base your palette on one of them. Or maybe you already have your own company or brand palette set up. If not, feel free to follow one of our help guides for working on your own palette and then also your own preset. OK, so, yeah, I’d like to go back to our other. palette i’d like to go to the rocket ship edits palette the one that we created yes customize and i want to take this second option so where the image is at the top but the colors are extracted and blurred underneath okay so that’s for the image then we’ve also got the riddle border radius so that

refers to these borders the four edges and I could you can see make that rounder and rounder it goes anything up to 50 or I could set it to zero and then it’ll be a complete right angle but i like the original of 24 so you can use these up and down arrows or type it in here okay there we go and then the main section of this of these palette settings or the biggest section, Let’s say, are all of these colors. So you can change the text color. You can change the answer background color. You can change the right answer, wrong answer. In this case, okay, we don’t have a right and wrong answer. It’s a poll, so bad example. But you could change the button background colors.

So for example, here we’ve got the choose color. Let’s just change that for now to white. And then it fits perfectly with the background behind it. And we just see the word. You can see it very subtly, the button actually there around it, the radius. But you can really play with this and set it up how you would like it to be. Let’s take it back to what it was. I think it was this. Okay. Good one final step that you can do with the palette is add CSS so you would scroll down to custom CSS, click on edit, and then in here you can input any CSS that targets any specific element either in the riddle as a whole or even in a specific on a specific block, this specific part of that specific block-the sky’s the limit there in terms of using custom CSS.

Feel free to use our snippets that we have or input your own using all the classes that are also listed on our help pages. Okay, so that’s CSS there if you’d like it. In the next clip, we’re going to look at some poll-wide settings. If you have any questions for now, feel free to write to us at academy@riddle. com or in our support chat on our website. And thank you very much.