Vertical Positioning Content in BeaverBuilder

Vertical Alignment

The Problem with Vertical Positioning

Getting the vertical content on a web page - or part of a web page - to be placed where you want it has always been a bit of a struggle.  Early on it was just plain hard. Advances came that made it easier, but it was still non-intuitive.  Even today with modern tools such as BeaverBuilder it can be quite confusing.

In fact, I recently had a client that was spending a lot of time (and frustration) trying to get some content on her site to position vertically under a header.

So let's take a look at how some content can be positioned vertically, and the recommended way to do that.

Make sure you know the page structure first

Before you attempt to vertically align objects on the page, you need to have an overview of how the page is constructed. This doesn't have to be a major undertaking, and it is very likely that you already know the structure if you are designing the page - you just might not have been consciously aware of it.

All web pages built with BeaverBuilder are constructed with some common building blocks (containers); those being rows and columns. These are either stack or nested according to the way you build the page. The row is the base container, and rows can be stacked with multiple rows going down the page.  Within each row you can have additional rows nested. And within each row you can have multiple columns, with each column containing one or more modules.

Understanding this, and how you have built the page, will help you determine where you need to apply settings to vertically align objects.

BeaverBuilder Page Structure

Make sure you know the page structure first

Before you attempt to vertically align objects on the page, you need to have an overview of how the page is constructed. This doesn't have to be a major undertaking, and it is very likely that you already know the structure if you are designing the page - you just might not have been consciously aware of it.

All web pages built with BeaverBuilder are constructed with some common building blocks (containers); those being rows and columns. These are either stack or nested according to the way you build the page. The row is the base container, and rows can be stacked with multiple rows going down the page.  Within each row you can have additional rows nested. And within each row you can have multiple columns, with each column containing one or more modules.

Understanding this, and how you have built the page, will help you determine where you need to apply settings to vertically align objects.

Does this Post Need More?

Did this post leave you with additional questions? Head over to the Facebook Q&A and let me know!

Leave a Comment