Create interactive images for web


Learn how to create animated image annotations using interactive-img.com and how easy it is to integrate them into your WordPress site.

The process does not require changes to your website or any kind of plugins to be installed.

1. Start by creating your new interactive-img.com account or use your existing login to sign in.

interactive-img-login

2. Click on ‚+create new image‘ and start uploading your image that you would like to annotate.

3. By clicking into the image on specific spots you can create individual areas of interest for the viewer. When you create one of these spots a menu on the left side will slide out. You are then able to configure the content of the box that will appear once a viewer clicks on you spot. Use the save and close button to finish an entry and start adding as many annotations as you need.
You can also use ‚+add element‘ to add images on top of your background image to enhance it further. These additional layers can also receive an initial animation when the whole scene loads. Feel free to experiment!

interactive-img-setpointers

4. If at any point you would like to see how the final image will look on your website try using the ‚view image‘ button. I will allow you to interact with your image and preview all animations.

interactive-img-view

5. Once your finished with your creation you can use the ‚embed image‘ button to start integrating the interactive image into your WordPress website. Next copy the full code you see in the overlay so we can later past it into a blog entry or site content on your website.

interactive-img-embed

6. Now you will have to switch to your WordPress admin area and find the text editor field you would like to enhance with the image. On the right top corner of the editor field you find a tab called ‚Text‘. Using this view you can go trough the content and look for the correct place where you would like image to appear later on. The easiest way is to place the code at the very end and then add more text and images by switching back to the visual editor mode. Feel free to write and style your post or site content as you always do.

interactive-img-paste

7. Now we can hit the save button and take a look at the final creation by using the preview mode of WordPress.
We hope it turned out just as nice you imagined!

interactive-img-done

Feel free to contact us at any time. We’d love to hear from you!

 

Example of our annotated image used in this tutorial:

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *