How To Extend The Width Of The Text On Image Block In Articulate Rise

Here at Discover eLearning we utilise Articulate 360 extensively as our go-to eLearning content development software solution. We are constantly motivated to discover more great things that creative eLearning software like Articulate Storyline and Rise 360 can do with further development and manipulation of published project files at code level. This is one of the reasons why earlier this year we launched our Storyline Magic Series on YouTube to share some of the many amazing things that we have discovered working with Articulate’s development tools over the years.

We are also big fans of Articulate Rise, which was added to the family of Articulate products with the launch of the 360 subscription service. Using Rise, we are able to create smart, tailored scrolling-webpage style eLearning material for our clients that utilises many visual and interactive elements to enhance the learning experiences from embedded video content, hotspots images, process charts, timelines, and quiz interactions.

Though the Rise tool itself has been available for a number of years now, the progress in terms of making as many features available to developers to manipulate as they may wish to fine tune and improve the design and user experience aspects of their published online learning content has often been fairly lacking.

This is starting to improve however with the latest update involving Themes, which can help to create varied and unique styles to help match a client’s aesthetic preference.

Still, we had hoped for better customisation options for some of the various content blocks which Articulate Rise offers. For now at least we are able to get into the published project code and manipulate areas such as this through added CSS code to the index.html file of any Rise project.

In this post we are going to share one of our favourite techniques which is to expand the text area of the Text On Image content block in order to better utilise horizontal space, especially when you may be using the block yourself to hold quite a lot of paragraph content.

Use these simple steps to extend the width of the Rise Text On Image content block.

Step 1 – Create your project in Articulate Rise and publish as normal.

If you have used a Text On Image block in your project you will see that by default the amount of space used by the text itself is fairly minimal:

Step 2 – Open the published project index.html file in your text editor and add the following code into the head tag.

<style>.block-image--overlay .block-image__col{width:92%}</style>

This can go into the file just before the closing head tag, usually at around line 23.

Step 3 – View the result and customise the width as needed for your own project.

You should see the updated column width value have an immediate affect on the look of your project. This should also look great on tablet or mobile devices as well, but you can customise the value for your own purposes if there is a particular look you are hoping to achieve.

An advanced tip if you know your way around CSS would be to create media queries for specific widths, such as when the Rise project automatically opens and closes the side menu tray on tablet device width. This way you can extend the width even further for various devices without running the risk of taking things so far that some of your text is cut from the edge.

We hope you find this tip for Articulate Rise useful, and please stay tuned to the Discover eLearning blog and YouTube channel for more helpful tips and tricks coming soon for advanced-level eLearning developers.