DAY 03 | EPISODE 02 | QUICK CLIP 19

FRAMES DRAWER

Paul Davenport

  Paul Davenport  |    03:05

Now you're acquainted with the main tools of the Editor, it's time to summarise the features of the Advanced tab within the Frames Drawer. Here, you'll find a collection of powerful, but common, tools that you will use time and again in your web design journey, so... it's important that you know exactly where to fine them.

   AI Website Transcript 

"And finally, just surprising where we're up to right now. Let's just look at the advanced tab. We've looked at anchor, haven't we? We give a particular layout or particular frame within the layout and ID, and then we can anchor to that. And you can anchor via a button or via a text link. I could even make an image, an embedded image. I could also link that and anchor to that too, so there's anchor ID. Mobile devices we haven't covered yet, but you can say, "I don't want to show this particular layout on mobile." In which case, that frame, everything within that frame now won't appear on mobile.

When you do have quite large pages, you might pick and choose what you want on mobile and tablet. If I wanted this on only mobile and tablet, it would only be on mobile and tablet. That's obvious, but I can also control the stacking here and say when this response is down, these are going to be single stack, but I could choose those to be fixed, so all three will appear on mobile. I'll still get one, two, and three, or I could double stack those. Okay, so that's mobile behaviour.

Now, borders, we're going to look at borders in the final part of this intermediate session. We've looked at shadow, we've looked at particular behaviour. Notably, you can also change the speed of that slider if you want to. Scroll down arrow, we're going to look at in the banner episode. When we build out our Alio banner, that allows us to put an arrow, which we click, and we naturally scroll down from a banner.

There's a few behavioural properties in here. We've alluded to overflow dynamic text we covered in the menus and navigation, whereas if I have a widget, I can control the hover over text Colour, I can override our core settings for Colour, and we've looked at classes. So, we really have whipped through there in a really cool way to show you all of these features for that they're in the editor that you can now be confident to use.

I think there's enough there to say, right, if you want to build a custom layout or if you want to have a go at just looking at any other website in the world, now seeing if you can recreate that and test it on all devices, I think right now you actually have got the ability to do that. But just to finally complete this episode in a nice way, let's now go and have a look at this particular layout from our Alio theme, and let's set this up as a nice way just to wrap this intermediate session."

More Quick Clips