How to create interactive images: WP Draw Attention review
Do you want to improve user experience and boost conversions? Look no further! Interactive images are an excellent tool to captivate your audience and make your site stand out. In this post, we’ll show you how you can create interactive images.
Interactive images allow you to show information in an attractive and engaging way, providing clarity and context to your content. Nowadays, users tend to hover and click on interactive images because it provides them with a fun experience, as they can discover what’s behind each section and explore different areas of interaction.
These types of images are an effective way to focus your audience’s attention on a specific idea or important information you want to highlight, especially when you have a large amount of content to sort through.
Creating Interactive Images with WP Draw Attention
Whether you want to create maps, schemes, photographs, or any other type of image, the Draw Attention plugin is the perfect solution. It’s a user-friendly tool that lets you draw clickable sections on any image, without changing its format, and customize its interaction behavior, color, and display details. Additionally, it supports Gutenberg blocks, making it easy to display interactive images on your posts, pages, and products.
Creating interactive images with the Draw Attention Plugin is a breeze. Upload your image, create clickable areas, and fill out the information related to each section. Customize your image with the available options, and you’re ready to go! Copy the shortcode or use the Gutenberg block to display your interactive image on your website.
Draw Attention is a freemium tool. The free version includes all the features, but the number of interactive images you can create is limited. If you need to create more images and want priority support, you should go for the premium versions that offer unlimited interactive images, clickable areas, and 20 preset color schemes. The single website version costs 99 USD, and if you want to add unlimited sites, the price is 149 USD.
In conclusion, if you want to take your website to the next level and provide a unique and engaging user experience, the Draw Attention Plugin is the way to go.
WP Draw Attention plugin overview
WP Draw Attention is one of the best plugins to create interactive images. It’s very easy to use and its performance is excellent.
You simply upload any image (png, jpg, or any other image format) and the plugin will make it interactive and allow you to draw clickable sections. There is also a wide range of options that you can apply to a single image interaction, highlighting color, displaying details, and behavior of the mouse. You can also export and import images.
After making an image interactive, you should enter a shortcode to display it on the front end. The shortcode doesn’t make any difference to the image when loading, it only includes the interaction.
After you create the interactive Image, you can use it on posts, product pages, and on any place where you can add a shortcode. It also supports Gutenberg blocks, providing a customized block to display interactive images.
Pricing
Draw Attention is a freemium tool. The free version includes all the features, but the number of interactive images you can create is limited. If you need to create more images and want priority support, you should go for the premium versions that offer unlimited interactive images, clickable areas, and 20 preset color schemes. The single website version costs 99 USD, and if you want to add unlimited sites, the price is 149 USD.
To summarize, these are the plans Draw Attention offers:
- Free
- Single website: $99
- 1 Year of Updates and Support
- Unlimited websites USD 149
- 1 Year of Updates and Priority Support
Both Premium versions include
- Unlimited Interactive Images
- Unlimited Clickable Areas
- 20 preset color schemes
- Custom layout options (change the position of more info box or use a lightbox or a tooltip)
How to create an interactive image using the Draw Attention plugin
The interactive image is technically an overlay over a normal image. This overlay is defined by sections that match the background image sections, so when a user clicks on a section, it triggers an event related to that specific section.
To create an interactive image with the WP Draw Attention plugin, you need to have an image and the information related to it.
1) Upload the image
First, upload the image to the WordPress gallery the same way you would upload any other image. At this point, that’s an image like any other. You can add the file right from the plugin dashboard options by going to Draw Attention > Add New.
Then upload an image to the media library using the image box, which you’ll find on the right sidebar:
2) Create the interaction with the image
Now you need to create clickable areas so users can interact with them. Click Add new again the same you did in the previous step to start working on an image.
This will take you to the interactive image editor interface. Here, you can change the style of interaction behavior, among other customizations.
Now add an image by either uploading it or choosing one from the media library. Enter a title and hit Publish. You can also save it as a draft to start editing the image.
A new section will be visible now in the image editor. The Hotspot Areas section is where you will start defining the interaction zones by drawing them over the image.
Draw Attention offers a few options to help you draw the hotspots. You can zoom on the image for more accuracy, use a polygon, circle, or rectangle for drawing over the hotspots, and edit, save, or cancel at any time.
After setting a clickable zone on the image, you need to enter the information related to it such as title, description, and so on.
Now, repeat the process with all clickable areas of the image and fill out the details for each one of them.
Draw the zone over the image using the available options. This will allow you to draw polygons, rectangles, or circles. You need to match the most accurately possible with the shape of the sections.
After that, you can customize the image with multiple options available.
On the sidebar, you can change the interaction behavior by clicking or hovering, selecting a color scheme, and setting the layout in which the information will be displayed.
3) Display the image
After finishing the edition, the final step is to display the interactive image on the front end. Simply copy the shortcode at the bottom of the right sidebar of the editor page and paste it wherever you want to place the image.
Alternatively, you can use a Gutenberg block if you feel more comfortable with this option. Draw Attention provides a Gutenberg block to display any of the interactive images without the need for a shortcode.
Conclusion
All in all, Draw Attention is a great plugin to create interactive images and improve the UX of your site. Interactive images are great to improve user engagement and make your site stand out.
This plugin provides an intuitive and efficient way to create interactive images and comes with a full set of customization options, allowing you to style the images to match your site’s style. Additionally, it offers a free option with all the features, so you can test the plugin without having to pay anything.
Have you tried Draw Attention or any other plugin to create interactive images? How did that go? Let us know in the comments below!