Rows & Columns

So before you can build anything on a page, you have to bring in a block. Once you have to block, you need to bring structure to your page. And that is usually columns. You can see that we have these three images here. It gives nice structure to your page. These are container elements, and there are two. The first one is the column element, and the second one is the row element. As I hover over these areas, you will see the blue bounding box. That is a column. Let's go to the Add elements on the sidebar on the left, and you will see at the top, we have the grid elements. I'll click Hold on a column, and anywhere you see on the page, the thick gray line, you can bring in the Columns element. Let go, and we have two columns by default. To access the options of the column, go to the top right-hand corner of any column and click on the Options Toolbar. In many cases, you will need more than two columns, and you just simply click here on add new column, and that will give you another column. To in content into a column, click on the plus, and you can bring in any of the elements.

In fact, you can actually bring in columns within columns. When you bring in another set of columns within columns, you will see that the second set of columns will have link bounding boxes. Again, you can bring in any of these elements within those columns as well. If you have created a column like this with the contents and you want to duplicate it, go to the settings and select Duplicate, and that will give you a second column with the exact same content. You can create up to six columns in a row. After that, you will need to remove any if you want to bring in more columns. You can move columns by simply going to the Options Toolbar and use the arrow keys to move them left or right to the position you need them. To delete, again, Options Toolbar, select Delete. Alternatively, you just right-click on a column and select Delete. Add a background to a column such as an image, a video, or even a map, and you can apply filters. In many cases, you will want to add a color to the background of the column. You can add a border as well as shadow, and then you have hover settings as well.

Link a column like you would link a button by having it linked to a URL with an Open a New tab option as well as make it nofollow, or you can link it to any of the other blocks on your page. This will create a thumbnail view of the other blocks, and you simply select it. When a user clicks on that column, it will take them to that block on the page. Also, add a popup, or you can add a downloadable file. From the settings, you will see that you have control over each column's width in a percentage of the width of the entire canvas. If I reduce this one, you can see how the column stretches. Actually, on the page, any column you hover over, you will see these blue handlebars. You can simply click, hold, and drag on them also if you quickly want to make a few changes to your page. But if you want that control, just go again to the settings and type in the width that you want in percentage. Height is automatically set to auto. On custom, you have control over it in pixels, and then space the content to center, bottom, or scatter.

The normal styling and effects option supply, like padding margins and corners, are also very popular feature feature that you can apply to your columns. A really cool feature of the columns in the builder is its responsiveness. When we go to tablet, you will see that the columns still appear next to each other. However, the handlebar on on the right now appears, which allows you to drag this column and create a second line. Let's say this is way too squashed and we want to have only two columns next to each other. I'll go to the first column and I'll drag it to around 50%, or like I I had shown you, you can go to the settings at the top and type in the 50%. We do the same for the second column. Then these two, I will just drag them to give us around 50%. This way you can ensure that your design is good on these responsive devices. Another great feature also is that you can reorder the columns in a line. If I go to any of these columns, you will see that the reorder buttons appear here in the options toolbar, which will reverse them.

If I select them, they will change in a reverse order. If we go down to mobile, columns are stacked automatically. Usually for mobile, you need more space. But if you have a design where you still need the two columns to be next to each other, like these two red ones where we have the icon and the button, you have the same option again of dragging them to the dimension dimensions you need and bring them in line next to each other. We've looked at the column, and let's look at the row element, which is also a container element. Go to add elements, click and hold on the row, and bring it in. This looks very similar to the two columns that we had brought in earlier, except when you hover over it, now this little gray icon in the top left-hand corner appears. This indicates that you have a bounding box of a row. For all intents and purposes, rows are very similar to columns, except you cannot put rows next to each other. They fill the entire container with. You still have the same options, and that is you have a background. You can apply color for the background, you can link it, and you have the settings like width and height, and then all the styling and effects, and you can duplicate and delete it.

The row is a great container. When you want to bring in a structure and many elements that you are going to duplicate for on your page, then you can easily duplicate it and just move it around on the areas you want it to be within the page.