Rows & Columns
The rows and columns are the foundation of your website. You just have to drag and drop the number of columns onto your page to create a new row. You can drag columns into existing rows and it is also possible to have columns within columns, however, it is only possible to go one level deep.
Changing the widths of rows and columns is just a matter of dragging them out but you can enter a width in the settings. Rows are fixed width by default. You can change this to full width and keep the content fixed width. We strongly recommend that all content is kept to a fixed width because what looks good on your monitor may not look so good on a smaller monitor.
Beaver builder have a lot of default settings regarding widths & columns which are as follows:Â
- Fixed Width is 1100px
- Rows have 20px padding and 0px margin
- Columns have 0px margins and padding
- Every Beaver builder has a margin of 20px
- The medium device breakpoint is 992px
- The small device breakpoint is 768px
There are many options in the row and column settings including:
Have a look at the gallery below to see all of the above features being used
This header has many columns and the row has a purple shape in the background. This has been skewed and sized to cover the area of the navigation and contact details
The top row has a background image with an overlay and a bottom separator. The next row has a negative top margin on the 3 columns. The columns have some left and margins to space them out from each other and also a drop shadow
The top row has both top and bottom separators and a background image with a colour overlay. The bottom row has a background colour and bottom separator.
This is 2 rows. The navy box in the middle of the 2 rows is a column which belongs to the bottom row. The column has been given a negative margin to pull it up. It has a gradient background, border radius and a drop shadow. The top row has a background image with a gradient which goes from green with a slight opacity to green with no opacity
The top row has a background image with an overlay and a bottom separator which give the grass effect and the bottom row has the same colour as the separator to blend in.
This row has a background image. The blue and yellow box at the bottom are columns with a radius on one corner. They have background colours. The row has a lot of padding at the top to push the column down and no bottom padding to fix it tight to the bottom of the row
This is a full width row, fixed content with a background gradient and a top separator.
This is a fixed width row with a red border, drop shadow and a border radius, only on the bottom corners. The top column has a red background and there are four columns underneath.
This is a full width row, fixed content with a background image and a gradient overlay which has a slight opacity so that you can ever so slightly see the image.
These are four columns with no margin, in a full width row where the content is also full width, with background gradients of different colours. The background gradient is set to radial.
This is a full width row with a background gradient. The 2 columns have white backgrounds, a drop shadow and have the equalize height setting applied. The left column has a right margin and the right column has a left margin, with no margins on the outside. This allows there to be space between them and span space available.
This is a parallax background on a full width row containing only 1 column. The column has a drop shadow and has a background colour with a slight opacity. The column also has a border radius applied. The background image has had a Gaussian blur filter applied done in Photoshop.
This is a parallax background on a full width row. The row has a separator at the bottom which creates the triangular shape. There are 2 columns in this row. The left column contains nothing and is only in place to take up space. The right column has a drop shadow and a background gradient with a slight opacity. The column also has a border radius applied.
This is a fixed width row with a red border, drop shadow and a border radius, only on the bottom corners. The top column has a background image the second has a red background and there are four columns underneath.