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.