How To Create Interactive Image Hotspots With Elementor

hello everyone it's james from square internet here with another wordpress tutorial in this video i'm going to be showing you how to use the new elementor interactive hotspots on your wordpress websites so if you're wondering what an interactive hotspot is i've got one open for you here looks like a um a little gif on the elementor website showing you what the interactive hotspots are and how they work so as you can see we have an image and we have some hotspots that when hovered or when clicked display a tooltip which has some texts and a button in so it's essentially creating interactive images so you know you have a large image you have some clickable hotspots on the image that display text or content or whatever you might like so that's what i'm going to show you how to do in this video i'm going to walk you through how the hotspot widget works and show you the basics so you can start creating interactive hotspots on your wordpress websites so let's dive right in i've got elementor open in a draft page here and i'm going to set the page layout to canvas again so that we don't have a header or a footer oh i'm just going to refresh the page one second my internet's playing up and we'll set the page to canvas which as i said is disabling the header in the footer so we just have elementor we can get started okay so to demonstrate how the hotspot widget works we want a template that will support a large image so i just want something that looks okay so you can kind of get an idea of how it might look on a an actual page template rather than a blank page just try and find something that will okay this one looks quite good so yeah this is a what looks like an about page this is good so we use this so we've got a large image here and we can use this to demonstrate how the spot works this could be perhaps a about us page for an agency and this could be the team of the agency or the company and you may want to have hotspots perhaps on each member of the team where when you hover or click the hotspot it displays team members name and maybe like a a small blurb about them so let's go ahead and insert this template and we can see how the hotspot widget works okay so i've got an image here and a row what i'm going to do is i'm going to go into elementor and i'm going to search for hotspot i'm going to drag and drop the widget like so uh i don't actually need this image anymore what i'm going to do is i'm going to take that image i'm going to put it in the hotspot widget so the first thing we're going to do is we're going to select the image for the hotspot i'm going to go into the media library and find that image that we just got rid of where is it a large image um this one it looks like there we go so we'll insert the image again and we can get started so that's the first part within the content tab image so you can use whichever image you'd like to form your hotspot so we put in an image we can edit the image size we can set it to full uh we can you know use any of these kind of sizes but i'll imagine you'll want a a nice large image for your hotspot we don't need to play around with any more of the image settings for now let's dive right into how the actual hotspot works so when i click on the hotspot we've got a tool tip displaying this is the tool tip here the box with the text and this floating icon here is the hotspot so let's start with the hotspot and see how it works so if we click into the hotspot at the moment we don't have a lot of stuff populated we've got a content tab and we've got a position tab so let's look at the icon so the icon determines what is actually showing up for the hotspot so you may not want a circle like this so you have two options there for determining what the hotspot icon actually is so you can upload a custom svg or an svg file you've got from somewhere or you can select something from the elementor icon library so you can select anything you want for the hotspot which is pretty cool so maybe you want to use the comment icon you know if you're illustrating something that someone's saying whatever it may be you can select an icon from the elementor library or put your own in i'm going to go back to just a basic circle for now i'll keep that as it is for now so that's that the the next thing i want to look at is the link so we can insert a link so that the hotspot will link the user to a different website or a different part of your website so we just test that out a second oh what's going on just put in um yeah link for google into the link and on the preview for this page if i click the hotspot get redirected to google so that's quite cool you can have a link redirect going on there i don't need that for now so i'll get rid of that uh the second part of the hotspot that we have to look at is the actual content tab so this displays what happens when you click on the hotspot so the tooltip content so you can add any content you know that used uh like in the tool tip box we have a default kind of wordpress editor here so you can add media you can um add span styles here i assume uh structure this any kind of way that you'd like and it's the content that displays when you actually activate the hotspot below that we have an animation so you can control the animation for the hotspot so at the moment it's got a expand animation let me just um uh i don't know my editors being weird let me turn off the background color on the hot spot quickly so that get that back to default i don't know that's the background color okay you can see the animation a bit better i'm going to change the animation from expand to soft beat like so you see the animation's changed it's kind of like a sort of heartbeat animation a soft beat as opposed to expanding and there's also an overlay animation you can choose where it's kind of um the opacity has changed so it's um not opaque anymore it's kind of you know semi-transparent so you can change the animation you can also add a sequenced animation like so if we insert a value here we can control how long the animation takes so that's the animation and the sequence animation we'll leave that on softbeat for now the second important part of the hotspot content tab it's actually the position of the hotspot so this is really important so how do you actually determine where your hotspots go on the image so right now we've got one hotspot and it's kind of right in the middle of the image but you know what happens when we have multiple hotspots how do we control where they go so it's really easy to do and it's done using the horizontal and vertical orientation offsets i'll show you how so if we change this number from 50 to 100 it's either going to move left or right so let's move to the right let's say we want to put the first one in front of this individual here let's so if 100's gone right to the edge of the image let's try um 20 let's try 18 because we kind of want it to be centered and vertical orientation is at 50. let's try putting it to 70 i'm guessing it'll go down okay that's gone down like so so it's kind of almost center aligned on the person so there we go that's how we can position the first hotspot so it's nice and simple as you can see and if you look here we also have responsive options for how we manage this on desktop mobile and tablet if i switch to mobile view we have the ability to control the offsets on mobile as opposed to desktop so at the moment it's it's blocking the face of this person slightly so we could um where are we vertical we could say 90 and then if we switch back to desktop view the desktop view will be what it originally was like so so that's really really super useful for this widget that you can have full control over where the hotspots sit on desktop mobile and tablet so i think that's about everything that i want to cover on the content tab to start with on the hotspots because we've shown you how to place a hotspot let me just show you how to add multiple hotspots now just quickly before i go on to how styling works so we've got three hotspots now but the reason we can't see them i seem is because they're all right on top of each other so i'm going to move this one from the left i want it to be in front of this individual to the right so let's try um changing the offset of some of these hotspots to get these second hotspots showing up okay so there's the second hotspot um i think 28 might be kind of center line there okay great there's the horizontal offset let's do the vertical offset so 80 is towards the bottom so let's try 30 towards the top um okay yeah that looks quite cool um you can obviously place these however you'd like them you know if you have an about us page um according to the individuals in the picture that's the second one let's just grab the third one now and move it out from i assume under here do the same sort of thing so probably 30 for there so let's try 40 [Music] 45 46 46 looks okay and we want to set that to 30 27 let's try 30 so 35 um reduce that by two okay so again that's kind of you know almost uh center with the individual i may as well do these just quickly for you just to get a hot spot underneath every person why not so this one has a duplicate of three so it's set to 44 we just need to increase the number try 56. i've just clicked left right there on the horizontal orientation sometimes you just have to give elementor a bit of a kick to make it um catch up with you so 56 that's not enough 68 looks about right you want to move it up slightly so okay that's fine we'll do the final hotspot we'll go into position it was a clone of number three so it's got these values i think we had 60 something there so let's say um maybe 70 no 80 there looks relatively centered but we're going to want to set this to oh not bad 90 looks about right okay so now we have one two three four five hot spots and each of them are you know relatively in line relatively centered with the individuals in this image so if you are doing a about us page that's how you could add the five hotspots and position them like so and you can copy this process for any kind of image it's just the case of adding hotspots um you know just add one click this duplicate button and then you need to set the positions on the hotspots using the horizontal and the vertical offsets and remember as i showed you you have responsive options on horizontal and vertical offset so you don't have to just set the one value for all devices you can go in and you can play around till they look perfect on desktop mobile and tablet i think that's um everything that i want to cover now in content i'm going to go into style and i'm going to show you how you can actually style the way that the hotspots and the tooltips look and work so you can get them to match the style that you want on your website uh so i'm not a designer but i think to match this template we want something minimal and we want to use um white and black colors so let me just uh grab the black color from this block of text and let's start looking at styling the hotspot so first thing we've got here in the style tab is the um the image settings actually i'm going to come back to the image settings i'm going to focus on hotspot for now and first thing that i want to do is to look at the box color so as i said i'm not a designer but i guess we could do like a black let's try black box [Music] or maybe we want let's try black color on a white box it's got some color there that's inheriting from somewhere i'm not sure where um see what it looks like with a uh white background to contrast because that's kind of what this theme is doing so i'm just setting the color of the box there to white with black uh circle color which looks okay um size second thing we can look at is the actual size of the hot spots so you can make them as big or small as you want like so i guess you can scale that up according to you know the size of the image that you're dealing with you can set it in pixels or you can use the toggle here to just go up and down or you can set them to be a percentage value let's just set them to 15 looks okay typography so you can uh manage the topography for the hotspot and also for the tooltip beneath so you can set it to match you know your theme or your template whatever you might want to use you can set a minimum or a maximum width for the hotspot and you can also control stuff like the padding and the border on the hotspot and the tool tip so if we add padding to the hotspot we're going to be adding some spacing to the inside of the box i assume i just add some padding there you see we've added some spacing between the edges of the hotspot box and the inside icon so you can add that you know as you see fit whatever you think is appropriate for your design i'm sure yours will look a lot better than what i'm doing here and you can also play with the border radius here so i guess we can make a circle as opposed to the square which looks a bit better so yeah we can have a circle within a circle a circle inception so now we've got two circles as opposed to a square there maybe we want to add a little bit more padding now like so uh maybe seven so we can handle padding we can handle a border radius so all the options here we've got for the hotspot and we also have some options for responsive design so the size you can change desktop mobile or tablet so your hotspots on desktop will likely be bigger than the hotspots on a mobile device or a tablet so you can go onto the mobile view and change them as you need the same for the typography you can obviously manage that on a widget or a global level across devices i think that's good for now on the hotspot so let's just now look at the tooltip because i've showed you how we can change the way the actual hotspot works and the styling now we want to control this box here which kind of is doing its own thing at the moment you know we want to make that match the design we want to be able to control the way it looks and works so we'll start with the width it's the same concept as with the tool tip you've got a toggle here you can control how wide the um the tool tip box is so you can set that or you can leave that and just let it kind of set itself according to the text you can control the padding the color the border radius and the box shadow so i think what i want to do is change the color to the black color so that it matches first of all like so and typography that looks uh really quite big for a tool tip let's check what the font that they're using and match that up as well so monsterat font so let's go back into the tooltip and let's match the typography to montserrat there and let's tone that right down to i even think 16 might be a bit too big 12 looks okay maybe 13. like so so now it looks um just to look you know a bit cleaner a bit more professional it's not kind of um going everywhere over the design you can actually read the text so that's good so there's the typography and we have the ability to change the text color there but it looks like it's white by default so it's showing up fine on the background so looks fine for now um i don't think we'd want to make this a circle but we might want to round the edges to sort of match our circle design so you might want to add some border radius to just round the edges slightly like so as you can see it's shaping up quite nicely uh padding again we can do the same thing with padding that we did on the circle so if you want to add some padding on the box you can you can set that kind of as you feel appropriate like so and we can also change the alignment of the tool tip on the hotspot widget so at the moment it's at the bottom but if we set it to let me just um go into the actual tool tip okay so i think that i know why that's not working because we haven't set a width so let's set the width of the box okay yeah so if we increase the width relative to the content we can now change the alignment so we can have it right align left align center aligned like so or justified but i think i'm going to make the um box a uh not set size so that it sort of feels as it needs and just leave it as it is for now the other thing i was just talking about was uh positioning the tooltip relative to the hotspot i realized i didn't show you that so i'm just going to show you that now in the content tab so under tooltip we have position and we can change whether it's uh beneath the hotspot to the right on top or to the left like so so you can set that as you kind of uh want we also have the trigger options here so we can set it to trigger on click or on hover so on hover is quite cool i think you know better than kind of clicking i think it's a bit smoother but i'll leave that to you to obviously decide and we have the animation that we can control on the tooltip as well so whether it fades in or out whether it grows whether it fades by a particular direction or whether it slides by a particular direction again i'll leave that to you to the sides and there's also a duration setting there as well you can control how long the animation actually takes to complete so if we now preview the page let's just look at it see how it's working so there we go we're hovering over our hotspots tool tips popping up it's all kind of working okay it's all kind of within the limits of the image and we now have a working hotspot image that you know took not a lot of time i mean once you've watched the tutorial you could probably have a nice hotspot image working in kind of 20 30 minutes depending on how particular you are about how it works and the design really useful widget from elementor really cool you know i can see lots of ways to create creative new designs using this widget and hopefully you will too if you found the video useful make sure you subscribe to my youtube channel for future videos and was releasing new fresh content probably going to be doing a few hotspot videos because i think it's a really interesting widget and i'll do a few showing a few different ways you can use it thanks as always for watching my videos and hopefully i'll see you on the next videos

Channel: Square Internet

Views: 775

Keywords: elementor, elementor hotspots, elementor interactive hotspots, how to use elementor hotspots, elementor hotspots tutorial, hotspots

Id: LeYRHPjdUgo

Length: 24min 9sec (1449 seconds)

Published: Tue Jun 22 2021