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

Responsive Design in Captivate

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”.

Fluid Boxes for Web Responsive Design in Captivate 2017

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.

Fluid Boxes for Web Responsive Design in Captivate 2017

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.

Fluid Boxes for Web Responsive Design in Captivate 2017

Step 4

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

Fluid Boxes for Web Responsive Design in Captivate 2017

Step 5

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

Fluid Boxes for Web Responsive Design in Captivate 2017

Step 6

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

Fluid Boxes for Web Responsive Design in Captivate 2017

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.

Fluid Boxes for Web Responsive Design in Captivate 2017

Step 8

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

Fluid Boxes for Web Responsive Design in Captivate 2017

Step 9

Write required Text and Design the Button as you like.

Fluid Boxes for Web Responsive Design in Captivate 2017

Step 10

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

Fluid Boxes for Web Responsive Design in Captivate 2017

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
    Fluid Boxes for Web Responsive Design in Captivate 2017
  • Wrap
    Fluid Boxes for Web Responsive Design in Captivate 2017
  • Horizontal
    Fluid Boxes for Web Responsive Design in Captivate 2017
  • Vertical
    Fluid Boxes for Web Responsive Design in Captivate 2017
  • Padding
    Fluid Boxes for Web Responsive Design in Captivate 2017

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

Fluid Boxes for Web Responsive Design in Captivate 2017

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.

Fluid Boxes for Web Responsive Design in Captivate 2017

Step 14

You can see the saved adjustment in the dropdown “Preview In”.

Fluid Boxes for Web Responsive Design in Captivate 2017

Step 15

You can view your slide on different devices.

  • Desktop:
    Fluid Boxes for Web Responsive Design in Captivate 2017
  • IPad:
    Fluid Boxes for Web Responsive Design in Captivate 2017
  • Mobile:
    Fluid Boxes for Web Responsive Design in Captivate 2017

Our Services: Custom eLearning Course Development, eLearning Vendor, eLearning Solutions

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *