Layout Builder: Custom layouts

 Welcome to the web page layout building app tutorial. In this video, we’ll guide you through the process of creating reusable custom layouts.

By the end of this tutorial, you will be able to:

• Understand the purpose of zones and regions.
• Create a layout using zones and regions.

Zones

Zones provide a way to arrange regions in either a vertical or horizontal direction. 

Zones are the containers that hold regions. You can stack them vertically or arrange them horizontally to structure your layout.

To add zones, simply go to the left-hand drawer and choose between horizontal or vertical zones.

In the right-hand drawer, you can fine-tune your layout by configuring the properties of your horizontal and vertical zones.

You can also easily toggle between zones to make adjustments swiftly.

Regions

Next, let’s discuss regions and how to add them to your layout.

Regions are the elements placed inside zones that form the framework of your layout. They can be used to create multiple rows or columns, or both, depending on your design needs.

From the left-hand drawer select the type of region you need.

After adding regions, you can configure them for your specific requirements.

Preview and Save

Finally preview your layouts before finalizing them, simply select the preview button in the app bar.

Once you’re satisfied with your custom layout, select save.

Congratulations! You’ve learned how to create reusable custom layouts using zones and regions in our Web Page Layout App. 

Now you can take your layout building skills to the next level.