Adjusting Row Height in Beaver Builder

This article shows you how to go about Adjusting Row Height in Beaver Builder. The Beaver Builder page builder plugin is a user friendly front end editing tool that works beautifully to enable anyone to quickly build responsive web pages on a WordPress website. 'Front end editing', for anyone not familiar with WordPress admin, refers to the ability to work on a web page while on the public facing front end of the website as opposed to working in the 'back end' i.e. the WordPress admin area.

What is a Front End Editor?

Working on a front end editor gives you the distinct advantage of being able to see your changes as you make them in the exact same format as they will appear when published as opposed to saving changes in the back end admin then previewing on the front end of the website.

Chris Lema Talks About Beaver Builder

Beaver Builder isn't the only front end page builder available but from my experience and more to the point in the opinion of some high profile WordPress experts it's the best. Beaver Builder appeared on my radar thanks to one such expert, Chris Lema. Mr Lema highlights the fact that Beaver Builder is well coded and has future proofing features that people with less experience may overlook and subsequently regret when choosing WordPress tools.

In this article we look at one of the fundamental building blocks of any Beaver Builder page namely a row and more specifically how to adjust the height of a row. Let's dive in now.

Let's Start Adjusting Row Height in Beaver Builder

1. Add a single column row which places a column into the row.

The row can be empty without any problem, note that you will be adjusting settings in the row setting for this exercise rather than the Text Editor or any other module that may be added to the row. Go to the row settings:

Access Row settings

2. Adjust the top/bottom padding to expand the row height:

Blog - BB Row Heights
3. You may need to try a few different values until you find what works best for your row.

You will see on the example below that I'm working on the 'Advanced' tab and that I've changed the top and bottom padding from the default 20px to 150px.


Find out more about Beaver Builder

Banner - 728 x 90