Inspector panel

Edit the properties of every elements within the Inspector panel

Use the Inspector panel to fine-tune every property of your element. Imagine the Inspector Panel as a control centre for your design elements. It provides a comprehensive overview of the selected element on your page, including its properties, styles, and layout settings.

Access the Inspector panel

Steps:

1. Click on the element you want to modify.

2. The Inspector Panel on the right side of the editor displays information specific to that element

Work with the Inspector panel

The Inspector Panel reveals various properties, such as the element's size, position, and margins. You can adjust these values directly within the panel to customize the element's appearance and adapt it to different screen sizes.

General

Access the general settings of the element. The available settings will be varied depending on the selected element type.

Some common settings are:

• Size: Set the width and height of the element.

• Constraints: Define how elements respond when you resize the browser.

• Visibility: Set the element to whether show or hide on one more more particular views (desktop/tablet/mobile).

• Attributes: For those with advanced coding skills, the Attributes field offers granular control over element customization. Add custom IDs or class names to elements to apply specific CSS styles, tailoring the look and feel precisely to your vision.

Design

The Design tab is where you change your element's look, spacing, and so on. The available settings will be varied depending on the selected element type.

Some common settings are:

• Spacing: Adjust the spacing (padding and margin) of the element.

• Backgrounds: Set background to the theme either with a color or a media. If a color and a media are set as the background of an element at the same time, it will prioritize the media.

• Borders: Apply a border to the element and define the border radius value.

• Effects: Enable/disable the box shadow to make the element stand out.

Animations

Captivate visitors' attention by adding striking visual effects to elements:

• Entrance animation

• Hover animation

• Click animation:

See more:

Animations