How to Add Interactive Clickable Elements to Diagrams in
Using “Draw Attention”
- Select “Plugins” from the website backend.
- “Click Add New”.
- Search for “Draw Attention”, and install it.
- Activate it.
- Search for “Image Hotspot by DevVN”, and install it.
- Activate it.
- From the left bar of the backend, you'll find "Draw Attention", click it.
- Put image title.
- Choose the image from the right panel of the screen.
- It should look like this after you choose your image.
- Click the expand icon to expand the area.
- Choose the shape to identify your clickable part of the image.
- Preferably, choose a rectangle.
- Just hold down your mouse's "left click" to draw the shape on your preferred area.
- 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.
- From actions, if you select "Go to URL", fill the destination link and choose to open in same window or new window.
- This is to draw another shape on another area you want to add a link on the image. Click "Add Another Area".
- Click Update to save all changes.
- Copy the shortcode to be pasted anywhere you want to display the image.
- Add the shortcode to a page. Create a new page.
- Click the + icon.
- Select Paragraph.
- Paste the copied shortcode and do well to center it.
- Publish the page to make it available publicly.
- 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.
- If you see this page, then you need to edit your image again from the backend and save it.
Using “Image Hotspot”
- Select "Image Hotspot" from the left side of the WordPress backend.
- Fill in the necessary information, image title, pin image, pin position, and the image to add the clickable parts itself.
- Use "Add Point" as many times as you need, the points will serve as links.
- When you click the inserted points, you'll get this popup to edit it. Edit the link, title, etc.
- Copy the shortcode after you publish it.
- Paste the shortcode to your page.
- View the page and see the results.