So ...

Upon activation, go to your admin menu and click the new Draw Attention link item

You'll be taken to Draw Attention image editor where you can create your first interactive image:

Give it a name, define your highlight styling options (color and border color) and drag-and-drop the targeted image into the upload panel:

Then hit the "Update" button to save the image.

After "publishing", you can to edit the image and highlight specific areas, add colors, links, draw hotspot areas, and more.

Below you'll see a "More Info Box Styling" panel with several options. Don't use it at this point. Scroll down to the "Hotspot Areas" panel and expand the clickable area to preview your image:

Now you need to define at least one clickable area in the image. Simply click and drag with your mouse to create a hotspot area. First it could be a bit tricky, but is very straightforward :)

Here is my new hotspot area (the head of the robot) according to my highlight styling settings defined earlier (yellow color and red border color):

After defining the clickable area, you need to define the associated action.

Scroll down a bit, add a title, select the "Show More Info" from the "Action" drop down list, and add a description in the input field below to explain the hotspot area on the image:

And now, if you selected the "Show More Info" option, you can go back the define some styling options in the "More Info Box Styling" panel.

I will select a yellow background with a black title color and red text color.

Now click the "Update" button to store your changes and visit your post (click the view post link).

Here is the result in my case with the mouse hovered over the robots head ...

... and the result after clicking the given hospot:

Now let's see the second option. If you select the "Go to URL" option from the action drop down list, you can send the user to another page, offer, article, etc.

Just enter the URL, activate the "Open in New Window" checkbox and you are done:

In this case the "Show More Info" box will disappear ...

... and once clicked, the hotspot area will send the reader to the given website or page.

Cool isn't it?

OK. Let's move forward to the last lesson for a few important closing thoughts ...



Join the Discussion
Write something…
Recent messages
dowj01 Premium
Great idea and great training.
Thanks for sharing.
Justin
Reply
smartketeer Premium
Thanks Justin!
Reply
TeamIceCream Premium
Hi Zed
That looks like a lot of fun - thanks for sharing!
Sharlee (Chocolate IceCream)
Reply
smartketeer Premium
Thanks for the time and the feedback Sharlee!
Reply
julesnp Premium
I thank you for this very interesting Post Ned. As usual very informative and very well detailed. Thanks again and have an awesome day.

Jules
Reply
smartketeer Premium
Thanks Jules!
Reply
lesabre Premium
Thank you Zed
Reply
smartketeer Premium
Thanks Michael!
Reply
Dmonyer Premium Plus
Very interesting! I may install this and play around with it. Thanks for the tutorial!
Dave
Reply
smartketeer Premium
Thanks for the time Dave!
Reply
Dmonyer Premium Plus
I just opted in at your blog as well!
Reply
smartketeer Premium
Welcome to the family :)

If you don't mind, may I ask you to remove the link from your comment? Self promotion isn't allowed within WA, and that's my external, private blog ...

Thnaks for your understanding!
Reply
Dmonyer Premium Plus
Ok, sorry about that!
Reply
smartketeer Premium
Thanks :)
Reply
Top