How To Add Image Hotspot To Your WordPress Website.

Our Blogs

Image hotspot is the way to highlight some points of your images. That can be helpful to add more information in your image.There are many free and paid plugin to add this feature to your website. The one i like most is “Image Hotspot by DevVN“.
It is a free WordPress plugin that will help you to add image hotspot to your WordPress website. Image Hotspot – is a plugin that helps us create highlights on any image. The highlight can be a link, a tooltip, and has a nice effect. Usually to describe the details of a certain device or device.

How to add "Image Hotspot by DevVN" to your wordpress website :

1. Install and active the plugin

It is very simple to install and activate the plugin. Go to WordPress dashboard > plugin > add new and search “Image Hotspot by DevVN”. It should be the first one which we are looking for. You can simply install it by clicking the install button and also activate the plugin after the installation. Then you are good to go.

2. Add hotspot to image

Now you can see a new option call “image hotspot” in your WordPress dashboard. Click that option to add image hotspot and go to add new. Now you can see all options that will allow you to create image hotspot. You can play with the setting to get the perfect result for you. After adding the hotspot you should click update in the right top side. And after clicking the update button, now you can see the image hotspot shortcode that will allow you to use this image anywhere in your website. you need to copy the shortcode and paste it where you wanna add the image.

3. Final Step

As we said to use it in the font-end of your website, you need to paste the shortcode where you wanna use the image. And you can see the image hotshopt there. Now you can see the default style which may is nice. And if you wanna add some more style to that hotspote ans mobile responsive you can copy the code from the down below and paste it to your shortcode > custom css section. That will make the image hotspot more responsible and stylish.

Custom css code for Image Hotspot.

    background-color: white;
    padding: 10px;
    padding-bottom: 0px;
    margin: 5px;
    height: auto!important;
#powerTip p{
    color: black!important;
    font-family: montserrat;
    font-weight: 500px;
    font-size: 15px;
    margin-bottom: 10px;

    display: none!important;

@media (max-width: 500px){
#powerTip .close_ihp svg {
    fill: black!important;

If you wanna know more deep about the plugin you can follow our youtube video. Where we showed the full process “How you can add the image hotspot in your wordpress website”

Don’t forget to see our blogs and assets where you can find all free stuff that can help your website to become more beautiful and professional.

Sharing is caring!

Liked This Article?

Subscribe To Our Newsletter. So You will never Miss Another Update.

3 thoughts on “How To Add Image Hotspot To Your WordPress Website.”

  1. Hello! This is kind of off topic but I need some help from an established blog.
    Is it hard to set up your own blog? I’m not very techincal but I can figure things out pretty quick.
    I’m thinking about making my own but I’m not sure where to begin. Do you have any ideas or suggestions?


    1. Hello there, yeah you can use WordPress to make your own blog website. This is the best platform to make something like that. You can explore wordpress.

Leave a Comment

Your email address will not be published. Required fields are marked *