{"id":13391,"date":"2020-09-28T15:00:57","date_gmt":"2020-09-28T13:00:57","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=13391"},"modified":"2022-12-07T10:15:39","modified_gmt":"2022-12-07T09:15:39","slug":"interactive-images-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/interactive-images-in-wordpress\/","title":{"rendered":"How to Add Interactive Images in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]To create appealing websites that won\u2019t be mentally dumped by users in a blink of an eye requires careful planning and the use of high-quality visual content. In most cases, words alone are simply not enough to keep visitors on a page, since:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">some people might be overwhelmed by too much text on a page and they may flee;<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">most users don\u2019t even read the content word-by-word but rather skim through it and therefore are more likely to leave your site;<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">text is just not as engaging and enticing as graphics are. <\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]A particularly good way of engaging with your audience is by using interactive visual content because of its power to tell stories more vividly than static graphics.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we\u2019ll discus:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#why-are-interactive-images-important\">Why Are Interactive Images Important<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#add-interactive-images-using-qi-addons-for-elementor\">How to Add Interactive Images Using Qi Addons for Elementor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#add-interactive-images-using-qi-blocks-for-gutenberg\">How to Add Interactive Images Using Qi Blocks for Gutenberg<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#add-interactive-images-using-plugins\">How to Add Interactive Images Using Plugins<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"why-are-interactive-images-important\"><\/a>Why Are Interactive Images Important<\/h2>\n<p>[\/vc_column_text][vc_column_text]Interactive images allow you to take things up a notch when it comes to user engagement. For instance, you can upload a wildlife picture and then enable users to tap on each animal to learn more about it. Or, if you run an online store, people could click on each product to read user reviews and see more pictures of it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The thing is, <strong>by placing hotspots on pictures and then linking them to textual, audio, video, or any other kind of content you can bring pages to life and make your website more memorable<\/strong>. You can also supercharge them with highlights, additional information, descriptions, links to other web pages, and play with colors in order to invite users to take action and become involved with your brand.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"add-interactive-images-using-qi-addons-for-elementor\"><\/a>How to Add Interactive Images Using Qi Addons for Elementor<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"527\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Qi-Addons.jpg\" class=\"attachment-full size-full\" alt=\"Image Hotspots Qi Addons\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Qi-Addons.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Qi-Addons-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Qi-Addons-768x418.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Qi-Addons-620x337.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Elementor users have it easy \u2013 all they need to do to add some interactive properties to their images is to download <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a>. The plugin is bursting with awesome Elementor widgets for creating great effects on your website, including adding interactive elements to your images.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For example, you can easily add interactive hotspots to your images with the Image Hotspots widget. The widget is included with the plugin&#8217;s premium version, and we&#8217;ll show you how to use it to add some interactivity to your images. So after installing and activating the plugin and ensuring you have Elementor installed, go ahead and open a new post or page.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Adding the Content to the Image Hotspots Widget<\/h3>\n<p>[\/vc_column_text][vc_column_text]You must first search for the elements menu widget and drag it over to the working areas. We&#8217;ve prepared our working area beforehand by going into the column options and setting <em><strong>Center<\/strong><\/em> for horizontal alignment.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Even with that, however, we needed some tweaking to get our image right and centered. So after adding the image under <em><strong>Content &gt; General<\/strong><\/em>, we turned to <em><strong>Advanced &gt; Positioning &gt; Width<\/strong><\/em> in the widget options and chose <em><strong>Inline<\/strong><\/em>. That helped us, but remember that you might not need to go through these steps depending on your theme and its settings.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"488\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Positioning.jpg\" class=\"attachment-full size-full\" alt=\"Image Hotspots Positioning\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Positioning.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Positioning-300x151.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Positioning-768x387.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Positioning-620x312.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]By default, the widget creates three spots. You can add new ones or remove the existing ones and set various options for them. For example, you can change their titles and subtitles, add pin images, set pin positions, and choose where the info box appears on hover.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For our first pin, we set its <em><strong>Horizontal Position<\/strong><\/em> to <em><strong>Center<\/strong><\/em> and its <em><strong>Vertical Position<\/strong> <\/em>to <em><strong>Top<\/strong><\/em>. Next, we set the <em><strong>Vertical Offset<\/strong> <\/em>to <em><strong>130<\/strong><\/em> and the <em><strong>Horizontal Offset<\/strong><\/em> to <em><strong>-181<\/strong><\/em>. Finally, we put our own title, deleted the default subtitle, and changed the pin. We also deleted the remaining items, but only for now \u2013 we&#8217;ll add them later.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-General-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Image Hotspots General Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-General-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-General-Settings-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-General-Settings-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-General-Settings-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Styling the Image Hotspots Widget<\/h3>\n<p>[\/vc_column_text][vc_column_text]After switching to the <em><strong>Style <\/strong><\/em>tab, you&#8217;ll first encounter the <em><strong>Pin Style<\/strong><\/em> options. It&#8217;s where you can change the default pin, its color and size, and set up the pin holder around the pin.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We changed the <em><strong>Pin Color<\/strong> <\/em>to <em><strong>#d79b76<\/strong><\/em> and set the <em><strong>Pin Size<\/strong> <\/em>to <em><strong>18px<\/strong><\/em>. For the <em><strong>Pin Holder Background Color<\/strong><\/em>, we chose <em><strong>#ffffff.<\/strong><\/em> We also set the <em><strong>Pin Holder Size<\/strong><\/em> to <em><strong>46px<\/strong><\/em> and the <em><strong>Pin Border Radius<\/strong><\/em> to <em><strong>30px<\/strong><\/em> on all four sides.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"522\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Style-Options.jpg\" class=\"attachment-full size-full\" alt=\"Image Hotspots Style Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Style-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Style-Options-300x162.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Style-Options-768x414.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Style-Options-620x334.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em><strong>Info Style<\/strong><\/em> options let you set up the looks and behavior of the info box that appears when you hover over an image hotspot. There are two different animations for displaying the info you can choose, both with their appropriate options. For example, if you select the <em><strong>Fade In<\/strong> <\/em>animation, you can set up the box&#8217;s position relative to the pin, whether the box has an arrow, and how far away the box is from the pin.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Because we chose the other type of display, animation, <em><strong>Reveal<\/strong><\/em>, we had none of those options. However, we did change the <em><strong>Info Background Color<\/strong><\/em> to <em><strong>#4c652f<\/strong><\/em>, the<em><strong> Info Padding<\/strong><\/em> values to, in order, <em><strong>11px, 30px, 12px,<\/strong><\/em> and <em><strong>62px<\/strong><\/em>, and the <em><strong>Info Border Radius<\/strong><\/em> to <strong><em>30px<\/em><\/strong> on all sides.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"516\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Info-Style.jpg\" class=\"attachment-full size-full\" alt=\"Image Hotspots Info Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Info-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Info-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Info-Style-768x409.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Info-Style-620x330.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em><strong>Info Title Style<\/strong><\/em> options allow you to choose the title tag, color, typography options, and bottom margin.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We changed the <em><strong>Title Color<\/strong><\/em> to <em><strong>#ffffff<\/strong><\/em>. Then, under <em><strong>Title Typography<\/strong><\/em>, we set the size to <em><strong>17px<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"521\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Info-Title-Style.jpg\" class=\"attachment-full size-full\" alt=\"Image Hotspots Info Title Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Info-Title-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Info-Title-Style-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Info-Title-Style-768x413.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Info-Title-Style-620x333.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em><strong>Info Subtitle Style<\/strong><\/em> options let us choose the subtitle color and typography options. We didn&#8217;t have subtitles, so we had nothing to do here. What we did, instead, was to navigate back to <em><strong>Content &gt; General<\/strong><\/em> and copy the item we created six times. We changed the title and the pin every time, as well as their position.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For the <em><strong>Stone<\/strong><\/em> pin, we set the <em><strong>Vertical Offset<\/strong> <\/em>to <em><strong>113px<\/strong><\/em> and the Horizontal Offset to 180px, keeping the horizontal and vertical positions of the original. For the <em><strong>Plastic<\/strong><\/em> pin, we switched the <em><strong>Horizontal Position<\/strong><\/em> to <em><strong>Right<\/strong><\/em>, and the <em><strong>Vertical Position<\/strong><\/em> to <em><strong>Middle<\/strong><\/em>. We changed the <em><strong>Vertical Offset<\/strong><\/em> to <em><strong>-61px<\/strong><\/em> and the <em><strong>Horizontal Offset<\/strong><\/em> to <em><strong>188px<\/strong><\/em>. We set the <em><strong>Ceramics<\/strong><\/em> to <em><strong>Center<\/strong><\/em> and <em><strong>Bottom<\/strong><\/em>, with <em><strong>Offset<\/strong><\/em> values of <em><strong>241px<\/strong><\/em> and <em><strong>176px<\/strong><\/em>. For the <em><strong>Steel<\/strong><\/em> pin, we switched to <em><strong>Right<\/strong><\/em> and <em><strong>Bottom<\/strong><\/em>, with <em><strong>109px<\/strong><\/em> and <em><strong>180px<\/strong><\/em> for <em><strong>Offset<\/strong><\/em> values. The <em><strong>Wood<\/strong><\/em> pin was set to <em><strong>Center<\/strong><\/em> and <em><strong>Bottom<\/strong><\/em>, with <em><strong>Offset<\/strong><\/em> values <em><strong>106px<\/strong><\/em> and <em><strong>-76px<\/strong><\/em>. Finally, for the <em><strong>Reed<\/strong><\/em> pin, we switched the position to <em><strong>Left<\/strong><\/em> and <em><strong>Bottom<\/strong><\/em>, with <em><strong>Offset<\/strong><\/em> values of <em><strong>26px<\/strong><\/em> and <em><strong>235px<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"499\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-All-Items.jpg\" class=\"attachment-full size-full\" alt=\"Image Hotspots All Items\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-All-Items.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-All-Items-300x154.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-All-Items-768x395.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-All-Items-620x319.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And that was it! Of course, you should feel free to experiment to get the image hotspots that suit your photos best. If you&#8217;re even in need of inspiration or want to see how the example we created here looks on a website, you can always visit the <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/image-hotspots\/\" target=\"_blank\" rel=\"noopener\">widget&#8217;s landing page<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"add-interactive-images-using-qi-blocks-for-gutenberg\"><\/a>How to Add Interactive Images Using Qi Blocks for Gutenberg<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"544\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Block.jpg\" class=\"attachment-full size-full\" alt=\"Image Hotspots Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Block-300x168.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Block-768x431.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Block-620x348.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you like adding hotspots to your images to increase their interactivity, but Elementor is not your page builder of choices, don&#8217;t worry. Our very own <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/\" target=\"_blank\" rel=\"noopener\">Qi Blocks for Gutenberg<\/a> plugin also has an Image Hotspots block. It&#8217;s a premium block, so you&#8217;ll have to get the plugin&#8217;s premium version to use it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When the plugin is installed and activated, adding hotspots to an image is very easy. We&#8217;ll show you how we did it for one of the examples on the <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/image-hotspots\/\" target=\"_blank\" rel=\"noopener\">block&#8217;s landing page<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After adding the block to a page, you&#8217;ll see a placeholder image and three pins, which are there by default. Then, heading over to the right-hand side menu, you&#8217;ll notice that it&#8217;s open on the <em><strong>Content<\/strong><\/em> tab, where you can change the image, add and remove pins and change their contents.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Block-Content.jpg\" class=\"attachment-full size-full\" alt=\"Image Hotspots Block Content\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Block-Content.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Block-Content-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Block-Content-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Block-Content-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We started by changing the picture. We removed all the default items except one, then changed its Title, removed the <em><strong>Subtitle<\/strong><\/em>, and set its <em><strong>Vertical Offset<\/strong> <\/em>to <em><strong>27%<\/strong><\/em> and its <em><strong>Horizontal Offset<\/strong><\/em> to <em><strong>24%<\/strong><\/em>. We then duplicated that item to create the next one, in which we changed the <em><strong>Title<\/strong><\/em> and the <em><strong>Vertical Position<\/strong><\/em> to <em><strong>Middle<\/strong><\/em>. Next, we set the<em><strong> Vertical Offset <\/strong><\/em>to <em><strong>3.5%<\/strong><\/em> and the <em><strong>Horizontal Offset<\/strong><\/em> to <em><strong>5.5%<\/strong><\/em>. The next pin&#8217;s <em><strong>Horizontal Position<\/strong><\/em> was <em><strong>Right, Vertical Position Top, Vertical Offset 20%<\/strong><\/em>, and <em><strong>Horizontal Offset<\/strong> <strong>22.7%<\/strong><\/em>. For the final pin, the values were set to <em><strong>Right, Bottom, 10.5%, and -14.5%<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"441\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Items.jpg\" class=\"attachment-full size-full\" alt=\"Image Hotspots Items\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Items.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Items-300x137.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Items-768x350.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Items-620x282.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Styling the Image Hotspot Block<\/h3>\n<p>[\/vc_column_text][vc_column_text]We then moved on to the <em><strong>Style<\/strong><\/em> options, where we first set out to style the pins. The options available here include changing the pin icon, its size and color, and the pin holder color, size, and border radius.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We changed the pin icon and set the <em><strong>Pin Size<\/strong><\/em> to <em><strong>15px<\/strong><\/em>. Next, we set the <em><strong>Pin Color<\/strong><\/em> to <em><strong>#ffffff<\/strong> <\/em>and the <em><strong>Pin Holder Background Color<\/strong><\/em> to <em><strong>#e74242<\/strong><\/em>. Finally, for the <em><strong>Pin Holder Size<\/strong><\/em>, we chose <em><strong>47px<\/strong><\/em> and a <em><strong>30px Pin Holder Border Radius<\/strong><\/em> on all sides.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"426\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Block-Style-Options.jpg\" class=\"attachment-full size-full\" alt=\"Image Hotspots Block Style Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Block-Style-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Block-Style-Options-300x132.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Block-Style-Options-768x338.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Block-Style-Options-620x273.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em><strong>Info Style<\/strong> <\/em>options allow you to style the info box. For example, you can choose how it&#8217;s displayed, where, and what color the display box will be, as well as padding and border-radius values.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <em><strong>Info Display<\/strong><\/em> we chose was <em><strong>Fade In<\/strong><\/em>. We chose the <em><strong>Top Info Position<\/strong><\/em>, opted to have the arrow, and set the <em><strong>Info Offset from Pin<\/strong><\/em> to <em><strong>11px<\/strong><\/em>. The<em><strong> Info Padding<\/strong> <\/em>values we entered were <em><strong>13px, 25px, 13px, and 25px<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the <em><strong>Info Title Style<\/strong><\/em> options, you can choose the title&#8217;s color, typography, tag, and bottom margin. We changed the <em><strong>Title Color<\/strong><\/em> to <em><strong>#1e1e1e<\/strong><\/em>. Under <em><strong>Typography<\/strong><\/em>, we changed the <em><strong>Font Family<\/strong><\/em> to <em><strong>DM Sans<\/strong><\/em>, <em><strong>Font Size<\/strong><\/em> to <em><strong>17px<\/strong><\/em>, and <em><strong>Weight<\/strong><\/em> to <em><strong>Medium<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"608\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Block-Final.jpg\" class=\"attachment-full size-full\" alt=\"Image Hotspots Block Final\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Block-Final.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Block-Final-300x188.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Block-Final-768x482.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Image-Hotspots-Block-Final-620x389.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As we didn&#8217;t have any subtitles to style, we could call it a day \u2013 our example was done.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"add-interactive-images-using-plugins\"><\/a>How to Add Interactive Images Using Plugins<\/h2>\n<p>[\/vc_column_text][vc_column_text]Several other premium plugins on the market could help you do the job, including <a href=\"https:\/\/codecanyon.net\/item\/image-map-pro-for-wordpress-interactive-image-map-builder\/2826664\" target=\"_blank\" rel=\"noopener\">Image Map Pro for WordPress<\/a>, <a href=\"https:\/\/codecanyon.net\/item\/adverty-tags-and-ads-on-images\/13342090\" target=\"_blank\" rel=\"noopener\">Adverty<\/a>, and <a href=\"https:\/\/codecanyon.net\/item\/woomapper-wordpress-plugin-display-woocommerce-products-add-pins-to-images-shop-with-style\/9818699\" target=\"_blank\" rel=\"noopener\">WooMapper<\/a>. We really liked the features that the <a href=\"https:\/\/wordpress.org\/plugins\/draw-attention\/\" target=\"_blank\" rel=\"noopener\">Draw Attention<\/a> plugin packs. You get a lot of value without having to spend any money since the plugin can be downloaded for free from the official WordPress plugin repository.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention.jpg\" class=\"attachment-full size-full\" alt=\"Draw Attention\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The first step is to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">install the plugin<\/a> and activate it on your website. To start creating an interactive image, look for the <em><strong>Draw Attention<\/strong><\/em> option within your menu, and click on <em><strong>Edit Image<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Edit-Image.jpg\" class=\"attachment-full size-full\" alt=\"Draw Attention Edit Image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Edit-Image.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Edit-Image-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Edit-Image-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]First up, you can add the image title that will be visible once the image is displayed.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Title.jpg\" class=\"attachment-full size-full\" alt=\"Draw Attention Title\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Title.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Title-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Title-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, on the right side of the screen add the new image you wish to edit or select one from the media library.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Upload-Image.jpg\" class=\"attachment-full size-full\" alt=\"Draw Attention Upload Image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Upload-Image.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Upload-Image-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Upload-Image-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once the picture uploads, you can adjust numerous styling options and modify colors, enter the default <em>More Info<\/em> text, etc.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Image-Style.jpg\" class=\"attachment-full size-full\" alt=\"Draw Attention Image Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Image-Style.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Image-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Image-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you scroll a bit down the page, you\u2019ll reach the <em><strong>Hotspot Areas<\/strong><\/em> section. This is where you can start adding hotspot areas on your image.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For starters, click on <em><strong>Clickable Area #1<\/strong><\/em>. Your image will now appear under <em><strong>Coordinates<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Coordinates-1.jpg\" class=\"attachment-full size-full\" alt=\"Draw Attention Coordinates\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Coordinates-1.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Coordinates-1-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Coordinates-1-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now simply click the part of the image where you wish to add the first point. <strong>You can draw various hotspot shapes by adding more points which will then form a hotspot area<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Coordinates-2.jpg\" class=\"attachment-full size-full\" alt=\"Draw Attention Coordinates\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Coordinates-2.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Coordinates-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Coordinates-2-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Below the image, you\u2019ll find a set of additional options that allow you to <strong>add a title for your hotspot area, choose what\u2019s going to happen once a user clicks on a hotspot<\/strong> (you can insert more info or add a link which will take them to another web page),<strong> enter a description, and upload an image which will be displayed once the user clicks on the hotspot<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"436\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Coordinates-Options.jpg\" class=\"attachment-full size-full\" alt=\"Draw Attention Coordinates Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Coordinates-Options.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Coordinates-Options-300x187.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Draw-Attention-Coordinates-Options-620x386.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]When you\u2019re happy with the final result, press the <em><strong>Update<\/strong><\/em> button.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now, to add your interactive image to a page or post, <strong>copy the shortcode displayed at the right-hand side of the screen<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Copy-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Copy Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Copy-Shortcode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Copy-Shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Copy-Shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, go to the page where you wish to display the interactive image. In case you\u2019re still using the Classic Editor, paste the code in the <em><strong>Text Editor<\/strong><\/em>. In Gutenberg, add the <em><strong>Shortcode<\/strong><\/em> block first and insert your code. If Elementor is your preferred page builder, add the code to the <em><strong>Shortcode<\/strong><\/em> widget and the interactive image will appear on your page.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Import \/ Export Interactive Images<\/h3>\n<p>[\/vc_column_text][vc_column_text]The Draw Attention plugin packs another practical option that comes in handy in case you\u2019re working on multiple sites and you wish to import and export interactive images from one site to the next.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In that case, you should first install the plugin on both websites. On the website you\u2019d like to export the image from, go to <em><strong>Draw Attention &gt; Import \/ Export<\/strong><\/em>, select the images in question, and press the <em><strong>Generate Export Code<\/strong><\/em> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Generate-Export-Code.jpg\" class=\"attachment-full size-full\" alt=\"Generate Export Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Generate-Export-Code.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Generate-Export-Code-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Generate-Export-Code-620x337.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, copy the entire code.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"465\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Export-Code.jpg\" class=\"attachment-full size-full\" alt=\"Export Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Export-Code.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Export-Code-300x199.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Export-Code-620x412.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next up, go to the other website where you wish to import the image and again, click on <em><strong>Draw Attention &gt; Import \/ Export<\/strong><\/em>, paste your code in the <em><strong>Import<\/strong><\/em> field, and press the<em><strong> Import<\/strong><\/em> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Import-Code.jpg\" class=\"attachment-full size-full\" alt=\"Import Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Import-Code.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Import-Code-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Import-Code-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>The downside of using the free version of this plugin is that it allows you to add just one interactive image to your website<\/strong>. If you choose to upgrade to one of their <a href=\"https:\/\/wpdrawattention.com\/pricing\/\" target=\"_blank\" rel=\"noopener noreferrer\">premium plans<\/a> though, you\u2019ll have the option to add as many interactive images as you need and set an unlimited number of hotspots, select a preferred layout and one of the 20 predefined color palettes, get one year of support and updates, and more.[\/vc_column_text][vc_empty_space height=&#8221;81px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Using <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-360-image-to-wordpress\/\">interactive images<\/a> can indubitably help you keep the visitors on your website and possibly increase your conversion rates. The more interesting and appealing the content you offer is, the more people will want to do business with you. The Draw Attention is a terrific plugin if you\u2019re in need of a solution that will allow you to add an interactive image to your pages hassle-free. Just don\u2019t forget to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-optimize-images-for-web\/\">optimize images<\/a> before uploading them in order to avoid jeopardizing the website\u2019s performance and UX.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Would you like to learn how to add interactive images in WordPress? Follow our step-by-step tutorial and tell your stories in a more vivid and captivating manner<\/p>\n","protected":false},"author":4,"featured_media":13419,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-13391","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/13391","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=13391"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/13391\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/13419"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=13391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=13391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=13391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}