Please be careful! If you delete this page, consider that it could be used within an other language version.
How to Add an Interactive Image to your page
Learn how to add this engaging element to your pages!
Interactive Image Elements are a great way for our website visitors to interact with our pages. They are also a great way to show more educational topics in better detail. Please take a look at this page as an example, which uses an Interactive Image element to describe the mutlitations that cows go through.
Steps to add an Interactive Image to your page:
- First, choose the right page type. Interactive Images are available on the following page types: Article page, Landing Page and Promotion pages.
- Second, you need to get your background image. This might be in the style of an infographic. You might need a version for desktop and one for Mobile. (Mobile will need to be in a square format).
- See the next steps below using visuals for better understanding:
Click on the + in the Content Tree, and select Interactive Image. Then with the middle arrow, choose the Desktop image first. Upload your Desktop image.
While clicking on the background Desktop image, click the plus symbol found in the top right hand corner. Then select Image Text, (if you would like to add an image. Or YouTube video. Please note, you can now also add text to under the YouTube Video, just as you can for the Image:
After choosing the image that users can click on, (for more details), you will have to add the position of where the interactive image should show up (X and Y coordinates. See the next image for details. At this step, you can also select the box, 'Show as Overlay' so that they picture also has an 'X' or an exit button, to click the image away again.
Please pay attention to the above grid. The Y coordinate starts at 0 from the top of the image. The X coordinate starts at 0 from the left side. So, the first icon (the truck) is at about 15 X and 70 Y. It's easiest if you start adding coordinates in counts of 10. (i.e. 10, 20, 30, etc.) then you can make small adjustments later. This is trial and error.
- Your next steps will be doing the same for adding the Mobile version of the image. Click on the Interactive Picture in the content tree. Click on the '+' symbol, then the -->, then 'Mobile Interactive Picture.'
- You will have to do the same steps for the mobile verison.
- In the inspector, for the mobile version, please check the 'Show numeration' box, as for mobile, the text can look too crowded. So this makes it less visually cluttered.
Update 30/06/2023: You now have the option to have your Interactive Image be full screen or, narrower.
Select the 'Use Content Width' checkbox in the first tab of the inspector to have a narrower (not full screen) element. The default is Full Screen.
Go back to the Editors Support Pages