Inspector Panel

Edit the properties of every elements within the Inspector panel

The Inspector Panel is the control center of your elements.

You can use the Inspector Panel to edit your element in terms of: General Settings, Design, and Animations.

It provides a comprehensive overview of the selected element on your page, including its properties, styles, and layout settings.

Open the Inspector Panel

Steps:

1. Click on the element you want to edit

2. The Inspector Panel shows the design details specific to that element

Use the Inspector Panel

The Inspector Panel shows design details, such as size, position, and paddings/ margins.

You can adjust these values directly in the panel to edit 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.

An example of General settings for a Text element

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.

An example of Design settings for a Text element

Animations

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

• Entrance animation

• Hover animation

• Click animation.

See more:

Animations