In the first five parts of this blog-series on responsive eLearning with Captivate 2017, we learned how to create a new responsive project, rescale it (if required), add Fluid Boxes to the slides, add objects to these Fluid Boxes, and apply background fill to the Fluid Boxes. Now let’s learn how to modify the Fluid Box properties.

Adobe Captivate applies some default properties to the Fluid Boxes which help make the content look good and flow well on smaller devices. Let’s learn about these properties and their customisation options.

Flow

Flow property of Fluid Boxes determines the direction of flow of the content inside the selected Fluid Box. When you add a Fluid Box to the slide, you need to decide the flow of the Fluid Box. The same selection is reflected in the Properties Inspector after the addition of Fluid Box.

You can change the direction of the flow from Vertical to Horizontal and vice versa, from the Properties Inspector any time after adding the Fluid Box.

Wrap

Wrap is the most important property of the Fluid Boxes. It controls when and how the objects wrap to the next row on the smaller device sizes.

There are four different wrapping options available for the horizontal flow:

• Wrap to next row: When the wrap point reaches its threshold and can no longer hold all the objects in the same row, the last object in the Fluid Box is moved to the next row, and then when it hits the threshold again, the second to last object is moved to the next row. This movement happens in a sequence and the objects are moved to the next row, one at a time.
• Squeeze in a row: You can use this option if you want the images to stay in the same row instead of moving to the next row. The images will shrink in size instead of moving to the next row.
• One Row/Column: This property will squeeze the objects in a single row or a single column. When the wrap point reaches the threshold, the objects move from being horizontally aligned to vertically aligned.
• Symmetrical: This property moves the objects to the next row in groups, instead of moving one object at a time, so that each row has equal number of objects.

Similar to horizontal flow options, there are four wrapping options available for the vertical flow: Wrap to next column, Squeeze in a column, One Row/Column, and Symmetrical.

Alignment

This property will allow you to decide how to align the objects in the Fluid Boxes. To see the alignment properties, uncheck the Stretch to Fit options for both Horizontal and Vertical alignment properties.

Horizontal alignment properties are:

• Left: Left-align the objects in the Fluid Box.
• Right: Right-align the objects.
• Center: Center-align the objects.

Vertical alignment properties are:

• Top: Top-align the objects in the Fluid Box.
• Bottom: Bottom-align the objects.
• Middle: Middle-align the objects.

Other properties:

• Space in between: This property allows the objects to be evenly distributed inside the Fluid Box.
• Space around: The objects are evenly distributed in the Fluid Box with equal space around the objects.

The Space in between and Space around properties are a part of Horizontal alignment if flow of Fluid Box is Horizontal. And if the flow of the Fluid Box is set to Vertical, these properties appear in the Vertical alignment drop-down list.

Padding

Padding can be applied within the Fluid Box in both horizontal and vertical direction. You can add padding from 0 to 50 pixels in both horizontal and vertical direction.

Watch this step-by-step tutorial to learn how to modify the Fluid Box properties:

In the next part, we will learn why and how to use Static Fluid Boxes in Captivate 2017.

Click here to see all the blog posts from this series.

Happy captivating!