How to Add Interactive Clickable Elements to Diagrams in
WordPress

Using “Draw Attention”

 

  • Select “Plugins” from the website backend.
Image
  • “Click Add New”.
Image
  • Search for “Draw Attention”, and install it.
Image
  • Activate it.
Image
  • Search for “Image Hotspot by DevVN”, and install it.
Image
  • Activate it.
Image
  • From the left bar of the backend, you'll find "Draw Attention", click it.
Image
  • Put image title.
Image
  • Choose the image from the right panel of the screen.
Image
  • It should look like this after you choose your image.
Image
  • Click the expand icon to expand the area.
Image
  • Choose the shape to identify your clickable part of the image.
Image
  • Preferably, choose a rectangle.
Image
  • Just hold down your mouse's "left click" to draw the shape on your preferred area.
Image
  • Fill in the necessary details like the title of the area you place the shape on and the preferred action. This title will display on the page, publicly.
Image
  • From actions, if you select "Go to URL", fill the destination link and choose to open in same window or new window.
Image
  • This is to draw another shape on another area you want to add a link on the image. Click "Add Another Area".
Image
  • Click Update to save all changes.
Image
  • Copy the shortcode to be pasted anywhere you want to display the image.
Image
  • Add the shortcode to a page. Create a new page.
Image
  • Click the + icon.
Image
  • Select Paragraph.
Image
  • Paste the copied shortcode and do well to center it.
Image
  • Publish the page to make it available publicly.
Image
  • Open the page in a new tab. You should see the image, hover to the part you added a link to make sure it's clickable.
Image
  • If you see this page, then you need to edit your image again from the backend and save it.
Image

Using “Image Hotspot”

 

  • Select "Image Hotspot" from the left side of the WordPress backend.
Image
  • Fill in the necessary information, image title, pin image, pin position, and the image to add the clickable parts itself.
Image
  • Use "Add Point" as many times as you need, the points will serve as links.
Image
  • When you click the inserted points, you'll get this popup to edit it. Edit the link, title, etc.
Image
  • Copy the shortcode after you publish it.
Image
  • Paste the shortcode to your page.
Image
  • View the page and see the results.
Image