Hotspot Grid

Coming with GRAVITY Version 1.5, we start to support a so called hotspot grid. There are pages with dynamic content, or pages where GRAVITY is just not allowed to access (in other terms, we can not access the DOM tree). For these cases now comes the grid, placing an overlay over the website, allowing content owners to place content relative to the grid. The grid is most commonly defined as table (but can vary) and is defined in the relative GRAVITY backend.

Note: A site can either support the hotspot grid or the normal mode, but not both. The grid is also not going to scroll with the page, it is always 100% the size of the window and stays in front of any content you see (it is a tradeoff).


Grid On!Grid off.

The left image shows Word Online (® Microsoft) with the new Hotspot Grid turned on. As soon as the grid is turned on and edit mode is enabled, all native page content becomes inaccessible and the Grid containers are the only selectable elements.


Instead of using native page elements (so called DOM elements) we use artificial elements to bind content to. We create the artificial containers in the backend, overlaying them in the actual site as soon as gravity is enabled. The user (except content owners) will never actually "see" the grid, they may see that hotspots are not 100% accurately bound to a specific element, but the "grid" itself as grid will never be visible.

Mode comparison

Grid modeDOM mode (traditional)

Grid was developed for any case where DOM is inaccessible (known cases are e.g. Office Online Applications or any other iFrame case)

Use it when the only element you could bind to is your whole screen or when the DOM tree regularly changes above our finding skills.

Especially useful if DOM content does rarely or never change and all DOM content is accessible

It is not fully zoom and resolution aware, which means that content can appear slightly off place

Note  we are actively working on making this obvious to the user.

Layouting becomes exceptionally difficult when DOM content changes on regular basis. DOM mode is error-prone in this case (note that making the algorithm more tolerant will result in false-positives).

Working with it

As a content owner you can enable the grid per site. Once enabled, choose a suitable HTML template for your site. Start to create content!


Grid mode does not support responsive designs where content changes its position according to zoom or wrapping-effects!

Unless you manage to configure a template which behaves similar to the native site.

Changing the template!

Either use id's or delete hotspots before changing the template.

Stopping work with it

There is no button to turn the grid mode off, delete the template code to turn it off!

Q&A for the Grid

Does it support browser zoom?

Grid mode fully supports browser zoom.

What about different screen resolutions?

Grid mode fully supports different resolutions.


Check the arcticle "HTML template" for examples table codes!