Let me give you a quick tour of the platform.

How to use the Box Layout

-It provides flexibility for creating responsive designs and managing the positioning of elements within a flexible container. -It's especially useful for arranging items in navigation bars, grids, and other dynamic layouts.

Box Layout

Move the layout to your desired position using the drag-and-drop method.

Drag and drop Box lay out

Ensure that you click on the "Layout"  to reveal its corresponding menu.

You have the option to place any elements within this layout box as well.

You can use these blue point to adjust the size of the Box Layout

This menu provides the option to modify your Box or adjust its configuration.

Edit your Box Layout

-This setting feature allows you to design and structure the layout of your web content using flexbox properties. -These properties include things like flex-direction, justify-content, align-items, and more. -Flexbox can be a powerful tool for creating responsive and adaptable designs, particularly when dealing with varying screen sizes and orientations.

Flex

<ol><li>Size: The dimensions (width and height) of an element on a webpage.</li><li>Gap: The spacing between rows and columns of grid or flex items in layout models.</li><li>Padding: The space between an element's content and its border.</li><li>Border: The visible edge around an HTML element, creating a boundary between the content and its surroundings.</li></ol>

Sizes

This settings allows you to place an image as the background of a specific element/Layout.

Background Image Settings

Colors are used for various design elements, including text, buttons, links, backgrounds, and more.

Color

The "transform" property is often used in conjunction with transitions to create visually appealing interactions.

Transform

-Animation can be used to create dynamic and visually engaging movements or changes in elements on a webpage. -Animations can capture users' attention, enhance user experience, and make a website more interactive and appealing.

Animation

-It has the ability to move elements by clicking and dragging them with a mouse cursor. -The term "freeform" suggests that users have more flexibility and control over the movement of these elements, possibly without any predefined alignment or snapping.

Toggle FreeForm Drag Positioning

This Setting allows you to position your element/Layout.Left, Center , Right and Justify option.

Center

"Select the parent element" refers to the action of choosing or targeting the container or enclosing element that holds a particular HTML element within a web page's document structure.