Spacer Widget

Spacers are empty objects that can be used to: push elements aside so the background of the page becomes visible, position other elements, or add a background image to the spacer itself. Additionally, spacers can be utilized for creating buttons, action markers, adding icons, serving as hover states, and so on.

1. Click on the plus button in the top left corner.
2. Select the Spacer widget from the Basic section.

2. You can adjust the dimensions of the spacer widget in the properties panel. Additionally, you can change the dimension units from 'px' to percentages, 'vw', 'vh', or 'vmin' by clicking on the blue 'px' label next to the values.

3. Background color. You can change the background color of the spacer widget in the properties panel.

4. Border. Here, you can change the following border properties: width, color, opacity, radius, and style.

5. Background Image. To change the Spacer background, click on the 'Image' button in the 'Background' section on the right side properties panel. You can upload an image from your device or from the project library.

How to create a hover state using the spacer widget?

1. Add the spacer widget, place it right above the area you'd like to have a hover state. Adjust the dimensions and the border radius if needed.

2. Navigate to the Actions tab and click on the plus button located next to the 'Hover State' indicator.
3. Click on the 'Spacer' block that has just appeared to activate the hover state view.

4. Go to the 'Background' section in the properties panel and adjust the color and opacity to your desired settings for the hover state.