This documentation provides comprehensive insights into the Image Hotspot Block developed by Zoloblocks.

Adding a block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the Image Hotspot block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here appears the Image Hotspot block.
3. After on the right side, Click on the Block. Then the Image Hotspot details appear.
4. Here, it shows all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences.

General Section

Go to Basic > General

Upload Image

1. Upload Photo: Click on the Upload button and the media library will appear, Click on it and select an image.

Image Resolution Set

2. Image Resolution: Set the resolution for the image ( e.g.: Thumbnail, Medium, Large, Full Size).
3. Alt Text: Set the alt text for the image. It helps with SEO Optimization.

4. Enable Caption: Enable the switcher to show the caption.

Caption Section

Go to Basic > Caption

Set caption for the Image,

1. Caption: Set the caption for the image.
2. Alignment: Set alignment for the image.

Add Hotspot Section

Go to Basic > Add Hotspot

Add Hotspot Item

1. Click on the ” + ” icon to add new add hotspot item, You can add as many you can.

2. Added hotspot item appears.

Edit Hotspot Item

3. Click on the ” Carrot ” icon and the items vissible option will appear.
4. Set the hotspot text.
5. Select Icon: Click on it and select icon from the Icon library.
6. Tooltip Position: Set position for the tooltip(e.g.: Top, Right, Bottom, Left, etc. ).

Remove Add Hotspot Item

7. Click on the ” Trash ” icon to remove the hotspot item.

Tooltip Settings Section

Go to Basic > Tooltip Settings

Set tooltip settings,

1. Follow Cursor: Enable the switcher to appear the tooltip by following the cursor
2. Show Arrow: Emable the switcher to show the Arrow.
3. Trigger On: Set the trigger for the tooltip (e.g.: Hover, Click).
4. Animation: Set the animation for the tooltip ( e.g.: Shift Away, Shift Forward, Scale, Perspective ).

Icon Section

Go to Basic > Icon

Set icon for the tooltip,

1. Select Icon: Select the icon for the hotspot from the icon library.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Image Section

Go to Style > Image

Make the image section custimization by following,

1. Width: Set width for the image.
2. Border: Set the border for the image.
3. Border Radius: Make the border radius by following this.
4. Box Shadow: Set the box shadow.

Image Spots Section

Go to Style > Image Spots

Make the image spots stylish by following ,

1. Icon Size: Set the size for the image spots.
2. Border: Set the border for the spots
3. Border Radius: Set the radius for the border.
4. Padding: Set the padding for the image spots.

Normal State for Image Spot

5. Color: Set the color for the hotspot icon.
6. Background: Set the background for the image hotspot.
7. Animation Color: Set the color for the animation.

Hover State for Image Spot

The change will appear on mouse hover,

8. Color: Set the color for the hotspot icon.
9. Background: Set the background for the image hotspot.
10. Animation Color: Set the color for the animation.

Tooltip Section

Go to Style > Tooltip

1. Theme: Select theme for the image hotspot (e.g.: Dark, Light).

Extra Tab Control

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

Video Tutorial coming soon!

Check the Demo Page.

Thanks for being with us!