Divi: the easiest WordPress theme to use
Are you looking for the best WordPress themes and plugins?
Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]
Would you like to create an interactive image for your WordPress blog?
An interactive image allows you to highlight, link, and animate certain areas of your image.
In this tutorial, we will show you how to create interactive images on WordPress.
But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog
Then back to why we are here.
What is an interactive image?
An interactive image includes areas of access points, highlights, links, colors, etc.
Make your blog smoother and more efficient by trying these 6 WordPress image compression plugins for your Blog
It's different from a simple image you upload to WordPress. The interactive images are eye-catching and grab the attention of users. You can add description to different parts of an image, add links to pages, highlight sections, and more.
In this image, you can see the description of the fruits next to the mouse above the different bars. You can use these interactive images to boost user engagement and website time.
Let's take a look at how you can grab the attention of your visitors with interactive images.
How to create interactive images on WordPress
After activation, you will see a new custom post type on your WordPress dashboard. You have to go to Draw Attention »Add New to create an interactive image.
Start by adding a title for this new interactive image so you can easily remember it. On this page, you can create an interactive design on new or already uploaded images. You can add a new image by clicking the upload image icon, or you can select an image from your WordPress media library.
Go further by discovering these 9 premium WordPress plugins to optimize your media library
Easily create your website with Elementor
Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]
Then you have to click on the button Publish .
After posting, the plugin allows you to edit the image and highlight specific areas, add colors, links, draw hotspot areas, and more. You can scroll to the section Hotspot zones and expand the clickable area to preview the image.
Just move your mouse and draw clickable areas on the image. You can easily select the access point areas and expand them to create a selection.
After drawing the hotspot area, you need to scroll down the drop-down list Action and select an action for the selected area on the image. If you choose Show more info, you can just add a description to explain the access point area on the picture. You can also add a link on the selected area using the option " Go to url" page (in French).
You can also manage general settings and highlight style for action link, action text, background, and more. These settings can help you make your image more interactive.
Then you have to click on the button Update profile and copy the shortcode to add it to your WordPress post or page.
The plugin allows you to create as many interactive images as you want using your previously uploaded or new images.
Import and export interactive images
If you work on multiple websites and want to import / export interactive images, the Draw Caution plugin must be installed on both websites.
On the first website, you must visit Draw Attention »Import / Export and check the images you want to export. Then click on the button Generate the export code and copy the code.
Divi: The best WordPress theme of all time!
With over 701.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]
After that, you have to go to the second website and make sure you have activated the Draw Caution plugin. Then you have to go to Draw Attention »Import / Export on the dashboard and paste the code into the import field.
Go ahead and click the button Import and your images will be imported.
Discover also some premium WordPress plugins
You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.
We offer you here some premium WordPress plugins that will help you do that.
1. Opt-In Content Locker
Opt-In Content Locker is a WordPress plugin, which allows you to lock important content on your blog and display it only for subscribers.
All you need to do is enclose the locked content with [optinlocker]… [/ optinlocker] shortcodes. If people want to view this content, they have to submit their name / email. After submission, all locked content will become visible.
Its main features are: a tool msafe and secure, the vblocking important content, theupport of MailChimp, AWeber, GetResponse, iContact, Campaign Monitor, Mad Mimi, Benchmark, Sendy and MyMail, support for shortcodes, export of data in CSV format, the possibility of being translated into several languages, feasy to install, an excellent customer support, et others.
2. Click to WhatsApp Chat
The WordPress Click to WhatsApp Chat plugin allows WordPress customers to easily connect with the website owner or customer support using their WhatsApp account.
Just a click on the WhatsApp account and it will be directed directly to the mobile WhatsApp account with a default message. And if the client is on desktop or laptop, he will be redirected to WhatsApp Web.
This plugin requires the WhatsApp number and time and day, which the website owner or support team will use to discuss. The chat button can be added on the WooCommerce product detail page, which is directly related to that product.
3. Was this Helpful
Was This Helpful is a WordPress plugin used to value comments from your readers. Note that if a positive comment motivates you to do better, a negative comment on the other hand helps you to find the gaps, and to improve your blog; making it more useful for other visitors.
This plugin is unique because it asks visitors to answer the question of why they don't find a post useful when they click the "NO" option. Likewise, it asks visitors what they like the most when they click on the "YES" option.
In addition, you can go to the page / article listing where you will see a Yes / No section, which allows you to quickly see the statistics, finally to have a complete overview on the quality of your articles and your pages.
Easily create your Online Store
Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]
Find out about other recommended resources to help you build and manage your website.
- A blog ... what is it? Definition and explanation
- How to add a parallax effect on any WordPress theme
- How to display your WordPress publications in a grid layout
- How to add a WooCommerce store on Facebook
Here ! That's it for this tutorial, I hope it allows you to create interactive images. Do not hesitate to share with your friends on your favorite social networks.
And if you have any suggestions or remarks, leave them in our section Comments.