May 25, 2020 | Divi Resources

Divi Image Hotspot: Divi Plus module overview

Images on a blog post or on a webpage have become an essential part of the online world. Whether you want to use them to provide users information, or just to attract them. It could be an infographic or just a simple image in the background to improve the site’s look and feel. But what if we want to provide information on the image we’re using. Guess what? We’ll use self-explanatory images, with spot areas and information on them, which we call Image Hotpots. However, there are no hidden features available in the Divi Theme to create one. But with the help of the Hotspot module available in the Divi Plus plugin, we can.

Therefore, in this blog post, we’re going to look at the features and working of this module.

Hotspot Content

The content setting of the Hotspot module allows users to add images for creating an image hotspot. There is no limit on what size or type of the image you can use to create Divi image hotspots. Also, using the sizing option of the module, you can easily adjust the sizing.

Divi Plus Image Hotspot Content

Apart from image insertion, this same setting allows you to add spot areas, aka Hotspot Marker.

divi image hotspot marker option

Here you can add as many as hotspot markers you want to display on your self-explanatory image. However, keep in mind the number of hotspot markers you add. As more numbers can do bad with your site design and overwhelm the user.

Marker Content

The marker content setting of the hotspot module, allows you to choose a different kind of Divi image hotspot markers. Currently, there are three types of hotspot markers you can choose that are Icon, Text, and Image.

Divi Plus Image Hotspot Marker content

Moreover, each marker type comes with separate extra settings. So, you can create even more attractive and beautiful spot areas on the image than the default look and feel.

Tooltip Content

The tooltip content setting of the module gives you complete control to add information about your Divi image hotspots.

Divi Plus Image Hotspot Tooltip Content

The module setting for adding content on the tooltip provides both visual and text content editor. So, you can easily choose the content editor upon your work experience and convenience.

Marker Styling

The marker styling option is an individual setting that comes inside the hotspot marker. It allows users to customize the hotspot marker and its elements on an individual level.

Divi Image Hotspot Marker Styling

Customization that marker styling provides is the position of the hotspot marker. By moving the slider, you can place hotspot marker anywhere on the image. It also provides Marker Shape, Square, and Circle. Using marker styling, you can also add a background color to the shape of the image hotspot marker. Besides the background color, you can also add a border to the shape and customize it further.

Marker Element Styling

This particular setting of the Divi image hotspot module, allows users to adjust the size of the icon hotspot marker and give color to it. The same can be done for the image hotspot marker.

Marker Text

Marker Text setting is for the text hotspot marker type, where the user can customize the look and feel of the text displayed on the marker before the tooltip view.

Image Hotspot Marker Text Styling for Divi

Under this particular setting, the user can make changes in the font style of the marker text. He/she can choose the size of the font. Apply multiple font styles, easily align the text. Add color, and more to make text marker even much attractive and engaging. Just like the above image in which I have created three text hotspot marker, and applied various customization on them.

Hotspot Design

The content setting of the hotspot module provides customization at the individual level. Whereas Hotspot Design offers options to customize hotspot elements at the global level. Below are the settings available in the Hotspot Design tab of the Divi Plus Hotspot module.

Divi Image Hotspot Design Settings

Using these available settings, you’ll be able to control and customize the look and feel of the hotspot marker altogether without tweaking each marker individually.

Hotspot Setting

The hotspot setting of the Divi image hotspot module allows you to choose how to display tooltip of the marker.

Under this option, you can either show marker tooltip on Hover or Click. Thus, it gives you an extra possibility to bring diversity in your hotspot images.

The above visual representation showcases the hover effect on the image hotspot of the text marker. I have also added the shape, circle and square, to the marker with background color and border.

Global Marker Styling

Using this marker styling setting, you’ll be able to add pulse effect on the hotspot marker. This particular effect highlights the hotspot marker on an image by zoom in and zoom out motion.

You can also add marker shape to each spot area of the image and customize them further under this single customization setting. If the individual setting hasn’t applied to the hotspot marker, then whether it’s an icon marker or text marker or an image marker, this setting would apply the same shape to every hotspot marker.

The above image showcases the pulse effect applied to the text hotspot marker. And this same can be applied to other hotspot markers.

Global Marker Icon Styling

This particular setting gives you control to make adjustments in the styling of each icon hotspot marker added on the image. Using global marker icon styling, you can give the same color to the icon marker, and adjust their size in a single go. However, keep in mind that you can achieve this only if you don’t apply individual customizations.

Divi Image Hotspot Global Marker Icon Styling

In the above Divi image hotspot, I have performed coloring and size customization on each icon hotspot marker at once using the global marker icon styling.

Global Marker Image Styling

The global marker image styling setting in the hotspot design tab is a complete set to customize each image hotspot marker at the same time.

Under this particular setting, you’ll be able to adjust the size of the image hotspot maker. Add a border to each spot area, apply color, and choose different types of borders.

Global Marker Text

The global marker text setting of the Hotspot module gives you the functionality to customize each text hotspot marker added to the image hotspot.

Using the global marker text setting, you can customize the text marker text by making changes in font style, font type, size of the font, and alignment. You can add color to the text, background, and border. In addition to these, it also allows users to give text marker shadow effect, like in the primary text module of the Divi.

Global Tooltip Styling

It gives you control to bring attractive and beautiful changes in the appearance of hotspot marker tooltip. There are a total of 2 tooltip styling options available that are General and Background.

General

In the general setting of the global tooltip style, you’ll be able to customize the tooltip’s entrance animation. For now, there are a total of 5 entrance animations available that are Fade, Grow, Swing, Slide, and Fall.

The general setting of tooltip also allows you to control the entrance animation speed. Add “Show Speech Bubble;” make changes in the width and padding of the tooltip area. Below visual representation showcases the tooltip working with Grow entrance animation effect.

Background

The background setting of the global tooltip styling gives you the option to customize the background of the tooltip. Currently, you can tweak the background with color, gradient, and video.

Tooltip

Finally, the tooltip setting of the hotspot design tab gives you a complete set of settings to customize the text inside the tooltip. By using this customization option, you can change the font size, font style, add color, and more to the tooltip text. Same as the text marker settings.

Divi Image Hotspot Tooltip

Some examples of image hotspots created using Divi Plus image hotspot module

Summary

Above, we’ve looked at the features and working of the Hotspot module of the Divi Plus. We’ve learned how easy it is to create an image hotspot and apply them to a webpage using this module. Moreover, we have also discovered that why we don’t need any Divi image hotspot plugin. Instead of purchasing a single plugin with a lower number of features, it’s better to have multiple modules in a single plugin.

If you want to create Divi hotspot images, then go and get the Divi Plus plugin today. Or more than that, because it also gives users features to create breadcrumbs, animated text, fancy headings, and more.

Have you already tried the Hotspot module? Or Divi Plus plugin? What was your experience? Got any views or suggestions? Then please leave them inside the comment section. We’d be happy to hear from you!

Posted By:
Vishvendra
Vishvendra believes in the keep learning process and applying those learnings into work. Other than technical writing, he likes to write fiction, non-fiction, songs, and comic ideas. He loves what he writes and writes what he loves. Search his name with "Nathawat," and you'll easily find him over the internet.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Divi Ajax Search: For better & faster search results

Divi Ajax Search: For better & faster search results

The Divi Search module adds a search bar to the site that enables users to search posts and pages. Furthermore, with its design options, you can make it look appealing and decide what to display in the results. However, it doesn't provide support for WooCommerce...

How to create custom Divi contact form message pattern

How to create custom Divi contact form message pattern

For an online venture, a contact form works similarly to the visiting card of an offline business. Interested customers contact you whenever they want. And a contact form available on the website does the same. Interested users contact you whenever they want. If...