Understanding the Position Panel in Adobe Captivate

This video will cover the use of the position panel when your slide objects are either unlocked from fluid boxes, or if you are using Breakpoint responsive design mode.

You can still design responsive design using Breakpoints in Adobe Captivate 2017 and newer by switching from the default of Fluid Boxes to Breakpoints. You can do this from the Project drop down menu and selecting Switch to Breakpoint Mode. In Fluid Box Mode you can continue to use unlocked objects on your slide in much the same way as in Breakpoint Mode. Personally, I refer to this mode as Single Point Mode and it offers some nice advantages over the other two responsive design methods. Mostly it centers around the ability to still have objects over top of one another, but also offers the advantage of designing with a single view as in non-responsive projects (Blank Projects).

Background images

When you add an image that is appropriately sized for desktop layout to a slide in either Breakpoint mode or what I’m calling my single point mode it looks fine. If you switch to another Breakpoint or resize your layout preview to another view, it becomes obvious that the image needs different settings in order to be a background image across a wide range of device screens. This is where knowing how to work with the position panel is helpful. By default, an image comes into Captivate with a width measured in percentage of the screen width and a height set to auto to maintain the aspect ratio. Because the width changes as the screen size is reduced, the height doesn’t cover the entire screen. Instead it shrinks down as to view the project on smaller or more narrow screen layouts.

My solution to this problem is to change the settings in the Position Panel for images intended to be used as background images. I will change the value of my width to be measured in pixels and set it at the maximum value for a Desktop view. For example, if I have a Desktop view of 1024 x 627, I will set the Width of my image to 1024 px.

By default, images are aligned with the left-hand side of your slide. When you set the above background image to a fixed number of pixels, the left-hand side of the image will always be present. On screen sizes that are smaller than the maximum width the image the right-hand side of the image will disappear. You can change this by changing the image position from Left 0.0 % to Right 0.0%. alternatively, you can open the Advanced section of your Position panel and check Align Center horizontally on the slide if you want the image to always display the center of the image on the center of the slide. Your decision will depend on the composition of the image you’ve decided to use as a background image. You will discover that knowing where the slide is in relation to the background image becomes difficult on the smaller screen layouts since the background image will covering up your entire stage. You can turn on a preview of the slide outline by selecting your slide and navigating to the Properties inspector and checking the Device Height option under the Style tab.

Company Logos

When designing organizational training, we often must include brand logos. Brands often have very precise rules over how their logos are displayed. Adobe Captivate has some features in the Position Panel that can help with this.

Rules About Space

Because of the importance of your company’s logo, there are often rules about it’s use. For example, company’s will dictate safety space around their logos to ensure prominence. You can apply these rules to your company logo in Captivate. The object position can be set to be a certain percentage or number of pixels from the top, left, bottom and right of the slide edges. For example, if your company logo must be 10 pixels away from the top left edge you can change the Top and Left Fields in your Position panel to pixels and enter values of 10 pixels in each field.

Another aspect about space between objects can be enforced using Smart Position. Smart Position isn’t on by default but it’s useful for ensuring that objects don’t get too close to one another when the screen size is smaller. If you check the Smart Position check box, your objects that are not centered one way or the other will now have two lines extending out from the object and what I call anchor points attached to either the top, left, bottom, or right edges of the slide. These anchor points can be clicked and dragged away from the edges of your slide and attached to any other object on your slide. You are then setting that object to not appear a certain distance from the edge but instead setting that object to appear a certain distance from other objects. I often will use this feature to ensure that the body of a slide is always below the title of the slide. It will help you make sure that objects don’t encroach on other objects and is helpful in designing your layout to be consistent across as many displays as possible.

Size Rules

Another rule about your company logo is its size. You might find that as you shrink your slide preview down to smartphone size, the logo becomes so small that it’s unrecognizable or lacks prominence. Captivate can help you with this as it allows you to set the minimum and maximum height and widths for each object as well. For example, your company might have a rule about the brand logo not being smaller than 80 pixels tall. By entering this value in the Min-Height field you can ensure that your logo remains larger for small screen sizes and continues to showcase its importance.