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.

  1. Open Adobe Captivate 2017 and select “Responsive Project” and then click on “Create”.
    Fluid Boxes for Web Responsive Design in Captivate 2017
  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

  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
  4. Select Fluid Box and insert image from “Media” Tab.
    Fluid Boxes for Web Responsive Design in Captivate 2017
  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
  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
  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
  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
  9. Write required Text and Design the Button as you like.
    Fluid Boxes for Web Responsive Design in Captivate 2017
  10. Deselect the marked “Stretch to Fit” option for better customized view.
    Fluid Boxes for Web Responsive Design in Captivate 2017
  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
  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
  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
  14. You can see the saved adjustment in the dropdown “Preview In”.
    Fluid Boxes for Web Responsive Design in Captivate 2017
  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
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 *