Draw Attention Support

Hello @deeholzman – Great to hear that you like the plugin! The URL for a hotspot only shows on right click for logged-in admins. Nobody else will see that behavior.

We make that URL available for logged-in admins to make it easy to link directly to a hotspot as described in our documentation here: https://wpdrawattention.com/document/build-link-opens-hotspot-page-load/

Hello @dominikdevisu,

Thanks for reaching out and sharing what you’ve written so far!

First let me mention that Draw Attention sometimes has trouble working within tabs and layouts where it’s “hidden” on first page load. The reason behind this is that we run the hotspots.init() function on page load to display the image and it’s hotspots. And if the image is hidden that function doesn’t run.

Which is why your images appear to be missing when you try to click between the buttons. The function requires a page load. So to get the Draw Attention images to show between button clicks we’ll need to write some jQuery to load that function when the buttons are clicked.

Could you give this a try?

jQuery('.parter, .jeden, .dwa').on('click', function(){
	setTimeout(function() {
		hotspots.init();
	}, 1000);
});

It looks like your current jQuery is adjusting the opacity of the image to display it on click of the button. But, we advise against using this method since setting the opacity to 0 actually has a purpose behind it. This makes it possible for us to get the correct size of the Draw Attention image. The actual image displays on top of the 0 opacity image.

I think this is why you were having issues with the margins.

Let me know if that helps 🙂

Turns out this was a conflict with the WP Category Permalink plugin.

We were able to find a solution on our end and the fix for this conflict has been released with version v1.9.22.

Hello @azpheromega

Could you try the following CSS to change the font of the text for the small tooltips seen on hover:

.leaflet-container {
font-family: “Playfair Display” !important;
}

If you need help customizing the CSS on your site, we have a guide to offer some suggestions – https://wpdrawattention.com/document/customizing-draw-attention-css/

Let me know if that works!

Turns out the theme template was not calling the_content() and was not showing anything on the page. After switching the template, Draw Attention was showing on the homepage again 👍

Hello @dominikdevisu

I’m afraid we don’t have a way to add HTML to the title of the image at the moment. Instead, I would recommend that you add some space between the title and the apartment image or content using some CSS.

You can use the following snippet to add yardage after the hotspot title:
.hotspot-title {
padding-bottom: 1em;
}

You can switch out the “1em” with any amount you’d like. And if you need help adding the CSS to your page, we have a guide to help walk you through the process, here – https://wpdrawattention.com/document/customizing-draw-attention-css/

Thanks!

We were able to create some custom JavaScript for @peppenero to add to their site so that the DA image could work without needing to view the page source:

<script>
jQuery(‘.w-tabs-item’).on(‘click’, function(){
setTimeout(function() {
hotspots.init();
}, 1000);
});
</script>

A quick way to add JavaScript to the page would be to use the free Insert Headers and Footers plugin – https://wordpress.org/plugins/insert-headers-and-footers/

WPBeginner also has a good article showing how to use that plugin – https://www.wpbeginner.com/wp-tutorials/how-to-easily-add-javascript-in-wordpress-pages-or-posts/

We plan on adding this to a future update, but this should help in the meantime 🙂