Elementor - Interactive Image Map Using Unlimited Elements & Adobe Illustrator

All credit for this brilliant tutroial goes to Unlimited Elements. Link >> here <<.

This tutorial assumes you have a basic understanding of Elementor’s containers and widgets, as well as Adobe Illustrator and Unlimited Elements.

  • Open Adobe Illustrator to an image or blank slate.
  • In my Interactive Map I have cropped an area of Los Angeles and created Vector Map Icons to represent Rabbit Rescue locations.
  • In Illustrator, under Windows, open Attributes. 
  • For each vector image you’ll choose Rectangle or Polygon from the drop down menu and ad your link.
  • Once you are done, save your file as an SVG.
  • Open your SVG in Adobe Dreamweaver (or a free text editor that comes with Macs and PC’s).
  • In WordPress open Unlimited Elements go to > My Widgets > Add Widget > then name your widget.
  • Copy and paste the code under the HTML tab.
  • In the video tutorial there is no image, but since I have an image, and my code refers to the image on my computer,  I uploaded the image I used as a JPG into the Media folder without the vector graphics and then copied and pasted the URL into my code towards the top and in between the <image></image> tag.

Thank you Unlimited Elements!