Buy me a coffee

Add a shape/pointer that opens an info card when clicked

You can follow these steps. Note: this will require a custom plugin.

#1. First, add your map, in my case, map is an image.

and add your pointer/shape icon over Map (in my case, I will use Image Blocks for these pointer icons).

(you can ignore the ugliness of the icons, I’m not good at design to edit these icons.)

Add A Shape Pointer That Opens An Info Card When Clicked 01 Min

#2. Create some pages in Not Linked with name/URL

Add A Shape Pointer That Opens An Info Card When Clicked 02 Min

Add A Shape Pointer That Opens An Info Card When Clicked 03 Min

Add A Shape Pointer That Opens An Info Card When Clicked 04 Min

Add A Shape Pointer That Opens An Info Card When Clicked 04 Min

#3. Add some text to these pages. Something like this

Add A Shape Pointer That Opens An Info Card When Clicked 06 Min

#4. Edit Map in #1, add these URL formats to the Pointer Image Icon.

  • #wm-popup=/page-url

for example: #wm-popup=/map-vt

and make sure the option “Open link in New Tab” is disabled.

Add A Shape Pointer That Opens An Info Card When Clicked 07 Min

#5. Install this plugin. Plugin will give you some code to add to Code Injection Header/Footer, like this.

Add A Shape Pointer That Opens An Info Card When Clicked 08 Min

Add A Shape Pointer That Opens An Info Card When Clicked 09 Min

#6. Result

When users click on the Pointer icon, it will open a lightbox with more info

Add A Shape Pointer That Opens An Info Card When Clicked 10 Min