1. Rows & Columns

If you're just starting your journey in web design, the first thing you need to know is that everything on your page begins with a 'block.' Blocks form the backbone of your page structure, with columns and rows bringing organization and uniformity. This article will walk you through the intricacies of these core elements.

Getting Started with Blocks

To start building your webpage, you must first bring in a block. Once you have a block, you add structure to your page by integrating columns. For instance, consider a page layout with three images; these columns add organization and balance to your page.

Your primary container elements are 'column' and 'row.' Hover over the different areas of your design, and you'll notice a blue bounding box indicating a column. You can add columns by going to the 'add elements' on the sidebar and selecting 'grid elements.' By doing so, you can introduce the columns element to any part of your page with a thick grey line.

Customizing Columns

You're not just limited to one or two columns. In many cases, you might need more than two, and adding them is as simple as clicking on 'add new column.' Content can be inserted into a column by clicking on the '+' sign, which opens up a plethora of elements that can be added.

Did you know that you could also create columns within columns? These 'inner columns' are visually distinct with pink bounding boxes. Like their 'outer' counterparts, these inner columns can house any elements you wish to add.

One of the useful features is the ability to duplicate a column along with its contents. By selecting 'Duplicate' from the settings, you can create up to six columns in a row, each being a mirror image of the original. If you need to reorder or delete a column, it's as simple as going to the 'Options' toolbar and making the necessary adjustments.

Beyond the Basics: Advanced Column Features

Columns can be enhanced further by adding backgrounds, including images, videos, or maps, and filters can be applied to these backgrounds. You can also link a column to a URL or any other block on your page, create a pop-up, or even add a downloadable file.

Fine-tune each column's width and height according to your needs, with height being auto-set and width adjustable as a percentage of the entire canvas width. Custom adjustments allow you to control the height in pixels and arrange the content to center, bottom, or scatter.

Responsiveness and the Role of Rows

A unique aspect of the columns in the builder is their responsiveness. When viewed on a tablet, the columns still appear next to each other, and you can adjust them as needed to ensure a good design on these devices. Columns can be reordered and even stacked automatically for mobile views, providing an optimal user experience across all devices.

Now, let's touch upon the 'Row' element. Rows serve as containers and, like columns, they too can contain various elements. However, unlike columns, rows cannot be placed next to each other; they span the entire container width. Rows are particularly useful when you need to duplicate and reuse many elements within your page, as they can easily be duplicated and repositioned as needed.

Through a thorough understanding of blocks, columns, and rows, you can design and structure your web pages effectively. Remember, it's all about combining these elements cohesively to create a balanced and engaging user experience. Happy designing!