How to use Fluid Boxes for Web Responsive Design in Captivate 2017

Captivate 2017 is the recent launch by Adobe and is turning out to be A piece of cake for eLearning developers to create responsive ELearning modules. If I have to pick an eye catching feature from the tool I would surely pick “Fluid Boxes” which is one of the new features added to Captivate 2017. With Fluid Boxes, developers relish unique authoring experiences and develop responsive HTML5-based eLearning content faster, without programming knowledge.

Step 1

Open Adobe Captivate 2017 and select “Responsive Project” and then click on “Create”.

Step 2

From the options available at the top, click on “Fluid Box”. This will allow you to choose one of two different fluid boxes arrangements:

Horizontal
Vertical

Choose according to the design you want to achieve.

Step 3

Now, choose the number of fluid boxes you want to have on the screen. You can choose as many as you wish. Note: Fluid Boxes can have different configurations.

Step 4

Select Fluid Box and insert image from “Media” Tab.

Step 5

Browse the image from the desired location and click “open”. Let us name this as Fluid Box 1

Step 6

Similarly insert an image in the other fluid box. Let us name it as Fluid Box 2.

Step 7

From the options available on Top, click on “Text” dropdown and insert the text you wish to add on the Fluid Box 2.

Step 8

Click on the “Interactions” tab and select the required interaction from the available default interactions from dropdown list.

Step 9

Write required Text and Design the Button as you like.

Step 10

Deselect the marked “Stretch to Fit” option for better customized view.

Step 11

Now let’s look at the customization options available to customize the “Fluid Boxes”. The options available are FLOW, WRAP, HORIZONTAL, VERTICAL, PADDING. Use these options as per your design requirements.

Flow

Wrap

Horizontal

Vertical

Padding

Step 12

To preview the project on different devices, choose the dropdown menu beside the “Preview In” option. Alternatively you can enter your own width and height and with the help of “preview slider” you can adjust the size that you wish

Step 13

Once you have made an adjustment to the default, you will see a tiny little plus Icon and by clicking on it you can create a name for your own custom preview and click OK.