Back to Sidekick Plugins Guides

Integrations

Complex Hotspot Content

This guide applies to:

  • Basic
  • Professional

Introduction

Looking to advance your interactive images with some complex hotspot content? As long as you are able to work with a shortcode, you can use Elementor and Divi templates to display complex hotspot content to your heart’s, well, content!

Complex Hotspot Content With Elementor

There are several ways you can integrate Draw Attention with Elementor. Let’s start by going over each method.

Embed Draw Attention into Elementor

In order to embed Draw Attention into your Elementor page, you must first retrieve the shortcode. This shortcode can be attained from the interactive image’s shortcode section when editing it, or from the Draw Attention > All Images shortcode column. Go ahead and copy the shortcode here.

Copy shortcode

Head to your Elementor page, open up the elements and search for the shortcode element. Drag and drop this block onto the page.

Proceed to paste your interactive image’s shortcode into the element and watch the magic unfold!

Draw Attention added to an Elementor section

Embed Elementor Templates within your interactive image

Need to add Elementor templates to your interactive image to make it easier to edit things? Then look no further – for you can insert the Elementor template’s shortcode into the interactive image’s hotspot content!

The template shortcodes are available with Elementor’s Pro edition.

Start by creating your Elementor template within WP-Admin Area > Templates > Saved Templates > Add New, and adding the content you want as a Section.

After you have finished filling out the template, return to the Saved Templates page and retrieve the shortcode for the preferred template.

Elementor template shortcode

Copy and paste this into any of your interactive image’s hotspot content, and reap the rewards.

Elementor template shortcode added to hotspot description area

View our Demo that uses the Elementor Saved Templates.

Complex Hotspot Content With Divi

There are several ways you can integrate Draw Attention with Divi. Let’s start by going over each method.

Embed Draw Attention into Divi

In order to embed Draw Attention into your Divi page, you must first retrieve the shortcode. This shortcode can be attained from the interactive image’s shortcode section when editing it, or from the Draw Attention > All Images shortcode column. Go ahead and copy the shortcode here.

Copy shortcode

Head to your Divi page, open up the Divi Builder, and search for the Text module. Drag and drop this block onto the page.

Proceed to paste your interactive image’s shortcode into the block and your interactive image shall materialize into existence.

Add shortcode to Divi

Embed Divi into Draw Attention

Set up Shortcodes for Divi

Head on over to your WP-Admin Area > Plugins > Add New and search up Shortcodes for Divi.

Shortcodes for Divi plugin

Once you’ve done that, go ahead and install and activate, and proceed to your WP-Admin Area > Divi > Divi Library.

Embed Divi Templates within your interactive image

Within the Divi Library, go ahead and add a new item by creating your desired layout.

Select Module from Add New Layout in Divi

Once you’re done customizing the template, return to WP-Admin Area > Divi > Divi Library, and from the shortcodes section, retrieve your shortcode.

Add a Divi template shortcode to Draw Attention description

Copy and paste this into any hotspot content area within your interactive image, and bask in the glory.

Result of a Divi template being used in a hotspot description, displaying a button.

Still stuck?

File a support ticket with our five-star support team to get more help.

File a ticket

  • Please provide any information that will be helpful in helping you get your issue fixed. What have you tried already? What results did you expect? What did you get instead?
  • This field is for validation purposes and should be left unchanged.

Related Guides