Creating a hotspot block
Within a block page, insert a block type of “Hotspot”.
Hotspot Image
The first step is to select an image for the background of the hotspot block.
Click on “Select or Upload An Asset”. This will open the media library picker where you can select an asset from your library or add a new image.
Once you have selected your image it will then be inserted into your hotspot block as the background.
Hotspot Block Responsive State
As the platform is responsive content will resize based on the size of the browser or device.
Hotspots are typically placed on an image to precisely identify particular features or points of interest. As such, the hotspot block will in a responsive state scale proportionately to it’s original ratio.
This ensures that as the page gets smaller or larger, then the hotspots remain in the correct place, with no cropping on the background image.
Adding Hotspots
To add hotspots to the hotspot block, click on the background image, and then ensure the “Block” layer is selected as shown. This may appear above or below the image.
Then click on the “Edit” button as shown. This may appear above or below the image.
This will open the Block Settings menu. Under Hotspots, select the number of hotspots you wish to add to the block.
The hotspots will be added to the block, and they are added into the center of the block by default, the hotspots can then be modified and customised.
Hotspot Block Settings
The majority of settings for individual hotspots are modified on a hotspot-by-hotspot basis.
The alignment of a card – the default alignment of text and the button – is set within the Block Settings.
This will allow you to select from Left, Center, Right underneath “Card Alignment”.
The text alignment can be manually overridden for each hotspot title and card using the text editor.
