The Layout feature in Smilii Builder allows you to structure your website's content in a clean and organized manner. You can add different layouts, add elements to them, and customize each according to your preference. Here's a step-by-step guide to help you use this feature:

Adding a Layout

1. Drag and drop a layout from the main toolbar onto your webpage.
2. Choose a composition that fits your design concept for this layout.
3. Add the desired elements to your layout, such as text, images, buttons, etc.
4. If you have more than one layout, feel free to add different elements to each.

Customizing Your Layout

Positioning

1. Select the layout you wish to customize.
2. In the right toolbar, under Position, choose the layout arrangement: "Horizontal Layout", "Vertical Layout", or "Floating Block". This option controls how elements are positioned within the layout.

Alignment

1. To align the elements in your layout, select the layout and choose the desired alignment from the right toolbar. You can align elements left, right, or center, or justify them to span the entire width of the layout.

Background

1. To customize your layout's background, select the layout and click the background icon in the right toolbar.
2. You can either choose a color and adjust its opacity or upload an image/video for your background:
   • Adjust the image/video opacity as needed.
   • Select the position where the picture will start from.
   • Choose repeat options. Select to repeat the image/video horizontally or vertically.
   • Check the "Don't scroll background" option to keep the background image static.
   • Use the "Offset" option to move the image/video from its starting point.
   • Use the "Auto" option to have the picture auto-resize and choose whether it will be stretched to fit the layout or retain its original size.

Duplicating a Layout

1. To duplicate a layout, click on the duplicate icon on the layout you want to replicate and choose "Duplicate". This can save time if you want to use the same layout structure in different parts of your website.

Borders

1. To add borders to a layout, select the layout and click the border icon in the right toolbar.
2. From there, you can choose the width, style, and color of your border.

Size

1. Finally, adjust the layout's size according to your preference from the right toolbar.
2. Alternatively, you can check the "Allow to adjust size automatically" box, which lets the layout adjust its size based on the content it contains.

By understanding and utilizing these features, you can create professional-looking, customized layouts that boost the visual appeal and usability of your website.