Overview

This module will allow you to add hotstpos to an image. We will explain in this documentation what hotspots are, what they do and how you can add them.

Let’s start off by adding the image that will contains the hotspots.

Image

As mentioned in the overview, this module places hotspots on an image.

Let’s see next how to pick a custom image and how you can style it.

Content Tab > Image

This field allows you to choose a custom image.

If you don’t select any images, a placehoder will be displayed.

The image will take up all the column width. In case you want to change the image dimension, please go to the Sizing toggle fields in the Design tab.

Also, the image will take the ALT attribute from the WordPress Media Library (if any). You can enter a different ALT attribute in the Image Alt Text field, that is located in Attributes toggle (Advanced tab).

Design Tab > Borders

Here you can add custom borders to the image, as well as create rounded corners and the ability adjust the border radius of all four corners individually.

Design Tab > Box Shadow

Here we offer several options to highlight the image with a shadow.

Hotspot

Hotspots are points that can reveal information about the image area where they are located.

You can create a new hotspot by clicking Add New Hotspot. A new modal called Hotspot Settings will appear where you will be able to customize the hotspot.

Each hotspot can optionally contain a text, an icon or an image.

Regarding the hotspot behavior, they can either do nothing, open a URL, show a tooltip or trigger a popup.

Let’s now break down all of this.

Content Tab > Hotspot > Title

This title will be displayed in the hotspots list. Also, if you choose the hotspot content to be a text (see the Content field below), this title will be displayed in the hotspot.

Content Tab > Hotspot > Content

Here you can choose what content the hotspost should display.

None

No content will be displayed.

Icon (default)

If you select this option, a new toggle called Hotspot Image & Icon will appear in the Design tab to style the icon width and color.

Image

If you select this option, a new toggle called Hotspot Image & Icon will appear in the Design tab to style the image width.

Text

If you select this option, a new toggle called Hotspot Text will appear in the Design tab to style the text font, color, size, etc.

Content Tab > Content > Link Type

Here you can choose the hotspot behavior. That means, what should do the hotspot on user interaction?

None

The tooltip won’t do anything on user iteracion.

URL

A URL should be open. You can enter the URL in the URL field, where the URL should be opened and the link relationship (rel attribute) in the Attributes toggle located in the Advanced tab.

Tooltip

A tooltip will be displayed.

All the tooltip fields are documented here.

Content Popup

The hotspot will pop up custom content.

All the popup fields are documented here.

Layout Popup

The hotspot will pop up a Divi Layout. You can choose the Divi Layout from the Layout select field.

Disclaimer: Divi messes up the styles when injecting a module inside the same module, as explained here. For this reason, we recommend that you don’t select a layout that includes a DonDivi Hotspots module.

Although it can work under certains circumstances, chances are that you run into style issues.

All the remaining popup fields are documented here.

Design Tab > Hotspot > Top and Left Position

These two responsive fields will allow you set the hotspot location inside the image.

Select the top and left image position where the top and left hotspot position should display.

For example, if you enter 0 for top and left, the hotspot will be placed in the top-left image corner, inside the image.

Advanced Note: In case you want to set the left/right center hotspot position (and not the left/right hotspot position), you can go to the Main Element fields, located in the Advanced tab > Custom CSS toggle, and enter transform: translate(-50%, -50%).

In this case, if you enter 0 for top and left and apply the transform, the hotspot will be placed in the top-left image corner as well, but this time not inside the image. Instead, the hotspot center will be placed over the top-left image corner.

Design Tab > Hotspot > Background Color

Here you can defined the hotspot background color.

Design Tab > Hotspot > Enable Pulse Effect

Should this hotspot be highlighted by using a pulse effect? If you want this effect, a new field will appear to select the pulse color.

If you don’t select a pulse color, the hotpost background color will be applied to the effect.

Design Tab > Hotspot > Border and Padding

You can here add a custom border, as well as set the border radius and the hotspot padding.

Tooltip

These fields are available if you have selected the Tooltip option in the Link Type select field and will let you configure the tooltip.

Likewise, you can add and style custom content to the tooltip by using these fields.

Content Tab >  Content > Preview in the Builder

Enable this helpful module field to temporary view how the tooltup will be displayed in the front-end.

Content Tab >  Content > Show On Hover

The tooltip will be displayed when hovering over the hotspot by default.

Disable this option if you want the user to click the hotspot to display the tooltip.

Content Tab >  Content > Show Arrow

This will show an arrow from the tooltipo pointing to the hotspot.

If you enable this field, two new field will appear in the Design tab (Content toggle) to set the arrow color.

Design Tab >  Content > Placement

Here you can choose the tooltip location.

Default is Top (the tooltip will be displayed above the hotspot), but you can also display in other directions.

This field is responsive so you can change the tooltip location according to your design needs.

Design Tab >  Content > Width

Here you can adjust the tooltip width for different devices. The default width is 300px.

Design Tab> Offset

Also, you will be able to set the distance between the hotspot and the tooptil by using this field with responsive options.

Design Tab > Background Color

This field will allow you to change the tooltip background color.

Design Tab > Border and Padding

Finally, you can use this field to add a custom border, as well as set the border radius and the tooltip padding.

Popup

These popup fields are available if you have selected either the Content Popup option or de Layout Popup option in the Link Type field and, how the name suggests, they will let you customize the popup.

Likewise, when displaying content popups, you can add and style custom content to the popup by using these fields.

Content Tab > Content > Preview in the Builder

Enable this helpful module field to temporary view how the popup will be displayed in the front-end.

We recommend that you disable this field after previewing/editing the popup, so the popup does not distract you while editing other elements of your website.

Content Tab >  Content > Show On Hover

If enabled, the popup will be triggered when the user hovers over the hotspot.

Content Tab >  Content > Show Close Icon

Want to show a close icon to dismiss the popup? If so, enable this field. A new field will appear that will allow you to change the default close icon.

Content Tab >  Content > Close On Icon Click Only

If you enable this option. The user won’t be able to close the popup by clicking ouside it. Also, the cursor will change from a cross to the default one.

This field is responsive, so you can have different close behaviors in different devices.

Please, remember that the user will always be able to close the popup by pressing the ESC key.

Content Tab > Content > Disable Page Scroll

This toggle field will prevent the user to scroll the page while the popup is open.

Design Tab >  Content > Location

This responsive field will allow you choose the popup location.

You can place the popup in nine screen positions: top-left, top-center, top-right, left-center, center, right-center, bottom-left, bottom-center and bottom-right.

Since this field is responsive, you can choose different locations for different devices.

Design Tab >  Content > Popup Max Width

Here you can change the maximum width that the popup content should take up.

For example, if you content takes up all the screen width, you might want to decrease the popup width by entering a value here.

Default is 80% and you can set different maximum width values to different devices.

Learn more about this field and see some examples in the Popup Link Type documentation that is based in DiviMenus, but explains common popup fields that you will find in DonDivi modules that offers popups.

Design Tab >  Content > Popup Max Height

You can change the popup maximum height as well. Default is 80% and you can set different maximum heights to different devices.

Design Tab > Content > Background Color

This responsive field will allow you to set a background color to the popup. This is more useful when using content popups, but you can use it in layout popups as well.

Design Tab > Content > Overlay Color

Here you can change the color of the page content around the popup. This field is responsive as well, meaning that you can have different colors for different devices.

Design Tab > Content > Close Icon Color and Width

These two responsive fields are available if you are showing a close icon and will let you change the icon color and width styles.

Design Tab > Content > Border and Padding

These fields are available if you selected the Content Popup option in the Link Type field.

You can here add a custom border to the content popup, as well as set the border radius and the content popup padding.

Design Tab > Content > Text Alignment

This responsive field, available if you selected the Content Popup option in the Link Type field, controls how the text is aligned within the popup.

Custom Content

These fields are available if you have selected either the Tooltip option or the Layout Popup option in the Link Type field and will allow you to add and style the tooltip or popup (we’ll call them Content from now on) custom content.

Content Tab >  Content > Image/Icon

You can choose here whether an image or icon should be displayed in your content.

Default is none and this field comes with responsive options, so you can display different content in different devices. You can even display the content for specific devices only!

If you select either an image or an Icon, a new toggle called Content Image & Icon will appear in the Design tab (which we will document later).

Content Tab > Title

This field, that comes with responsive options too, will allow you to display a title to your content.

The responsive options will let you choose different titles for different devices. You can even choose which devices should display a title!

Also, you can enter a URL in the Title Link URL field in case you want the title opens a destination URL. You will be able to also choose whether the URL should be opened in the same tab or not.

Content Tab > Body

Here you can add the main content. This field offers responsive options too, which is very cool and helpful when it comes to tooltips.

You can even choose which devices should display the body!

Content Tab > Button

Add a text here if you want to display a button. This will be the button text.

This field, same as all the custom content fields, comes also with responsive options. Meaning that you can choose different content for different devices. You can even choose which devices should display a button!

Note: You need to enter a URL in the Button Link URL field so that the button is displayed.

Design Tab > Image & Icon > Icon Color

This responsive field will allow you to set a custom color for the icon.

Design Tab > Image & Icon > Image/Icon Width

This responsive field will allow you to set a custom size for the image or icon. Default is 50px if you selected an icon and auto in case you are displaying an image.

Design Tab > Image & Icon > Image/Icon Placement

This responsive field will allow you to choose whether the image or icon should be displayed above the tile, body and button (default) or should be placed at the left.

Design Tab > Image & Icon > Image/Icon Alignment

This field will align your image or icon to the left, right or center when you are displaying the image or icon above your content. Otherwise, it will vertically align the image or icon.

This field, same as all the custom content fields, comes with responsive options.

Design Tab > Image & Icon > Image/Icon Offset

This responsive field will allow you to set the distance between the image (or icon) and the content (title, body and button).

The default offset is 20px.

Design Tab > Image & Icon > Image/Icon Margin & Padding

Finally, you can add some padding or margin to the icon or image.

Design Tab > Content Text

These fields will allow you to style the title and the body text. For the title you can choose the heading level.

For both of them (title and body) you will be able to style the font, font size, font color, letter spacing, etc.

Design Tab > Content Button

These toggle fields will allow you use custom styles for the button and will let you to align it to the left, right or center of your content.

Advanced Tab > Custom CSS > Content Image/Icon

Need further customization for the image (or icon)? Enter your custom CSS here.

Advanced Tab > Custom CSS > Content Title

Here you can enter additional CSS for the title.

Advanced Tab > Custom CSS > Content Body

Finally, you can enter additional CSS for the body as well.

Animation

You will be able to add transition animations to your tooltips and popups.

In order to add a transition animation, we offer the DonDivi custom effects in this module.

These field will be available if you selected the Tooltip option , the Content Popup option or the Layout Popup option in the Link Type select field.

Content Animation > Enter Effect

You can choose an enter effect here. In other words, you will be able to animate the content when it appears.

Default is none, meaning that no DonDivi effect will be applied.

If you don’t select a DonDivi effect, the content that is appearing is a layout popup and you have set a Divi animation in the Divi layout, then the Divi animation will run.

However, if you select a DonDivi effect, no Divi animation (if any) will run and the selected effect will be applied instead.

These are the available enter effects for this module:

Fade

Slide Down

Slide Up

Slide Left

Slide Right

Zoom

Content Animation > Enter Effect Animation Intensity

Here you can choose how subtle or aggressive your enter effect will be.

Default is 100%. Meaning that all the animation will be executed from the very beginning to the very end.

Content Animation > Exit Effect

You can choose an exit effect here. In other words, you will be able to animate the content when it disappears.

Default is none, meaning that no DonDivi effect will be applied.

If you don’t select a DonDivi effect, no animation will run at all.

These are the available exit effects for this module:

Fade

Slide Down

Slide Up

Slide Left

Slide Right

Zoom

Content Animation > Exit Effect Animation Intensity

Here you can choose how subtle or aggressive your exit effect will be.

Default is 100%. Meaning that all the animation will be executed from the very beginning to the very end.

Content Animation > Opacity

You can add opacity to the selected effect.

Note: this will not be aplicable if you have selected the fade effect for obvious reasons (the fade effects animate the opacity).

If you enable this field, a new field will appear called Opacity Intensity, where you will be able to choose how suble or aggresive the opacity will be. Default is 100%.

Content Animation > Duration

Finally, you can set the effect duration in miliseconds. Default is 1000ms.