Adding Custom Image Into The Text – Articulate Rise

adding custom image into the text - articulate rise

Articulate Rise 360 is an excellent eLearning authoring tool when it comes to developing fully responsive online courses. In this blog, we will demonstrate how to add an image beside the textbox by doing custom changes in the Articulate Rise files.

Step 1: Insert the Text block.

adding custom image into the text - articulate rise 01

Step 2: We took 5 Text blocks and in between we have added other blocks too.

adding custom image into the text - articulate rise 02

Step 3: Lets add an image beside the text block – “This is the paragraph with the image”.

adding custom image into the text - articulate rise 03

Step 4: Articulate Rise doesn’t have a default feature to include image beside the text. For this we need to customization in the exported files. Let’s export the course and make the changes.

adding custom image into the text - articulate rise 04

adding custom image into the text - articulate rise 05

Step 5: The course is downloaded in .ZIP format.

adding custom image into the text - articulate rise 06

Step 6: Unzip the folder and open SCORM content > index.html

adding custom image into the text - articulate rise 07

Step 7: The Articulate Rise 360 use a single class or ID for all the text blocks. If you want to place an image beside all the text blocks then you can go with the default class. To show an image beside selected text block, use the ID “data-block-id”.

Open the index file and press F12.

adding custom image into the text - articulate rise 08

The class fr-view applies the changes to all the text boxes.

adding custom image into the text - articulate rise 09

Step 8: Before writing the custom CSS, copy all the images to the SCORM content folder.

adding custom image into the text - articulate rise 10

Step9: Add the following script in the <style>

adding custom image into the text - articulate rise 11

Step 10: Save and check the output.

adding custom image into the text - articulate rise 12

adding custom image into the text - articulate rise 13

Custom elearning development

Tags: Custom eLearning DevelopmentFlash to HTML5 Conversion Services, Rapid eLearning Development, Translation and Localization, Convert PowerPoint to eLearningLearning Management System

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published.