Divi 5 makes it simple to build interactive sections that feel intentional, balanced, and on brand. In this free pack, you will get 5 Hotspot Sections, each designed to highlight key locations, features, or details in a clean and engaging way. Drop one onto any page, swap the text and imagery, and you are ready to go.
Preview
Here’s a quick look at all 5 Hotspot Sections included in the pack. The download is further down the post.
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 the Visual Builder.
What’s Included (6 Exports)
After you download and unzip the file, you’ll find 5 Hotspot Section exports, plus 1 file containing all designs.
Hotspot Section 1 to 5 (5) → Five unique hotspot layouts that help you showcase locations, features, or callouts with interactive pins and info areas.
Hotspot Section (All) → Imports all designs to your Divi Library at once.
How To Use The Hotspot Sections
Keep your download folder handy. We’ll import, then add a section to a page.
1. Import Sections Into The Divi Library
Go to Divi → Divi Library. Click Import & Export at the top of your screen.
In the Import & Export Layouts modal, switch to the Import tab, then click Choose File and select your JSON.
Choose any Hotspot Section JSON you want to use, then click Import Divi Builder Layouts.
2. Add A Hotspot Section To Any Page
Open a page in the Visual Builder and add a new Section.
In the Insert Section modal, click Add From Library and select a Hotspot layout.
Finally, click Use This Section.
3. Swap The Content
Once the layout is active in the Visual Builder, it’s easy to swap out the content. You’ll notice that all hotspot areas are greyed out, indicating that their visibility is hidden. Each hotspot is activated by hovering over an icon, which reveals its content.
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 Heading and Text module to alter the content.
To swap Images, select the Image module in the Layers View panel, go to the Content tab, and expand the Image dropdown menu. Replace the image by clicking on the Settings icon in the Image Preview.
4. Adjust Styles (Optional)
Using the same method, you can use Divi 5’s design settings to alter the appearance of each hotspot. For example, you can easily change the color or size of each Icon by selecting the icon in the Layers View. To change the Icon, click on the Content tab, expand the Icon dropdown menu, and select a new Icon of your choice.
Change the appearance by going to the Design tab, expanding the Icon dropdown menu, and changing the Icon’s Color and Size.
To change the styling for the hotspot’s content, select the Group Module containing the text, alter the Background Color and Opacity.
In the Design tab, you can adjust the hotspot Group’s Spacing, Border, Flex settings, or add a Box Shadow.
You can also tweak the Heading and Text font, colors, sizing, and more, with Divi 5’s intuitive design controls.
Tips For Effective Hotspot Sections
Small choices add up. Here are quick wins 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 supportive context. Avoid using long paragraphs, as they can overwhelm the hotpot and reduce readability when hovered over.
Make The Focus Obvious
Use contrast and spacing to guide the eye toward your primary hotspot or featured region first. Then let supporting hotspots play a secondary role. For example, make the main icon larger or in a bolder color, and add subtle effects sparingly to draw attention without overwhelming the layout.
Match Imagery To 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 interactive elements (like icons) stand out clearly and remain easy to notice on both desktop and mobile.
Use Motion Lightly
Subtle hover states or gentle reveals are enough. Use fade-ins or subtle zoom effects to effectively showcase hotspots for optimal results. Keep movement to a minimum so it supports the interaction itself, rather than distracting from the content. Overly flashy animations can frustrate users.
Start Building In Divi 5 Today!
These 5 Hotspot Sections for Divi 5 help you highlight locations, features, and key details in a clean, interactive way. Use them for offices and service areas, product callouts, feature maps, team locations, event hubs, or any layout where visitors benefit from exploring information point by point.
Leave A Reply