An interactive image is a great format for communicating information in a very visual way. You can use your interactive images to create corporate content, training resources, or to communicate any idea. Your audience will be able to interact freely with the different interactive elements and dive deeper into the information that most interests them.

We’ll tell you how to create an interactive image step by step.

  • Upload an image
  • Edit and add interactivity
  • Share your creation

Upload an image

Go to your Panel and click on Create genially to go to the templates section. Select the Interactive image section.

You can take inspiration from different examples of interactive images. If you need to, you can also watch our video tutorial on how to create an interactive image.

To start creating: 

1. Click on Create interactive image. 

2. You can select your image from:

  • Your computer
  • A URL
  • Google Drive
  • Dropbox

3. Select the image and click on Accept

4. If you want to, you can crop, rotate, or flip your image. You can also swap the image out for another one by clicking on Replace. Click on Accept the save the latest changes.

Edit and add interactivity

The image will appear as the canvas background and will be the base of your creation. The next step is to apply the interactivity. In the Editor you’ll find a section of interactive elements that are very effective at visually representing the content they lead to.

By default, two interactive elements are added to the image we’re using. You can:

  • Replace: if you want to use another kind of interactive element, click on it and then click on the Replace button that appears above it.
  • Add new interactive elements: you can explore the Interactive elements section to see other types of available elements: buttons, buttons with text, social networks, numbers and letters, and invisible areas. Click on the element you want to use and place it where you want it on the image. You can also use any other resource of your choice. 
  • Add text: you can add text boxes to your creation. Why not check out this tutorial to learn how to personalize the text boxes in your creations?
  • Delete: if there’s an element on the canvas that you don’t need, select it and press Delete on your keyboard or the Delete button in the top toolbar of the Editor.

Tip: bring an area of your creation to life by using an invisible area. It will allow you to add interactivity in certain areas or segments of your canvas where you couldn’t before. Discover everything you can do with invisible areas in this tutorial.

Now that you’ve placed all your interactive elements on your image, it’s time to apply the interactivity. To do this, select any element and click on the interactivity icon which appears above it. There are four types of interactivity: Tooltip, Window, Go to page, and Link.

  • Tooltip: Tooltips are used for short-form content. They’re activated when you hover the mouse over the element and deactivated when you move away from it. We recommend using texts with fewer than 300 characters in tooltips for optimal viewing.
  • Window: Windows are for longer content. They’re activated when you click on the element and deactivated when you close the window by clicking on the X.
  • Go to page: This feature allows you to navigate between pages using elements. It is designed for guides, microsites, and games.
  • Link: To link your creation with an external website.

Discover more details about each type of interactivity and how to set it up in this Setting up interactivity in Genially.

And remember: to indicate that an element is interactive and pique your audience’s interest, we also recommend adding animation effects to your elements.

Share your creation

First, publish your creation and then share the link with your audience so that everyone can enjoy your genially.

You can also insert your creation in a website or blog. 

Lastly, if you have a premium plan, you can download your creation in various formats:

Interested in this topic? You can continue learning in the Genially Academy

Button to access the Genially Academy course related to this tutorial