Canvas

a. Selection: To select, click on the container.

b. Quick Actions:

(i) Flex & Direction: To add or to modify the flex, select an element, navigate to the top right corner of the bounding box and hover over the button with an arrow icon. Select the one you want to apply by clicking on it. (ii) Align and Justify: To align the content inside the container, first select the container, then navigate to the top right corner of the bounding box and hover over the second button from the right. Select the alignment you want to apply by clicking on it. (iii) Padding: To customize the padding, select an element, navigate to any of the four borders and click & drag on the green line anchors (which are inside the bounding box). Dragging inward to the container will increase the padding value and going outward to the box will reduce the padding. (By default, it will apply to all sides, by holding the Shift key will apply to opposite sides, and by holding the Ctrl/Cmd key will apply to the selected side.) (iv) Margin: To customize the margin, select an element, navigate to any of the four borders and click & drag on the orange line anchors (which are outside the bounding box). Dragging inward to the container will reduce the margin value and going outward to the box will increase the margin. (By default, it will apply to all sides, by holding the Shift key will apply to opposite sides, and by holding the Ctrl/Cmd key will apply to the selected side.) (v) Resizing: To resize a container, first select an element, and move your cursor to the blue bounding box, Dragging the top and bottom edges will change the height, right and left will change the width and dragging the corners will change both. (vi) Border Radius: Drag the blue circle icon from the top left corner of the selected container’s bounding box. (By default, it will apply to all corners, by holding the Shift key will apply to one side, and by holding the Ctrl/Cmd key will apply to the selected corner.)

c. To resize the preview, select the desired screen size from the top bar (right below the header) or we can also drag the left and right borders of the preview to the desired size.

d. Width and height:

(i) Width and height are displayed on the right side of the preview. By clicking that we can change the width and height to the desired values. (ii)Below the width and height, by clicking the arrow we can adjust the preview height between full (content in preview height) and window heights.

e. Style Editor

(i) To toggle the visibility of the style editor, click on the down/ up arrow button in the top right corner. (ii) Properties: 1. Position: This property allows you to control the positioning of elements on the page, such as relative, absolute, or fixed. To apply the position style property to the selected element hover on the position and select the desired value 2. Overflow: Manage how content overflows within an element, specifying whether to display scroll bars, hide overflow, or allow it to be visible. To apply the overflow style property to the selected element hover on overflow and select the desired value. 3. Font-size: Adjust the size of the text within an element to control its visual appearance and readability. To apply the font size to the selected element hover on font-size and select the desired value. The font size values are in pixels. 4. Font-family: Specify the typeface or font family for the text within an element, affecting the overall visual style of the text. To apply the font family to the selected element hover on font-family and select the desired value. 5. Font-weight: Define the thickness or boldness of the text within an element, influencing its visual weight. To apply the font weight to the selected element hover on font-weight and select the desired value. 6. Border Radius: Set the roundness or curvature of the corners of an element, creating rounded, circular, or custom-shaped containers. To apply the Border Radius to the selected element hover on the Border radius and select the desired value. 7. Color and Text Color: Modify the background color and text color of elements to enhance the visual design and readability of your content. Click on the fill to add background color to the selected container and text to apply the color to the text in the container or you can write the desired hex code of the color. 8. Border Style, Width, Color: Customize the borders of elements by specifying their style (e.g., solid, dashed), width, and color to create visually appealing containers and divisions. 9. Width: Adjust the width of an element, allowing you to control how much space it occupies on the page. 10. Height: Alter the height of an element, determining its vertical size and layout. 11. Padding: Add spacing inside an element to control the distance between the content and its borders, improving the visual layout. 12. Margin: Apply margins around an element to control the spacing between it and neighbouring elements, influencing the overall page layout and spacing. 13. Moving the selected element: Same as “Layers”.