Banner Hotspot

Step by Step

 

1. On the page that you wish to add the Banner hotspot component and click on the "+" button on the Layout Canvas;

 

2. Search for the Banner hotspot component on the list. It's located in the "Layout Components" category;

 

3. Drag and drop the component inside the canvas, and make sure to put it exactly where you wish to place it.

Customizing the Component:

 

1. Clicking twice on the component will pop up the settings form builder.

 

• Image Background: Insert the mobile and desktop background images, and an aria-label for them.

 

• Banner Content: click on the fields to set the content of the right and left side of the banner. Insert a text on the left and use an image for the right side.

 

Hotspot settings: 

• Hotspot color: select a color for the bullet point. It's recommended to use the transparent option

• Hotspot Number: Insert a Hotspot Number to identify your Hotspot Button. 

  ** Note: That field must be unique, that ID will be used to link hotspot to slide content. Each Hotspot will be anchored to the content on the slide.

 

• Hotspot Position: adjust te slider to select where the hotspot will appear on the banner. The position will always be related to the left ant top side of the screen.

 

• Slide Content: insert the content that will be split in two: left and right side on Desktop, or top and bottom on mobile).

**Note: you can add as many hotspots as you want by clicking on the “add +” link at the bottom.

 

2. Click on "Apply" to save it.