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.

• 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.