In this Tips & Tricks Tutorial, we learn how to create responsive-friendly Image Hotspots entirely with Elementor. Adding a layer of playful UX is a great way to increase website conversion rates and really make them stand out!
We use Elementor’s Image and Flip Box widgets to build this effect while going over the fundamentals of absolute positioning.
This tutorial will cover:
✔︎ How to create and use Image Hotspots
✔︎ Understand the Image and Flip Box widgets
✔︎ Absolute positioning
✔︎ Responsiveness with Absolute positioning
✔︎ Column Alignment
✔︎ And more!
Hi, and welcome to another Tips & Tricks tutorial!
Today we will learn how to create this awesome effect!
.
As you get more experienced with Elementor, you will start thinking of different and more creative ways to use Elementor’s widgets and their functionality.. Outside the box, outside the flip-box!
We are going to use Elementor’s flip-box widget to create amazing image hotspots!
First, let’s get a good understanding of what the image hotspots are and how to use them.
Image hotspots are pins, displayed on certain areas of an image, that upon click or hover over with a cursor, an action performs, usually to display more information.
It’s a friendly and interactive way to draw the user’s attention and allow them to quickly view information without having to navigate to a different page.
There are many ways to create this effect.
I will show an example in this tutorial and you can customise it according to your design needs.
Let’s start with the first one. We will create the image hotspots using Elementor’s image and flip-box widgets.
Let’s delete this and start from scratch.
Drag an Image widget to this empty column and then select the image of your choice.
Next we’ll add the flip Box widget. Drag and drop it anywhere inside the column.
As you can see, the Flip Box widget has two sides. The front is the one that is actively displayed and when you hover your cursor over it, you trigger the back side to appear.
We will customise each side to give the desirable look of our hotspots.
For our design, we only need an icon in the front side.
I will choose the circle for this one, but you can choose any icon you like.
Delete the heading and it’s description, and lastly in the background tab, remove the default colour by dragging it to zero.
Great.
Now let’s change it’s width and then position it, so we can see the changes better.
In the advanced tab, under positioning, set the width to custom. You can skip this step if you want the width to take 100% of the section.
In this design we will set it to 222px. 1
Much better.
Let’s position it on top of the image next to the left frame, so when a user hovers their cursor over that area, information about the frames will be displayed.
To do that, go to the advanced tab and under positioning, set the position to absolute.
As you can see more options became available, but also this warning message appeared.
Setting custom position on elements, helps in placing them exactly where we want, but when switching to different viewports and screen sizes, it will make them move as well from their original place.
I will show you how to use absolute positioning to make a responsive design.
First we need to understand how absolute positioning works.
All the widgets are relatively placed inside a column, so we could say that the column is their container. Once we set a widget’s positioning to absolute, it stops interacting relatively with other elements, therefore you see that it has stopped taking space inside the column.
The units we are going to use to set the widget’s position will be in percentages. This way even if the column resizes, the percentages will always stay the same according to the column’s current width and height.
(Video reference)
Keep in mind, we want to make the hotspots responsive, so we will use absolute positioning and percentages. This way, when the column resizes according to different screen sizes, the icon will keep its position since it’s percentage will change as well.
Let’s see how that works.
Set the offset units to percentages, then you can either manually drag the widget to the place you like or drag the handles till you find the perfect position.
Here is perfect for my design.
If you have a lot of content I would advise you to change the position of your icon here, and set it to the top left. This way it will stay in the right position no matter the amount of content you have in.
In our case we don’t have a lot of content in our hotspots, so we will keep it centered.
Now it’s time to style the back side of the flip box.
Go to Content, expand the back tab.. Here we will add the information that will be displayed once the user hovers over the icon.
Let’s give some information about the frames here.
We won’t need a button on this example, so go ahead and delete it by removing it’s text.
In the background, set the colour to white.
In style, make the icon size a bit smaller.
In the back tab, set the spacing to 10 and change the text colour of the title and description to black.
We are almost done.
Go back to the content one more time and open the settings tab.
Here we will edit the animation and change the height of the widget.
I will set the height to 300px.
Next, expand the Flip Effect and play around with the options it gives you. Choose the one that fits best your design, which in our case will be the Zoom In effect.
We can also add motion effects that are triggered on scroll, or on mouse movement. This will draw the user’s attention while navigating to your website.
Go to the Advanced tab and under Motion Effects, toggle the mouse effects to on. Select the mouse track and drag the speed to 0.3.
This effect will only work when a user displays it from laptop and desktop and not on mobile or tablet devices, which don’t have a cursor.
Now our image hotspot is ready!
How does it look when we switch to the tablet though?
-New script-
The first thing we need to do is fix the position of the columns. We will set the second column to 100% so it will wrap underneath.
For the first column, we will slightly increase the width by setting it to 68%.
We don’t want to set the column to 100% because the image’s orientation is not landscape but portrait and if we did that, it would leave empty space.
The pins are positioned according to column’s size, not the image’s. For this reason we need to make sure that the image always takes the full width and height of the column.
-Previous script-
Because this image has a portrait orientation, we cannot make the column take 100% of the section’s space because the pins are relative to the column, not the image.
-Continues here-
But then how can we position a column that hasn’t got the full width?
I have another simple trick for you. Go to the column’s settings, advanced and click on custom css.
Here we can set the margin to auto, which means it will automatically align itself to the centre.
Type selector, open and close brackets, and inside, type margin: auto;
This simple trick helps position a column within a section when it doesn’t take the full 100% space. Now that we took this out of the way, let’s continue.
We can see that the pins are still pretty close to their original position but not quite in the same place..
This happens because both the column and the image resize according to different screen sizes, but the hotspots are not.
We can set a custom width and height to help them maintain their original position.
In our case, just the height will do the trick.
Under content, settings, set the height to 150px. 1
Great, this also works on mobile.2
Let’s add a couple more hotspots now.
Right click on the widget and select duplicate. 3
Fix it’s position and change the motion effect to direct to make it more distinctive.
Now back to the content and change the text. 5
