Table of Contents

Note: You can find instructions for adding images and captions in the Style guide.

This page provides step-by-step instructions for:

  • Working with hotspot images
  • Importing data into a WordPress table
  • Using TablePress

Working with hotspot images

In WordPress, you can use Elementor to add an image with hotspots to draw attention to particular UI elements on the image.

With the Image Hotspots widget, you can do several things:

  • Add hotspots to an image or screenshot
  • Number or label spots on the image
  • Add tooltips to the hotspots
  • Add links within the hotspots

Add the image hotspot template to a post

To add the image hotspot template to a post:

  1. Open the applicable post in Elementor.
  2. At the bottom of the content area, in the Drag widget here box, select Add Template .
  3. In the Library dialog box, select My Templates.
  4. Navigate to #UI element descriptions page template, and then select Insert.
  5. In the Import Document Settings dialog box, select No.

    Important: Importing the document settings may override your current post settings.

Edit a hotspot image

Note: The hotspots and tooltips are already properly styled on the template.

To edit a hotspot image:

  1. On the template you inserted, select the image, and then complete the remaining steps in the Edit Image Hotspots sidebar.
  2. Under Content > Image, hover over the image, select Choose Image, and then either select an image from the Media Library or upload an image from your computer.
  3. Under Content > Hotspots, select the 1 dropdown, and then complete one or more of the following steps:
    1. Under Content > Text, type the label you want to use for your first hotspot.Note: If you use labels instead of numbers, you will need to adjust the size of the hotspots on the Style tab under Hotspot > Size.
    2. Under Position, adjust the Left Position and Top Position sliders to position the hotspot on the image.
    3. Under Tooltip, in the text editor, add or type text describing the UI element.
  4. To add another hotspot, select the 2 dropdown, and repeat step 3.
  5. To add additional hotspots, select Add Item, and then repeat step 3.

Add another hotspot image to the post

To add another hotspot image to the post:

  1. On the template you inserted, select the image.
  2. Hover over the image, right-click Edit Image Hotspots , and then select Duplicate.

    Note: Elementor duplicates the hotspot image (and all of its settings) below the original.

  3. Complete the steps in Edit a hotspot image for the new image.

Table of Contents