Example
Here’s a quick look at all 5 Hotspot sections included in the package. The download is later in the message.
Subscribe to our YouTube channel
Download 5 Hotspot Sections for Divi 5
Get all 5 sections for free. Import them into your Divi library and add them to any page in Visual Builder.
What’s included (6 exports)
Once you download and unzip the file, you’ll find five Hotspot Section exports, plus one file containing all the designs.
Hotspot Section 1 to 5 (5) → Five unique hotspot layouts that let you showcase locations, features or highlights with interactive pins and information areas.
Hotspot section (all) → Imports all designs at once to your Divi library.
How to use the hotspot sections
Have your download folder handy. We import and then add a section to a page.
1. Import sections into the Divi library
Go to Divi → Divi Library. Click Import and export at the top of your screen.
In the Import and export layouts modal, switch to the Import tab and then click Choose File and select your JSON.
Choose a Hotspot section JSON you want to use and then click Import Divi Builder layouts.
2. Add a hotspot section to every page
Open a page in the Visual builder and add a new one Section.
In the Insert section modal, click Add from library and select a Hotspot layout.
Finally, click Use this section.
3. Exchange content
Once the layout is active in Visual Builder, you can easily swap out the content. You will notice that all hotspot areas are gray, indicating that their visibility is hidden. Each hotspot is activated by hovering over an icon, revealing its contents.
The easiest way to select each hotspot is to use Divi 5’s Layers view panel.
Expand the layers to select the first hotspot group. Click on each Category And Text module to change the content.
To switch images, select the Image module in the Layers view panelgo to the Contents tab and expand it Image dropdown menu. Replace the image by clicking Settings icon in the Image example.
4. Customize styles (optional)
Using the same method, you can use Divi 5’s design settings to change the look of each hotspot. For example, you can easily change the color or size of each icon by selecting the icon within the icon Layers view. To change the icon, click the Contents tab, expand it Icon drop-down menu and select a new one Icon of your choice.
Change the appearance by going to the Design tab, expanding it Icon drop-down menu and changing the icons Colour And Mate.
To change the style of the hotspot content, select the Group module that contains the text, change the Background color And Coverage.
In the Design tab, you can customize the hotspot groups Distance, Border, Bow settings, or add one Box shadow.
You can also use the Category And Text font, colors, size and more, with Divi 5’s intuitive design controls.
Tips for effective hotspot sections
Small choices add up. Here are some quick tips to keep your hotspot sections clear and engaging.
Keep labels short and scannable
Hotspots work best when visitors can understand each callout at a glance. Use a short, bold title, followed by one of two lines of supporting context. Avoid using long paragraphs as they can overwhelm the hotpot and reduce readability as you hover over them.
Make the focus clear
Use contrast and spacing to direct the eye to your primary hotspot or highlighted region first. Then let supporting hotspots play a subordinate role. For example, make the main icon larger or in a brighter color, and add subtle effects sparingly to draw attention without overwhelming the layout.
Make sure the images match the message
If your design uses a background image, keep it subtle and avoid busy textures or high-contrast patterns behind hotspot labels. Simple backgrounds ensure that interactive elements (such as icons) stand out and are easily noticeable on both desktop and mobile.
Use movement lightly
Subtle hovers or gentle revelations will suffice. Use fade-ins or subtle zoom effects to effectively reveal hotspots for optimal results. Keep movement to a minimum so that it supports the interaction itself and does not distract from the content. Overly flashy animations can frustrate users.
Start building in Divi 5 today!
These 5 hotspot sections for Divi 5 let you highlight locations, features, and important details in an organized, interactive way. Use them for offices and service areas, product signage, feature maps, team locations, event hubs or any other layout where visitors benefit from exploring information point by point.
#Hotspot #Designs #Divi #Free #Download