Lessons

Lesson Info

The Power of Widgets

Next thing we're gonna do here is we're gonna start to talk about other types of widgets. There are... there are a lot. There really are. And it, like I said before, there's not just what you see in the program, there's others beyond that. We need to get to, where are we going here... Let's go back to the plan mode. We need to get to the portfolio page. So double-click on the portfolio page. I wanna make sure that we see the whole page here. This is gonna be important. So come under "View," "Fit Page in Window," and now we're gonna go out here and we're gonna put a slideshow on the page. We have a lot of different types of widgets we can work with and these are just pre-built options that you can drag out, you can start to add your own content to, a lot of these are based on things like JavaScript, so they work, you don't have to code anything, it just works, it's awesome. And a lot of these - actually, all of these, are responsive which means they are gonna scale based on your screen ...

size. Come over to the Widgets Library on the right, and I wanna explain the difference between these, but we have "Compositions" and we have "Slideshows." "Compositions" and "Slideshows" are actually very similar. They're trying to take a series of objects, like a bunch of pictures or something like that, and show and hide that content in a single area. Not necessarily, but just kind of show and hide content. Slideshows are purely image-based. So if you want to have a series of images and just fade in, fade out, one shows, one hides, that kind of thing, that's gonna be a Slideshow. Slideshows can have captions, they can have arrows, they can have counters, all kinds of things. They can go full-screen. But they're gonna use images. Now if you look at a Composition, I'm actually gonna drag one out, I wanna show you this. So I'm gonna grab the "Featured News" Composition here, drag it out, you don't have to, you can just watch if you want. These are awesome. These are, if you have a lot of information and you want to put it in a small area, you can use something like this. Great thing about these is that each of these little areas right here, if I click on these little target or trigger, rather, if I go to this trigger, look what happens to the right over there. It's just showing and hiding content, but it's a great way, like I said, it can conserve space, have a lot of content in one space and make it simple for you. Out there, for this thing called the target, you can put videos, you can put slideshows, you can put all kinds of stuff in there. These are not bound by just image content, that type of thing. And what's great about these too is that we're looking at it by clicking on it, if you take a look, and yeah, great, it's showing and hiding, but that's not the full capability. If I go preview it - I'll click on "Preview," watch how it actually works. You're gonna see. This is the default, so it's gonna do this cool slide-y or fade-y thing, rather, and you can do all kinds of stuff with this. It's crazy. We don't have to code that, it's done, bam, it's awesome. Alright, I'll go back over to portfolio, and delete that. So I'll just delete it. And we're gonna drag out a slideshow for an image. So come to "Slideshows," open that up, you'll see "Blank," that means there's nothing in it, obviously, blank, you're gonna see "Basic," "Basic" actually has like three images in it that are sort of like placeholders that you can look at. "Fullscreen," if you want to have a full-screen slideshow running behind everything, that type of thing, you just drag out "Fullscreen," put your images there, and you've got it. You can also see "Lightbox," "Lightbox" has thumbnails, and if you click on a thumbnail, the bigger image is gonna come up to the top, and it's gonna hide, or dim, everything around it. So it's gonna kind of fade everything with like a darker color, so you don't see everything in the background. And then "Thumbnails" are something, it basically just does this, watch, you have a bunch of thumbnails, and as you click on them it will fade, or hide, the content out here. And it's an image, so you're gonna fade or hide an image. And these thumbnails can go anywhere. This is actually pretty awesome, you can organize them, I could take the entire thing and say, let's do it that way, let's move it over here, you can do just about anything you want. Alright, drag out a "Blank," slideshow. I just wanted to give you kind of a run-down of what all those were. Drag out a Blank slideshow, drop it out there, our job now is to first add our images. Your images can be in a lot of different kinds of formats. You can do like SVG, PSD for Photoshop, you can do .jpg, GIF, the list goes on. You need to make sure that if you're gonna have the slideshow show at a certain size, you want to have the images be big enough, large enough in dimension and pixel data, so you don't want to have an image that's this big, you know 100 pixels by 100 pixels, and then stick it in a slideshow and have that slideshow stretched across the entire page, because like every program, it's not gonna look good. My point is, you want to fix up the images, you want to make them before you get to this point, before you go to put them in, obviously, and then after you put them in, Muse is just gonna fit them in this, and it's gonna fill up the frame there. We're actually gonna make a slideshow that's gonna go all the way across, and it's gonna be responsive. It already is, but we're gonna do some things to it. It just means that the slideshow itself is gonna do this. I wanna make sure that my images are big enough to look good so I did that, I'll click on the folder here, if you have a series of images you want to use right now you can do that. I'll click on the folder and what you wanna do is make sure they're about the same dimensions, cause sometimes you'll put images in, it'll actually use black-boxing, it'll kind of fit them in there, do some different things, I try to make sure they're about the same size. I'll go to slideshow, and you'll see that we've got a bunch of images here, I'm just gonna select them. These are PNG and SVG, like I said, we can bring in a bunch of different formats if we want to. Click "open," and it's just gonna take them and load them all in there. Now it's filling the frame proportionally, which is good. That means that we aren't gonna get the black boxes, but if you have so many images that are smaller, some that are bigger, and this kind of thing, they're all gonna get fit, so you gotta make sure, like I said, they're about the same. Now once we add the images, we will go out there and start to move it around and change the sizing, et cetera, but look at all the stuff we have here. This is insane. A lot of these slideshows you're gonna see that we can, if you don't want to fade between images, or content here, we can use a horizontal slider or a vertical slider. I'm gonna do horizontal, just something different, I get sick of the fading. You can set up a transition speed, how long it takes to go from one to the next, you can have it auto-play, it's automatically set up to play, sometimes you don't want that, it's gonna say three seconds, resume after three seconds, play once, you can turn that on, say just play the one time. Shuffle the stuff in there, if you have enough images in there, maybe you're a photographer and you want to slideshow this stuff, you want to maybe shuffle it. I don't know, it depends. "Enable Swipe," that's awesome. That just means that on devices, like your phone, iPad, et cetera, you're gonna be able to just take your finger and swipe, so that's going to be able to swap or change from one image to the next, that's just done automatically, which is great. We can go to "Lightbox" mode, which we don't want to do. I mean, we could just drag out the Lightbox slideshow out there, but that's gonna basically make it so if we go to one next it's gonna cover everything up with a darker background, which we don't want to do. And we have all these parts. We have "Captions," "Counter," you can actually turn on "Thumbnails," this could be useful because while you're editing this thing, while you're building it, sometimes it's kind of hard to see what's what, and I've got four images in there, and we're gonna create captions for each one of these, so I would suggest while you're building it, turn on thumbnails, that way we can kind of see what's going on. We'll turn them off later, don't worry, we don't need them out there, but it's just for now. And we've got "First," "Previous," "Next," "Last," "Counter," all kinds of things. And then "Edit Together," you can actually make it to where you edit each one of these independently. Each one of the image slides in there, if you will. I think that looks pretty good. We don't really need to do too much. I don't adjust a lot typically, I don't have to, so click away so you hide that menu, and then click back on the slideshow. Click on these thumbnails, just click on one of the thumbnails, and you're gonna select the whole thing. We can drag them off a little bit here and just re-size, there's a box around all of them, just drag the box. Grab the corner or side and just make it a little narrower, that way we go like this, we're not gonna drag each one of these thumbnails independently, but you can drag them to re-order them if you want to. That's kind of neat. And then, I do this by habit all the time, if I click off, if you want to select something you've got to click to select the whole thing, click to select that object again, it's like a group. And you'll notice that as I click on these thumbnails, we get to see the actual image, which is great, and that's gonna help in just a minute. Alright, hide the "Widgets Library" panel, get that out of the way, and we're gonna come out to this Hero image here, this big image, click on it to select it, and what we want to do is we want to take this thing and we want to stretch it to fit. Now this is where you've got to be careful because your images might be too small, they might look bad, the images you put in there might be big enough but they might be too big in file size. You gotta test things out to see how slow it loads and things like that. Muse is gonna do a pretty good job trying to optimize the content you give it, but you still have to try it out. Come up top, and if you remember, we're still dealing with responsive web design. All the slideshows are responsive now. If you just watch for one second, I'm just gonna drag my scrubber. I'll drag it to the left, and watch what happens. It's gonna scale, that's all. That's the respsonsive nature. I'll click back in. Now if you click to select the Hero Image, come up top, you're gonna see that we can do the same two things we've been talking about. We can pin it to a side or the center, or we can come to re-size and we can say, "you know what, right now, all the images are gonna go responsive with height, they're gonna do this proportionally as the screen gets narrower," OK? We could just say, "you know what, do none," which is kind of dicey, cause it'll stay the same size and get cut off. Or "Stretch to Browser Width," why don't you choose that. Go up there and choose "Stretch to Browser Width," it'll just do this, it really depends on your design. If this doesn't look good in your design, you're not gonna do it. Maybe you do go with the proportional, that type of thing. I'm gonna drag it down a little bit so we have a little bit of room, and you'll notice that it looks kind of like thing are letter boxing, and see the gray around and all that, on mine anyway? Sometimes you'll find that it just doesn't look right in Muse. It's great for building, but you'll need to preview these. You really do, you've got to go look at it in the browser, or go look at it under Preview. We'll do that soon, don't worry. Click on a couple of the thumbnails over here, you're probably going to have to click a few times to get to them, and you'll see it's going to change them out. Each of the thumbnails, we actually have a caption, and I have these arrows and a counter box down here. You probably see the same things, if you didn't turn them off when we first set it up. If you click on one of these, you can just do whatever you want with it. These are just text boxes, just move it around, whatever, it's always gonna stay there. Let me undo. It's always gonna stay there, at least for each slide, it might move because it's responsive, and things like that, but I don't want the counter. Any one of these you don't want, just press delete or backspace, it'll turn it off. You can always turn it back on if you go back to the options. To go back to the options, don't forget, you can click on any widget, click on that blue circle up in the corner of one of these, and you'll see those options again. I'm gonna click a couple times to grab that counter, and just delete, backspace. Drag the caption right here, drag it up, and we can put this wherever we want. I'm gonna stick it right here, that type of thing. We can also grab these, I'll put this on the left side, and maybe right there. It'll show me smart-guides when it's center-aligned. As you start to use them it's gonna start to move, or switch slides. There we go, three lines across will show you that it's horizontally aligned, that's great. And there we go. Now the last step here, aside from checking it in responsive to see how it works smaller screens, is to change the captions. Because, you know, we want those to actually say something, not just placeholder text, right? So if you have one of them showing, you can just double-click on the caption, come in there, and type something in. This one I have is already "Lorem ipsum," and the caption is "Lorem ipsum," maybe I should keep it there, right? Alright, I'll go "Project," and I'm looking over there at my thumbnails, this is the second project in the thumbnail list, so I'll say "Project 2." If you want, you can go do text-formatting right now. Go ahead, select the text, pick a font, size, color, the box, the textbox, change the fill, all that stuff, but you have to select the box. Once you do it for one, it changes for all of them. Now to change the caption for others, this is why we had the thumbnails out there so we could tell which one's which, I'm just gonna go out here with the selection tool selected, and click on one of the thumbnails, double-click on the caption to get to the type tool, and we're just gonna call this "Project 1," and we're just gonna name these, that's all. You just put in whatever you want, and you gotta remember that that text box right there is gonna move and stretch and squish, and all kinds of things, based on responsive design. Based on what it's gonna do. So I'm gonna let you fill out the rest. If you click back on the black arrow, with the caption selected, look up here, you'll see that we have the pin. We can pin this just about wherever we want, the same thing, left, center, or right. I'm gonna probably pin this to the left. What's gonna happen, if we don't pin objects when we first look at it in the large size, if we don't pin them, they're gonna start to gradually move as the screen gets smaller. The reason why, I wasn't gonna do this, but I'm gonna tell you, OK? The reason why is because all the objects in here as far as responsive web design and Muse, they are actually aligned left, they are aligned to the left, and they are a percentage from the left edge. So this object might be, I'm just guessing here, like seven per cent from the left edge. And if you think about it, seven per cent of this big, is probably gonna be larger than seven per cent of this big. So that's why they tend, why all the objects you see tend to kind of creep over to the edge if you don't actually pin them or stick them. If I choose pin left right now, I've got pin left, center right, if I choose pin left, it's gonna say "I want you to stay exactly that distance from the edge of the page." The left edge, cause I pinned it to the left. Hopefully that makes sense. I can do the same thing to these buttons. Click, pin left. Click, pin right. Just whatever side, whatever area it's on. And also you're gonna notice that these text boxes are set to scale, like this, they're gonna scale horizontally. If you look up there under resize with one of them selected, you'll see that they are set to responsive width. They're small enough, you could actually turn it to "None" and just say leave them the same size, and eventually they're just gonna come closer, right? If you set them "Responsive," they're already there, they're just gonna get narrower, the narrower the screen gets. So it's up to you, you can try either way. Let's take a look at it. The last step here is, once you're done with the actual captions, and you don't need the thumbnails anymore, you can click on it right there and just press delete. All you did was hide them, you're not really deleting them. That's just a quick way to do it. Alright, let's try it, let's see what we get. So grab the scrubber once again, we're trying to make sure it works in responsive, so grab the scrubber and let's see what it looks like. Notice that they are pinned, the images are still there, they're all doing their thing, but the text boxes are getting narrower. If you're cool with that, then that's fine, great, go for it, I think we're done. But if you decide that maybe further down here you want these to be in a different position, you want this to be taller, what do we do? We're gonna make a design change, right? So that means, the first thing you do is, set a break point. So I'll come up here, set a break point, and we don't have to, that's just if you really want to make a design change. I go out and click, click, see, you get it, and maybe resize, maybe move position, whatever you want to do. And that way, from here on out, it's gonna be that size and smaller, cause it's scaling. And once I get a little bigger, watch what happens. Bam, it moves back, remember. So that's what's happening.