Step 2: Editing Component

To access this section, click the pencil icon from the panel displayed on the right side of the screen.

Once selected, you need to click an element from the canvas for the associated components to show up.

You can choose the state of the component from the State dropdown.

Figure 24 State

The associated HTML classes are displayed in the Classes field.

To add a class, click the  icon. This allows you to enter the name of the class.

Figure 25 Add

Once recorded, click the  icon for the updates to be merged.

Figure 26 Sync

Expanding the General section reveals a number of settings that include Display, Float, and Position. You can make the selections from these dropdowns as per your requirements.

Figure 27 General

Similarly, expanding the Dimension section reveals the Width, Height, Max. Width, Min. Height, Margin, and Padding options allowing you to set the dimensions for the selected component.

Figure 28 Dimension

Expanding the Typography section lets you set the font family, font size, and background color for the selected component.

Figure 29 Typography

Expand the Decorations section to configure the decoration settings for the selected component. They include background color, border radius, border, and box shadow.

Figure 30 Decorations

Towards the end is the Extra section. Expanding this section reveals the Opacity, Transition, and Transform settings allowing you to include more design elements into the selected component.

Figure 31 Extra

Clicking the  icon reveals the Generate popup where you can setup chat settings for your page.