LAYOUTS TO BE BUILT

"Watch this now. We'll just jump over to the Alio theme. This is what we're going to be recreating. You can see here our initial banner. It's got lots of effects and animations in there. And that's because I've designed Alio specifically for the five-day challenge and specifically for this class, so we can show off all the features of the editor so that you'll be able to use them for your designs and literally replicate anything and also be confident to build from scratch.

Okay, so here is the Alio theme, and you can see there's a couple of things going on here already. We've got move right on scroll, we've got a bit of a slider. Well, this particular banner with the shift down effect, that's going to be in the advanced class following this one. But here, you can see quite a signature of the Alio design where we've got our neutral, which we know in the background, plus we've got this white card on top with the shadow.

We'll look more into this. We've got a rotating effect. Notice how these on the right reveal on scroll. Let's have a look at that again. It reveals on scroll. And we've also got these cool extend lines. All of this is super easy for you to do. You're going to see me build this. Again, this one is going to be on the sessions later today after we've done the masterclass. Obviously, widgets you get. This is our hidden font 12, as you will know if you've done the fonts class. And here is where we've got this parallax motion. So, we're going to be looking at that at the end of this class.

Let me just jump over into another tab that I've prepared. This is exactly what we're going to be learning right now. You're going to see how I build out this column structure. And in here, we're going to put a background image, a background video, and also a slider. Notice how they're all the same heights. We're going to be looking at that. Then, we're going to capitalize on the work that we've done and turn our light theme into a dark theme. Your content editor are going to love you because we're going to be building out these layouts as we go, so that all they have to do is click to drop them onto a page.

Then, we're going to turn that layout into this two-thirds, one-third where we've alerted alluded to that before. You can see this makes a nice news and grid layout, but you'll see here we are also going to drop in a shop this time, and we'll also drop in a map. Again, that all nicely aligned at the same pixel height. Then, we'll convert that one into a dark theme. And then, we'll go through, and we'll turn this into a grid. We'll have a video two-thirds, shot one-third, and then we'll have an image or we might even put the slider in there. We'll see how it goes.

And then, we'll have our map as the two-third. And again, we'll capitalise on the work we've done turning that into a dark theme, building out these layouts as we go. Then, we're going to finish the session showing you how this parallax works, but showing you how we build these particular cards. So, there's a few cool things going in there. Again, we'll capitalise it on the work we've done and save that to a dark theme. And then, I'm going to show you how we inverse the layouts. We can again, very quickly, build on the work that we've done, so our content team have got lots of these layouts, and they're all just going to work. Okay, so let me just jump back over into our editor.

As you know, MOBLE is a website builder for design and a CMS for business all in one, all in the same editor, so that designers can go and build anything, and content editors could go and edit everything. And it all happens in these two tabs, design mode and business mode. Well, now, I'm going to start off in design mode because we are going to build from scratch. So, you presented with what we call our frame tools. That is at the top left, and you can see in the frame tools, I can do a whole bunch of things.

Well, first, it opens the frames drawer. And in the frames drawer, I've got a whole bunch of UI tools here. I can control all the background Colours, background images. I can control those effects and animations like we've just looked at there with parallax, I can specifically look at the frames, which is what we've alluded to in the essentials class that preceded this.

And we're going to have a look at advance. We're going to have a look at some of the advanced settings, which is how frames might behave on mobile devices. Do you want to show it on mobile, show it on desktop? And then, we're going to have a look at the borders, shadows, and a bit more behavior on how we can do things like widgets. Do we want slider dots or do we want arrows? What speed do we want the sliders to play at? Okay, so there that covers a quick introduction."