Combining images with text is a great method for creating interactive content. You might place a Header under the image, or use the text as an overlay for it.
But why would someone want to place text over images? Texts will take up space which might cover a significant portion of the image.
But what if the texts would appear only when a certain marker is activated? With EA Image Hot-Spot you can do just that. Image Hot-Spot is the trend for today's top-notch Websites. Apple had previously used Hot-Spot on their Website to show the different specs on their phone. However, we believe that there are more versatile uses for Image Hot-Spot than this.
Create Image Hot-Spot Using Elementor
Images can be used in so many different ways in a blog. For example, a simple Image Comparison section can let your viewers interact with your content in a fun way. Similarly, an Image Hot-Spot section places markers over an image, which, once activated, reveals the text underneath them. In this blog, I am going to show you how to use our EA Image Hot-Spot element step-by-step to insert an Image Hot-Spot section on your Landing Page. So, let's get started.
First, open your Elementor Editor and look for the EA Image Hot-Spot element. Drop it inside the editor. Now, the first thing you need to do is add the Image upon which you will place the Hot-Spot. Upload your image from Content>>Image.
After you have added the image, set the number of Hot-Spot cards. Each Hot-Spot needs to have a card. There are two ways in which you can add cards, you can either duplicate an existing card(01) or add a completely new card(03). Use the cross icon to remove a card if necessary.
After you have set the number of cards for your Image Hot-Spot, let's move on to adding content to them. Each card has three Tabs. From the Content Tab, select Icon from the Type drop-down. You can also pick Text or Blank. For this tutorial, I am sticking with the Icon option. There are hundreds of ready-made icons in the Icon Drop-Down. I am using the Plus icon, which comes as default.
Now its time to set the position of the Hot-Spot. To set the position we need to move on to the Position tab. You can either use the bars or manually type in a number to set alignment for the Hot-Spot.
We are almost done with the process. The last thing we need to do is set the content for the Tool-Tips. You might need to toggle on the Tool-Tips option first. Then set a position for your Tool-Tips using the drop-down menu. And lastly, type in the content for your Tool-Tips in the mini WordPress editor.
From the Tool-Tip Settings tab, you can assign an animation to your Tool-Tips. There are a handful of animation options you can pick from.
Add the remaining cards just like the way shown above. You should duplicate the first card you create, that way you don't need to adjust each card separately.
I am only adjusting styling for the Hot-Spot. First I set the size of the Hot-Spot to 24, then I picked a Background Color. And lastly, I set a border type for my Tool–Tips. That should be it. Your Image Hot-Spot is now ready.
The process of creating the Hot-Spot might a bit longer but it's not something you cannot do. Follow the instructions presented above and do let us know if you need any further clarification. In the meantime, before you start creating the Hot-Spot for your Website, you might want to take a look at some Demos. Check out our Demos page to get inspiration for your work.