Join Aaron Quigley for an in-depth discussion in this video Smart positioning, part of Captivate 8 Essential Training.
- View Offline
So at this point we have the basics of working with responsive templates down. We know that in the primary view we can lay out a slide. And then as we move to the tablet view we can change the different elements on that slide. So they appear in a way that works perfect for that screen size. Even for the mobile view we have everything laid out so it would appear properly if someone was accessing this e-learning on their cell phone. We're going to take our responsive design a step further with something called Smart Positioning. For this video, we'll be using the SmartPositioning project which is located in Chapter four of the Exercise Files.
And it'll be mostly using slide number two. Now, slide number two has several challenges that we'll have to tackle. One of which is that we created our own master slide for this back in Chapter two. We've actually titled it Welcome Slide. And we made this by duplicating slide number four. And then taking this blue background box, stretching it three quarters of the way across the screen. As well as repositioning the subtitle and caption text. So, if I go ahead and click to our tablet view. I can see that we have not many changes to this view under the master slide layout or any of the position.
In addition to that, we've got a few other challenges we need to deal with, one of which is this white box. It's being pushed almost completely off the slide. And we're going to figure out why that is and how we can fix it. So the first step is let's go ahead and change this master slide so we can get this blue box to come all the way over to where our president's at. I can see right away that if I drag it over so it's just barely overlapping this red box, that should be perfect. To make this change, I'm going to click away from any item, but make sure the slide's selected in the film strip. On the right hand side in the properties panel, let's go and select Master Slide View. So here we can change the master slide. I'm simply going to click on this blue background box. Make sure that it's selected, use one of the corner anchors. And I'm just going to drag it a little bit further. So we said we wanted to overlap this red box. And I'm going to take it just past the subtitle and the caption text and then release.
I'll click away from the box and then click filmstrip view. So with a few changes we were actually able to change the master slide for the tablet view. Now as I look at the mobile view I can see that that blue box has been pushed all the way off of the slide. And will not actually be displayed to the users. That's great because it means that there is nothing else to change for the master slide. So back here in the tablet view, we're going to use something known as smart positioning. Up to this point, we've positioned every single item in reference to the edge of the slide, or known as absolutely. We've also only used percent positioning, meaning I'm 21% of the way down from the top. And maybe 8% away from the left hand side for this title box. Well we can actually position things based on pixels and even position them in reference to other objects on our slide. In order to see this let's go and just select a slide such as the sub title, I'm going to click on positioning in the properties panel. Under the advanced area let's turn on smart positioning. Now with Smart Positioning on, as I click on various items I can actually see a line that shows me how far they are from the top. And this one happens to be from the left. With these lines visible I can actually grab the end point or the anchor point that it's measuring to. And I can move it around the page and have it be positioned somewhere else. So for example, the subtitle is 21% of the way from the top of the page. But perhaps I'd like the subtitle to be positioned in reference to the actual title. If I drag down the page, every place that I could position this, such as here at the top of the slide, I'll get a blue line. If I come directly below an item and see a blue line, I can release and now my subtitle is positioned at 5% of the distance. Below where the title box ends. So to test that out, I'm going to grab my title box. And I'm going to actually shrink it up a little bit. Make it a little bit smaller. Now you'll notice that when I made that change, my subtitle popped out. That's because my subtitle's now positioned in reference to the title itself. I'll go and drag the title down the page a little bit. We'll see our subtitle move back into position. If I need to make my subtitle a little bit further from the title page.
I can always grab the subtitle drag it down and release it where I like it. So now my subtitle is eight percent of the way down the page from the title itself. So let's see if we can figure out using smart positioning what's happening with this white box. If I click on the box and I see these positioning guides appear. I can see that this white box is actually 90% of the way off the page, and 8% of the way down the page. So, let's try to figure out why it's 91% of the way off the page. I'm going to come back to the primary view.
Okay so in the primary view it looks like we weren't using percentages, but using pixels. And that 707 pixels translated over to 91% of the way off the page for the tablet view. The way to fix this then in our primary view is to find where this is in pixels, and select percent. So its now showing 69% of the way down the page, no longer over 700 pixels down the page. As I move back to the tablet view. I can now grab that white box and reposition it. In fact 69% is pretty close to where it needs to be. Which means that it can just inherit that percentage from the primary view. I also need to make it a little bit smaller. So I'm just going to resize this box by clicking one of the corner anchors holding down Shift. And making it a little bit smaller. Next, I'll click on the logo directly on top of that and just use my arrow keys to kind of nudge it into place. So, there we've made some major changes. We've actually changed the size of the white box and the position of the logo to the white box. Let's go and see if that's working still between our primary view. And now our tablet view and it is. And the reason being is when we're positioning items, I can change the size of the item. I can change the size of fonts, I can change anything I'd like to change on this slide.
And it's going to be only relative to the tablet view. If I come back to the primary view those fonts, those sizes, and those distances will stay the same. So the next thing we need to tackle is just kind of spacing things out a little bit for this view. I'm going to go ahead and move this text down a little bit. And I think that this text should be in reference to the subtitle as opposed to the edge of the slide. So again, I'll grab the anchor point, drag it down so I see my blue line directly below the item I'd like to associate it with. I'll release and I can see that I now set my caption text 2% of the way from the subtitle. Let's just flip through the primary and table view again.
Things are looking great. The last thing we need to tackle is this mobile view. Now some of the changes we made, such as this being 2% down from our subtitle, will help us here in the mobile view. For example, all I have to do now is grab my subtitle. And I'm just going to drag it down the page to leave a little bit of room for the logo. And my caption text is going to automatically snap to where I'd like it. But I'm also going to change my caption text a little bit further from the left hand side. Just drag it over till I line up these boxes, and then we can grab our image. Make our image a little bit larger. And then I think here, instead of having the logo next to the title, we can just grab the logo and its box.
I'm going to hold down the Shift key while I select both of them. And drag both of them at the same time down onto our page. And then make both of them a little bit bigger. And then finally the last thing I'm going to do is just change this title slide. It's got a really large box that we don't need. And so I'm going to grab these anchor points and drag it to exactly where I'd like it. And I think just to make things look nice I'm going to take this white box. And drag it so that the rounded corners are off of the page. Which will make it look it just like a white strip coming across the page. And I'll reposition the logo there.
Okay so we've made a lot of changes to the mobile view. Now let's talk through a few things that are going on here. If at any point you don't want a box, you don't want an image just want something to not appear on a certain view. For example, let's say we didn't want the president to appear on this particular view. All you have to do is drag it off of the slide canvass. So here, even though I can still see it in this view. If I were to preview this project right now. There would be just a blank space here. Our users would not be able to see this image. Yet, if I were in the mobile view and I deleted this image. It would delete it also in the tablet view and the primary view.
That's what's happening with the blue box here as well. It referred to not appear on a particular view, we just move it off. With the rounded box I just made it overlap the edge of the slide. So that it's no longer a box, but will just be a white stripe that moves to the top of our slide. Let's go ahead and move our president image back on here and then head back up. And let's click through all the different views, just to make sure everything's showing up the way that we'd like it to. Now the last thing I noticed, is our continue button on the slide needs to come down to the corner a little bit. And needs to be a little bit bigger. Okay so I think at this point we've got everything exactly where we want it. And we're ready to continue making the rest of our slides responsive.
- Choosing a project layout
- Applying and changing themes
- Adding text, media, and shapes
- Inserting interactive elements and widgets
- Adding audio and video
- Adding closed captions to video
- Using responsive templates, text, and images
- Accessing elearning
- Creating software simulations
- Publishing a Captivate project