Hey there, Anderson here with another Evolve update for you. Today we're going to be looking at device-specific theming and overrides. This helps to ensure that the content you create is delivered exactly as you intend it when a learner is accessing it on a desktop versus a tablet versus a mobile device. Ready? Alright, let's get started.
So the first thing we're going to look at is how to set themes that have different presets depending on the kind of device that is accessing the piece of course content. We'll go over here to our theming dashboard. I've got a dark theme that I want to make some adjustments on. You'll notice up in the top left corner there are these three device icons, and these control which device you are editing that theme for. We default to the desktop as the first device.
When I'm looking at this on tablet, I may decide I want some of these headings a little bit bigger or a little bit smaller. So I can come over here to the theme panel on the right, and anywhere I see this little device icon set, it's highlighting the active device, reminding me that if I want to switch I need to switch it up on the top left, but also showing me that this particular element is something I can customize for a particular device. So I want to come down and customize the size of the heading when it's being shown on a tablet. I actually want to make this a little bit bolder, so I'll bump that up to 90 pixels.
Now what we can see is that we've got this nice, bold, clear heading over here. When I switch back over to desktop, the heading reverts to its previous size and shows desktop selected. Same thing on mobile: as we haven't made any changes on mobile, that's still at that default value. So anywhere this theme is used, I've got some nice custom presets based off of the device.
Now, what if I want to go into a particular course and customize this even more, just for that course? You can do that too. We're going to use the same kind of icons and options, but on particular elements of a course. So let's go look at how to do that.
For this we'll take this example course, and again, we have our device options up at the top. Let's look at this particular element here, the collage at the top of the course. I bump over to tablet and that pops right below, as I would expect it to reflow, but maybe I wanted to have a little bit more padding around that. So in the design for that particular element, I select the element, and in design I can come down to the element spacing. You'll see we've got this indication here that I can put particular values in. So I'm going to say I want a little bit more vertical padding and a little bit more horizontal padding. And that's only going to impact how this image is rendered when we're looking at it on a mobile device. Come back over to the desktop, and we'll note that the padding reverts exactly to what it had been before.
So this is a really great way for you to be able to customize and ensure that content is reflowing and appearing exactly like you want it to on these different devices.
One more quick tip that I'll show you: we'll go over to mobile device for this one. If you've got a multi-column layout, you can actually control the order that those columns appear in, whether that's stacked, which is the default, or maybe you want to reverse them, or show them side by side to force the behavior. So I have the row selected. I'll go into the design part of the tab here, and here we've got the column layout specifically for mobile. I reverse the column order and then that jumps up to the top there, or I can change the column layout and it will reflow the columns in that way. And this isn't impacting what it looks like on desktop; they're still stacked there on mobile, and rendering differently on the desktop device.
So those are the ways that you can use device-specific options when you are creating themes and when you are editing courses.