Paul Davenport | 03:16
Add Buttons to a Frame. Choose to; link your Buttons to other pages, anchor to other Frames on your page, slide down your Action Section, or open up external websites in a new window. Add height above and below your Buttons to improve your visual design.
AI Website Transcript
"In this case, I want to add a button underneath here. In here, I could have another child frame and just click it, and it'll go to the top. As you know now, I'm going to hold the option or alt key, and I'm going to drop that frame straight to the bottom. I'm going to come in here and add my button. Now with the button, let's give it a Colour. To begin with, I might just give it a title. I'm just going to say this, Click Me for now, and let's just make it in our space cadet blue.
Now in here, I can link it to existing pages. This is our link list of existing pages we've already created. Or I could anchor this to another place on the page, to another frame on the page, where you can see, there's no frames with anchors in on this page. Let's just click tick here for now, and I'll clone this particular layout. And then, I'm going to call this one... I'm going to give this an ID so that we know what to anchor it to.
I'm going to go to advanced, and I can just call this 123. I could call it anything, right? If I go back to our button now, you can see that we have a nice anchor. When someone clicks this button, they're going to roll down to that next frame, and you can see an anchor. What it does is put a hash, and what we really want to do is then click scroll to.
Okay, so it's going to scroll to this hash. You can see it's adding classes. We're going to talk about what classes are in a little bit, but when I set up a layout for the first time, I need to take a gamble that the content users might forget to add the link. They might come in here and forget to add the link, and they might not know what an angle link is.
So, when I set up a new layout, I like to set it to the action section. Basically, when someone clicks this button, it'll roll down our action section from the header. That way, if a content user forgets, it's always going to work. Right? So, we're just future-proofing mistakes there. Setting up a new layout, put it in action section, top advice. Then, we've got our icon. Well, this, I'm using an arrow, so I'm going to put the right arrow. And normally, it's best practice... Oh, often common to have your icons to the right.
Let's go and see this here. My icon is on the right, but with the Alio theme, it is a bit quirky that we have our icons on the left. And you know what, I'm going to be using this blue for now. So there, we have a setup. Now, this second frame that I use to show the anchor, the second layouts that I use for the anchor, I'm just going to delete that."