{"id":58191,"date":"2021-03-04T10:42:46","date_gmt":"2021-03-04T10:42:46","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=58191"},"modified":"2021-03-04T10:42:46","modified_gmt":"2021-03-04T10:42:46","slug":"create-responsive-image-hotspots","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/","title":{"rendered":"Creating Responsive Image Hotspots With Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"58191\" class=\"elementor elementor-58191\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-58dce670 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"58dce670\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-61817cee\" data-id=\"61817cee\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e79dccf elementor-widget elementor-widget-text-editor\" data-id=\"e79dccf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Adding a layer of playful interaction to your website can be an effective way to catch visitors&#8217; interest and encourage them to stick around. However, keeping interactivity consistent across desktop, mobile, and tablet devices can be a challenge.<\/p><p>Fortunately, adding responsive image hotspots to your site can help you spark your audience\u2019s imagination. Also, because hotspots are mobile-responsive, you can use them to provide a five-star, interactive experience across all platforms.<\/p><p>In this article, we&#8217;ll introduce you to image hotspots and discuss the benefits of using them. Then we&#8217;ll show you how to add hotspots to your images and ensure that they remain perfectly positioned on desktop and mobile devices. Let&#8217;s get started!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-46c24c3d elementor-align-center elementor-widget elementor-widget-button\" data-id=\"46c24c3d\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/blog\/how-to-create-animated-emblem-logo\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Learn How To Create an Animated Emblem Logo With Elementor<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ce5c682 blog-toc elementor-widget elementor-widget-heading\" data-id=\"ce5c682\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Table of Contents<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6bb6df2 blog-toc elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"6bb6df2\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#an-introduction-to-image-hotspots\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">An Introduction To Image Hotspots (and Why You Might Want To Use Them)<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#how-to-create-responsive-image-hotspots-with-elementor\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">How To Create Responsive Image Hotspots With Elementor (in 5 Steps)<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#assemble-your-elementor-widgets\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Step 1: Assemble Your Elementor Widgets<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#adding-content-to-your-flip-box-widget\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Step 2: Adding Content To Your Flip Box Widget<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#stylizing-your-flip-box-widget\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Step 3: Stylizing Your Flip Box Widget<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#position-and-size-your-hotspot\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Step 4: Position and Size Your Hotspot<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#make-your-hotspot-mobile-responsive\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Step 5: Make Your Hotspot Mobile-Responsive<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-20f8215 elementor-widget elementor-widget-menu-anchor\" data-id=\"20f8215\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"an-introduction-to-image-hotspots\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ec04333 elementor-widget elementor-widget-heading\" data-id=\"ec04333\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">An Introduction To Image Hotspots (and Why You Might Want To Use Them)\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa570be elementor-widget elementor-widget-text-editor\" data-id=\"fa570be\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A picture may be worth a thousand words, but it\u2019s not always possible to communicate everything you want to say in a single image. However, image hotspots offer an effective, user-friendly way to provide additional context for your images.\u00a0<\/p><p>Hotspots are interactive pins that are displayed on a specific area of an image. To engage with a hotspot, you can either hover over it or give it a click. When you do, a popup will appear which may contain a headline, text, image, buttons, or even a video:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cd4e9d8 elementor-widget elementor-widget-video\" data-id=\"cd4e9d8\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/03\/Image-Hotspots.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7d02f6f elementor-widget elementor-widget-text-editor\" data-id=\"7d02f6f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Hotspots can make your images more interesting and encourage visitors to interact and stay longer on your website. They also enable visitors to access more content without having to navigate to a new page, which can help <a href=\"https:\/\/elementor.com\/blog\/speed-up-wordpress-website\/\" target=\"_blank\" rel=\"noopener\">minimize loading times<\/a>.<\/p><p>You can even add links and buttons to your hotspots to further drive visitor engagement. Collectively, hotspots can have a positive impact on the User Experience (UX) and your <a href=\"https:\/\/elementor.com\/blog\/conversion-expert-roundup-2019\/\" target=\"_blank\" rel=\"noopener\">conversion rates<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-077b2b3 elementor-widget elementor-widget-menu-anchor\" data-id=\"077b2b3\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"how-to-create-responsive-image-hotspots-with-elementor\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eeb0c4e elementor-widget elementor-widget-heading\" data-id=\"eeb0c4e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How To Create Responsive Image Hotspots With Elementor (in 5 Steps)\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e6805a8 elementor-widget elementor-widget-text-editor\" data-id=\"e6805a8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Adding responsive hotspots to your images can be a fun way to catch a visitor&#8217;s interest and encourage them to engage with your content. With this in mind, let\u2019s look at how you can create them in five simple steps using Elementor.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d6c29ec elementor-widget elementor-widget-menu-anchor\" data-id=\"d6c29ec\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"assemble-your-elementor-widgets\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9ebfbbf elementor-widget elementor-widget-heading\" data-id=\"9ebfbbf\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 1: Assemble Your Elementor Widgets\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f6af504 elementor-widget elementor-widget-text-editor\" data-id=\"f6af504\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We\u2019ll create our responsive hotspot using our <a href=\"https:\/\/elementor.com\/help\/flip-box-widget-pro\/\" target=\"_blank\" rel=\"noopener\">Flip Box widget<\/a>. As the name suggests, this is a box that flips when you hover over it. To start, add the image that you want to be annotated with hotspots using the Elementor <a href=\"https:\/\/elementor.com\/blog\/image-design\/\" target=\"_blank\" rel=\"noopener\">Image widget<\/a>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-672e579 elementor-widget elementor-widget-image\" data-id=\"672e579\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Hotspots-Add-Image-Widget-r4q6yt1pujdmw2a96dyd6k5wi20jrpl225eexohyau.jpg\" title=\"Hotspots &#8211; Add Image Widget\" alt=\"Hotspots - Add Image Widget\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fdcaf96 elementor-widget elementor-widget-text-editor\" data-id=\"fdcaf96\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you plan to have this effect displayed on mobile, the best practice would be to use an image with portrait orientation, otherwise, an image on landscape may be too small when it\u2019s viewed on mobile. <br \/><br \/>Once you are done, make sure that the column takes up the full width and height of your image. You can remove the default padding by entering the column\u2019s settings. Hover your cursor over the column and click the grey icon that appears at the top left. In the advanced tab, set the padding to 0 like this:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca1e212 elementor-widget elementor-widget-image\" data-id=\"ca1e212\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"452\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=452\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Remove-Column-Padding-1024x579.jpg\" class=\"attachment-large size-large wp-image-58388\" alt=\"Hotspots - Remove Column Padding\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Remove-Column-Padding-1024x579.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Remove-Column-Padding-300x170.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Remove-Column-Padding-768x434.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Remove-Column-Padding-1536x869.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2000\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Remove-Column-Padding.jpg 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-697793c elementor-widget elementor-widget-text-editor\" data-id=\"697793c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, you can drag a Flip Box widget into the same column as your Image widget. You\u2019ll notice that the Flip Box widget has two sides. The green side is the front, which will be displayed by default. We\u2019ll make this side transparent, apart from an icon, which we will communicate as an interactive hotspot:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f0fd18b elementor-widget elementor-widget-image\" data-id=\"f0fd18b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/hotspots-Front-r4q74e76h30zwm62jswj05ejmih3ixrm5t0bmw7pba.jpg\" title=\"hotspots &#8211; Front\" alt=\"hotspots - Front\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-67ce1d8 elementor-widget elementor-widget-text-editor\" data-id=\"67ce1d8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you hover over this widget, it will flip to a purple side. This is the side where we\u2019ll create our hotspot\u2019s content:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f7766b elementor-widget elementor-widget-image\" data-id=\"1f7766b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"452\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=452\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Back-1024x579.jpg\" class=\"attachment-large size-large wp-image-58390\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Back-1024x579.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Back-300x170.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Back-768x434.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Back-1536x869.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2000\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Back.jpg 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-77b538d elementor-widget elementor-widget-text-editor\" data-id=\"77b538d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You can populate the hotspot side with a heading, description, and a button. The latter is great for annotating your images with engaging Calls To Action (CTA).\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-459fce7 elementor-widget elementor-widget-menu-anchor\" data-id=\"459fce7\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"adding-content-to-your-flip-box-widget\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc133dd elementor-widget elementor-widget-heading\" data-id=\"dc133dd\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 2: Adding Content To Your Flip Box Widget<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d29e6f elementor-widget elementor-widget-text-editor\" data-id=\"0d29e6f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now, we\u2019ll <a href=\"https:\/\/elementor.com\/help\/icon-library\/\" target=\"_blank\" rel=\"noopener\">add an icon<\/a> to our Flip Box widget. The icon will serve as a pin, signaling to visitors that there\u2019s more content for them to uncover.\u00a0<\/p><p>To start, you can click to select your Flip Box widget. In the Elementor Panel, select <strong>Icon.<\/strong> You can then choose the icon that you want to use in your hotspot:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d36536c elementor-widget elementor-widget-image\" data-id=\"d36536c\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Hotspots-Select-Icon-r4q6yfvz6uvmditdb89l7nhg6ntery4tcc9m7t1gpy.jpg\" title=\"Hotspots &#8211; Select Icon\" alt=\"Hotspots - Select Icon\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-528d193 elementor-widget elementor-widget-text-editor\" data-id=\"528d193\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, we need to remove all other content from the Flip Box widget\u2019s default side. In the Elementor Panel, go ahead and delete all of the text in the <strong>Title &amp; Description<\/strong> fields:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-134aad1 elementor-widget elementor-widget-image\" data-id=\"134aad1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Hotspots-Delete-Title-Description-r4q75sygq4yhbk4cbeudqslfpbix2ld4cs8jju4fza.jpg\" title=\"Hotspots &#8211; Delete Title &amp; Description\" alt=\"Hotspots - Delete Title &amp; Description\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-47cadae elementor-widget elementor-widget-text-editor\" data-id=\"47cadae\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The front of your Flip Box widget should now be completely blank, except for an icon. Finally, we need to remove the widget\u2019s background by selecting <strong>Background<\/strong>. Then you can launch the color picker by selecting <strong>Color<\/strong>. Next, grab the transparency slider and drag it all the way to the left, so your widget turns completely see-through:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0a205ae elementor-widget elementor-widget-image\" data-id=\"0a205ae\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"452\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=452\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Remove-Background-1024x579.jpg\" class=\"attachment-large size-large wp-image-58393\" alt=\"Hotspots - Remove Background\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Remove-Background-1024x579.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Remove-Background-300x170.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Remove-Background-768x434.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Remove-Background-1536x869.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2000\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Remove-Background.jpg 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-25443ed elementor-widget elementor-widget-text-editor\" data-id=\"25443ed\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, we\u2019ll add the content that will display whenever a visitor interacts with your hotspot. Expand the Back tab and add your title and description:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dbad513 elementor-widget elementor-widget-image\" data-id=\"dbad513\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Hotspots-Title-Description-Back-r4q73gczn1qoanj81e9yidxy8n3vtu1a15iucxlvja.jpg\" title=\"Hotspots &#8211; Title &amp; Description &#8211; Back\" alt=\"Hotspots - Title &amp; Description - Back\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-db55141 elementor-widget elementor-widget-text-editor\" data-id=\"db55141\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>By default, the Flip Box widget features a button. You can delete this button by removing its text. Alternatively, you can create a CTA by customizing the placeholder button label and adding your own URL. You can also select whether this link is applied directly on the button or on the entire side of the flip-box:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-65d5e15 elementor-widget elementor-widget-image\" data-id=\"65d5e15\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"452\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=452\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Setting-up-your-CTA-1024x579.jpg\" class=\"attachment-large size-large wp-image-58395\" alt=\"Hotspots Setting up your CTA\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Setting-up-your-CTA-1024x579.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Setting-up-your-CTA-300x170.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Setting-up-your-CTA-768x434.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Setting-up-your-CTA-1536x869.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2000\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Setting-up-your-CTA.jpg 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-16c3d79 elementor-widget elementor-widget-text-editor\" data-id=\"16c3d79\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, you can choose a background color for your hotspot\u2019s popup. In the <strong>Elementor Panel<\/strong>, select <strong>Background<\/strong> &gt; <strong>Background: Classic<\/strong>. To launch the picker, click on Color, and then make your selection. Alternatively, you have the option to use an image or a gradient color but in our example, we will select a white background:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-274f927 elementor-widget elementor-widget-image\" data-id=\"274f927\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"452\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=452\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Choosing-a-Background-Back-1024x579.jpg\" class=\"attachment-large size-large wp-image-58396\" alt=\"Hotspots - Choosing a Background - Back\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Choosing-a-Background-Back-1024x579.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Choosing-a-Background-Back-300x170.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Choosing-a-Background-Back-768x434.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Choosing-a-Background-Back-1536x869.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2000\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Choosing-a-Background-Back.jpg 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f08a1d elementor-widget elementor-widget-text-editor\" data-id=\"9f08a1d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>After choosing your background, you may need to change your text color. It\u2019s time to head to the next step.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2c2e4be elementor-widget elementor-widget-menu-anchor\" data-id=\"2c2e4be\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"stylizing-your-flip-box-widget\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1bfce60 elementor-widget elementor-widget-heading\" data-id=\"1bfce60\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 3: Stylizing Your Flip Box Widget<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f6bfceb elementor-widget elementor-widget-text-editor\" data-id=\"f6bfceb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Since we finished populating our Flip-Box widget with content, the time to stylize it has come. Navigate to the Style tab. Here you will find a variety of options to customize your icon according to your design needs. <br \/><br \/>It is important to know that the easiest way to position an icon and keep it responsive on all devices is by aligning it at the top left. In the Alignment select Left, and in Vertical Position select Top. We will also remove any extra padding by setting it to zero:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8001245 elementor-widget elementor-widget-image\" data-id=\"8001245\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"452\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=452\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Front-Style-1024x579.jpg\" class=\"attachment-large size-large wp-image-58397\" alt=\"Hotspots - Front Style\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Front-Style-1024x579.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Front-Style-300x170.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Front-Style-768x434.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Front-Style-1536x869.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2000\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Front-Style.jpg 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0a83720 elementor-widget elementor-widget-text-editor\" data-id=\"0a83720\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Play around with the other options to change the color of your icon, its size, and rotation, and once you are done click on the Back tab to expand it.<\/p><p>Just like in the Front side of the Flip-box here we can change the Alignment, Vertical Position, and change the Padding as well. In this example, we will leave them as they are set by default.<\/p><p>Next, change the font style, size, and color to make it clear and visible for the visitors, and don\u2019t forget to edit your button!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e3a06de elementor-widget elementor-widget-image\" data-id=\"e3a06de\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"452\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=452\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Back-Style-1024x579.jpg\" class=\"attachment-large size-large wp-image-58398\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Back-Style-1024x579.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Back-Style-300x170.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Back-Style-768x434.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Back-Style-1536x869.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2000\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Back-Style.jpg 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-068f464 elementor-widget elementor-widget-menu-anchor\" data-id=\"068f464\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"position-and-size-your-hotspot\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2496c2f elementor-widget elementor-widget-heading\" data-id=\"2496c2f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 4: Position and Size Your Hotspot\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-43a5414 elementor-widget elementor-widget-text-editor\" data-id=\"43a5414\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When it comes to image hotspots, positioning and sizing are everything. To perfect where your hotspot appears on the page, click on the <strong>Advanced<\/strong> tab. Then you can click to expand the <strong>Positioning<\/strong> section:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7b6665e elementor-widget elementor-widget-image\" data-id=\"7b6665e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"452\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=452\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Flip-box-Positioning-1024x579.jpg\" class=\"attachment-large size-large wp-image-58399\" alt=\"Hotspots - Flip-box Positioning\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Flip-box-Positioning-1024x579.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Flip-box-Positioning-300x170.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Flip-box-Positioning-768x434.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Flip-box-Positioning-1536x869.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2000\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Flip-box-Positioning.jpg 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9308203 elementor-widget elementor-widget-text-editor\" data-id=\"9308203\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, open the <strong>Width<\/strong> drop-down menu and choose <strong>Custom<\/strong>. You can specify exactly how large your hotspot should be, or use responsive units like percentages and viewport width. You can even leave it by default to take the full horizontal space according to your design. Hover your cursor over the Flip-box widget to make sure your content on the other side is looking good.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4a25bf0 elementor-widget elementor-widget-image\" data-id=\"4a25bf0\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"452\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=452\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Custom-Width-1024x579.jpg\" class=\"attachment-large size-large wp-image-58400\" alt=\"Hotspots - Custom Width\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Custom-Width-1024x579.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Custom-Width-300x170.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Custom-Width-768x434.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Custom-Width-1536x869.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2000\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Custom-Width.jpg 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-93f948b elementor-widget elementor-widget-text-editor\" data-id=\"93f948b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Then set the <strong>Position<\/strong> drop-down menu to <strong>Absolute positioning<\/strong>.\u00a0This will remove your Flip-box widget from the flow of widgets on your page, removing its physical height from the column, and making it easier to position above your image:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c8dc809 elementor-widget elementor-widget-image\" data-id=\"c8dc809\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"452\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=452\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Absolute-Positioning-1024x579.jpg\" class=\"attachment-large size-large wp-image-58401\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Absolute-Positioning-1024x579.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Absolute-Positioning-300x170.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Absolute-Positioning-768x434.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Absolute-Positioning-1536x869.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2000\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Absolute-Positioning.jpg 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-77ae811 elementor-widget elementor-widget-text-editor\" data-id=\"77ae811\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To make your image hotspot <a href=\"https:\/\/elementor.com\/blog\/introducing-mobile-editing\/\" target=\"_blank\" rel=\"noopener\">responsive<\/a>,\u00a0you\u2019ll want to ensure that the Column, the Image, and the Flip Box widgets all resize simultaneously while maintaining the same aspect ratio.<\/p><p>The first step is to use percentages instead of pixels for your offsets. This ensures that your Flip Box widget is positioned relative to the column\u2019s changing width and height on different screen sizes.<\/p><p>In the Elementor Panel, you can select the percentage option for both the Horizontal Orientation and Vertical Orientation. Then you can maneuver your hotspot into position using the two sliders or simply dragging it around with your cursor:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4d1e967 elementor-widget elementor-widget-image\" data-id=\"4d1e967\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"452\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=452\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Responsive-Absolute-Positioning-1024x579.jpg\" class=\"attachment-large size-large wp-image-58402\" alt=\"Hotspots - Responsive Absolute Positioning\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Responsive-Absolute-Positioning-1024x579.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Responsive-Absolute-Positioning-300x170.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Responsive-Absolute-Positioning-768x434.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Responsive-Absolute-Positioning-1536x869.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2000\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Responsive-Absolute-Positioning.jpg 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3319ddd elementor-widget elementor-widget-text-editor\" data-id=\"3319ddd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Lastly, go back to the Content\u2019s tab, and click on the Settings to expand it. Here, you can control the widget\u2019s height and select a Flip Effect animation that will play whenever someone interacts with your hotspot. <\/p><p>For this example, we will leave the height as default and then open the Flip Effect drop-down menu. You can preview an animation by selecting it from the menu and hovering over your Flip Box widget:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7eef192 elementor-widget elementor-widget-video\" data-id=\"7eef192\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/03\/Hotspots-Flip-Effects.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-976f0c3 elementor-widget elementor-widget-text-editor\" data-id=\"976f0c3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Play around with different Flip Effects, in combination with your content\u2019s position that we saw back in Step 3, and create beautiful animations that will engage your visitors.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f5cebff elementor-widget elementor-widget-menu-anchor\" data-id=\"f5cebff\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"make-your-hotspot-mobile-responsive\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0ee1c45 elementor-widget elementor-widget-heading\" data-id=\"0ee1c45\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 5: Make Your Hotspot Mobile-Responsive\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-701c68c elementor-widget elementor-widget-text-editor\" data-id=\"701c68c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The number of smartphone users has <a href=\"https:\/\/www.statista.com\/statistics\/330695\/number-of-smartphone-users-worldwide\/\">surpassed three billion<\/a>. Therefore, if you\u2019re going to connect with the widest possible audience, it\u2019s vital that all parts of your <a href=\"https:\/\/elementor.com\/blog\/responsive-web-design-challenges\/\" target=\"_blank\" rel=\"noopener\">website are mobile-friendly<\/a>.\u00a0<\/p><p>Once you\u2019re happy with how your hotspot displays and functions in Elementor\u2019s default <strong>Desktop<\/strong> view, it\u2019s important to test the UX on different devices. You can use Elementor\u2019s built-in <a href=\"https:\/\/elementor.com\/help\/mobile-editing\/\" target=\"_blank\" rel=\"noopener\">Responsive Mode<\/a> to preview how your layout will render across non-desktop devices. To access this mode, select the <strong>Responsive Mode<\/strong> icon at the bottom of the Elementor Panel and click <strong>Tablet<\/strong>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-622f07b elementor-widget elementor-widget-video\" data-id=\"622f07b\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/03\/Hotspots-Viewport-Testing-1.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d280f3 elementor-widget elementor-widget-text-editor\" data-id=\"5d280f3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The image, column, and hotspot should resize automatically for the smaller screens. Since we used responsive units to position our Flip-Box, it aligns perfectly in this viewport.<\/p><p>If you feel that you need to make changes in your Flip-Box\u2019s content and position, you can adjust its settings by repeating the previous steps. When you make a change on different Viewports, make sure that the Viewport Icon is next to the option you alter, otherwise, your changes will affect all the viewports:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6da4bc0 elementor-widget elementor-widget-image\" data-id=\"6da4bc0\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"452\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=452\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Responsive-Viewport-Icon-1024x579.jpg\" class=\"attachment-large size-large wp-image-58405\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Responsive-Viewport-Icon-1024x579.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Responsive-Viewport-Icon-300x170.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Responsive-Viewport-Icon-768x434.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Responsive-Viewport-Icon-1536x869.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2000\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Responsive-Viewport-Icon.jpg 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-49aed16 elementor-widget elementor-widget-text-editor\" data-id=\"49aed16\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>After verifying that your image hotspot displays correctly on tablet devices, it\u2019s time to test how it renders on mobile phones by selecting <strong>Responsive Mode<\/strong> &gt; <strong>Mobile<\/strong>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-34837d2 elementor-widget elementor-widget-image\" data-id=\"34837d2\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"452\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=452\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Mobile-Viewport-1024x579.jpg\" class=\"attachment-large size-large wp-image-58406\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Mobile-Viewport-1024x579.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Mobile-Viewport-300x170.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Mobile-Viewport-768x434.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Mobile-Viewport-1536x869.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2000\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Mobile-Viewport.jpg 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f4cbbd7 elementor-widget elementor-widget-text-editor\" data-id=\"f4cbbd7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When you switch to mobile mode, the Column, Image, and Hotspot should resize automatically for the smaller screen.<\/p><p>It\u2019s important to view both sides of your Flip-box widget and make sure that your text is displayed correctly. You might need to tweak the back of your hotspot\u2019s padding, width, height, and font size according to your design needs:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-55f47c6 elementor-widget elementor-widget-image\" data-id=\"55f47c6\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"452\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=452\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Mobile-Responsive-Edits-1024x579.jpg\" class=\"attachment-large size-large wp-image-58407\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Mobile-Responsive-Edits-1024x579.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Mobile-Responsive-Edits-300x170.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Mobile-Responsive-Edits-768x434.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Mobile-Responsive-Edits-1536x869.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2000\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Mobile-Responsive-Edits.jpg 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fd6cd8c elementor-widget elementor-widget-text-editor\" data-id=\"fd6cd8c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>After making these changes, your hotspot is ready! You can be confident that your responsive image hotspot will look and function correctly, regardless of whether the visitor is using a smartphone, tablet, or desktop computer.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-317792c elementor-widget elementor-widget-video\" data-id=\"317792c\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/03\/Hotspots-Viewport-Testing.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ec835fb elementor-widget elementor-widget-text-editor\" data-id=\"ec835fb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now you can go ahead and duplicate your widget to create more hotspots. Switch back to Desktop View and Right-click on the Flip-box widget, then click duplicate.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ea245e6 elementor-widget elementor-widget-image\" data-id=\"ea245e6\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"452\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=452\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Duplicate-1024x579.jpg\" class=\"attachment-large size-large wp-image-58409\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Duplicate-1024x579.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Duplicate-300x170.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Duplicate-768x434.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Duplicate-1536x869.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2000\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Duplicate.jpg 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-26bb59a elementor-widget elementor-widget-text-editor\" data-id=\"26bb59a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Position the hotspots just like we did in Step 5 by going to <strong>Advanced<\/strong> &gt; <strong>Positioning<\/strong> &gt; and set the Offset of the Horizontal Orientation and Vertical Orientation accordingly. Make sure you leave enough space between them so they won\u2019t overlap:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d57c42 elementor-widget elementor-widget-image\" data-id=\"0d57c42\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"452\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=452\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Duplicate-Position-1024x579.jpg\" class=\"attachment-large size-large wp-image-58410\" alt=\"Hotspots - Duplicate Position\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Duplicate-Position-1024x579.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Duplicate-Position-300x170.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Duplicate-Position-768x434.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Duplicate-Position-1536x869.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2000\/blog\/wp-content\/uploads\/2021\/03\/Hotspots-Duplicate-Position.jpg 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-54b2634 elementor-widget elementor-widget-text-editor\" data-id=\"54b2634\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Change your new Hotspot\u2019s information by navigating to the Content\u2019s tab and click Back to expand it, just like we did in Step 2. Since we duplicated the widget, the responsive options we applied before will be automatically copied, but double-check that everything works correctly on Tablet and Mobile Viewports too. <\/p><p>Once you are done, your image hotspots are ready to grab the visitor\u2019s attention!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-26ca2c7 elementor-widget elementor-widget-video\" data-id=\"26ca2c7\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/03\/Image-Hotspots-1.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-937f6d9 elementor-widget elementor-widget-heading\" data-id=\"937f6d9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Drive Conversions and Engagement With Interactive Hotspots\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-58efd47 elementor-widget elementor-widget-text-editor\" data-id=\"58efd47\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When designing your website, it\u2019s smart to look for opportunities to engage and delight your visitors. Image hotspots can be a valuable addition to your web development toolbox. These interactive elements let you provide users with easy access to the information they need in an innovative way.<\/p><p>As we discussed in this article, you can use <a href=\"https:\/\/elementor.com\/widgets\/\" target=\"_blank\" rel=\"noopener\">Elementor\u2019s Image and Flip Box widgets<\/a> to create a hotspot. You can also use <a href=\"https:\/\/elementor.com\/help\/mobile-editing\/\" target=\"_blank\" rel=\"noopener\">our Responsive Mode<\/a> to control exactly how the hotspot displays and functions across desktop, smartphone, and tablet devices.\u00a0<\/p><p>Do you have any questions about how to create mobile-responsive image hotspots using Elementor? Let us know in the comments section below!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Image hotspots provide an aesthetically pleasing way to offer your users interactive content. Learn more about image hotspots and how to deploy them using Elementor.\u00a0<\/p>\n","protected":false},"author":1328336,"featured_media":58199,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[32],"tags":[79,173],"marketing_persona":[47],"marketing_intent":[48],"class_list":["post-58191","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-build","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creating Responsive Image Hotspots With Elementor<\/title>\n<meta name=\"description\" content=\"Image hotspots provide an aesthetically pleasing way to offer your users interactive content. Learn more about image hotspots and how to deploy them.\u00a0\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Responsive Image Hotspots With Elementor\" \/>\n<meta property=\"og:description\" content=\"Image hotspots provide an aesthetically pleasing way to offer your users interactive content. Learn more about image hotspots and how to deploy them.\u00a0\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-04T10:42:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2021\/03\/Image_hotspot-04-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"5001\" \/>\n\t<meta property=\"og:image:height\" content=\"2618\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Steven Kiridis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steven Kiridis\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/\"},\"author\":{\"name\":\"Steven Kiridis\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/a3ed147bf50c1f2dfb9d6c6dc624ed6a\"},\"headline\":\"Creating Responsive Image Hotspots With Elementor\",\"datePublished\":\"2021-03-04T10:42:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/\"},\"wordCount\":2131,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/03\/Image_hotspot-03.png\",\"keywords\":[\"Build\",\"Video\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/\",\"url\":\"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/\",\"name\":\"Creating Responsive Image Hotspots With Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/03\/Image_hotspot-03.png\",\"datePublished\":\"2021-03-04T10:42:46+00:00\",\"description\":\"Image hotspots provide an aesthetically pleasing way to offer your users interactive content. Learn more about image hotspots and how to deploy them.\u00a0\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/03\/Image_hotspot-03.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/03\/Image_hotspot-03.png\",\"width\":5001,\"height\":2618},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/elementor.com\/blog\/category\/design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Creating Responsive Image Hotspots With Elementor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/a3ed147bf50c1f2dfb9d6c6dc624ed6a\",\"name\":\"Steven Kiridis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d1f85b3db9e8bab5ee82ac97085408441f499cbd5c22de713a4d27337106db1f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d1f85b3db9e8bab5ee82ac97085408441f499cbd5c22de713a4d27337106db1f?s=96&d=mm&r=g\",\"caption\":\"Steven Kiridis\"},\"description\":\"Steven is a Web Designer and Educator at Elementor. He loves creating interactive and playful websites that promote user-friendly journeys. When he is not performing CSS experiments in his mad lab, he enjoys playing the piano, doing gymnastics, and traveling.\",\"url\":\"https:\/\/elementor.com\/blog\/author\/user-5f3a509c55637\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating Responsive Image Hotspots With Elementor","description":"Image hotspots provide an aesthetically pleasing way to offer your users interactive content. Learn more about image hotspots and how to deploy them.\u00a0","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/","og_locale":"en_US","og_type":"article","og_title":"Creating Responsive Image Hotspots With Elementor","og_description":"Image hotspots provide an aesthetically pleasing way to offer your users interactive content. Learn more about image hotspots and how to deploy them.\u00a0","og_url":"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2021-03-04T10:42:46+00:00","og_image":[{"width":5001,"height":2618,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2021\/03\/Image_hotspot-04-2.png","type":"image\/png"}],"author":"Steven Kiridis","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Steven Kiridis"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/"},"author":{"name":"Steven Kiridis","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/a3ed147bf50c1f2dfb9d6c6dc624ed6a"},"headline":"Creating Responsive Image Hotspots With Elementor","datePublished":"2021-03-04T10:42:46+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/"},"wordCount":2131,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/03\/Image_hotspot-03.png","keywords":["Build","Video"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/","url":"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/","name":"Creating Responsive Image Hotspots With Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/03\/Image_hotspot-03.png","datePublished":"2021-03-04T10:42:46+00:00","description":"Image hotspots provide an aesthetically pleasing way to offer your users interactive content. Learn more about image hotspots and how to deploy them.\u00a0","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/03\/Image_hotspot-03.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/03\/Image_hotspot-03.png","width":5001,"height":2618},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/create-responsive-image-hotspots\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/elementor.com\/blog\/category\/design\/"},{"@type":"ListItem","position":3,"name":"Creating Responsive Image Hotspots With Elementor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/a3ed147bf50c1f2dfb9d6c6dc624ed6a","name":"Steven Kiridis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d1f85b3db9e8bab5ee82ac97085408441f499cbd5c22de713a4d27337106db1f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d1f85b3db9e8bab5ee82ac97085408441f499cbd5c22de713a4d27337106db1f?s=96&d=mm&r=g","caption":"Steven Kiridis"},"description":"Steven is a Web Designer and Educator at Elementor. He loves creating interactive and playful websites that promote user-friendly journeys. When he is not performing CSS experiments in his mad lab, he enjoys playing the piano, doing gymnastics, and traveling.","url":"https:\/\/elementor.com\/blog\/author\/user-5f3a509c55637\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/58191","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/1328336"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=58191"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/58191\/revisions"}],"predecessor-version":[{"id":93919,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/58191\/revisions\/93919"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/58199"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=58191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=58191"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=58191"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=58191"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=58191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}