In this article:
The Post and Page Builder, BoldGrid’s WordPress page builder, uses the Bootstrap system of Sections, Rows, and Columns to layout your website elements. This article will discuss the controls specific to Columns. If you’re looking for a more general overview, you can read about how to use the Post and Page Builder.
How to Use Columns in the Post and Page Builder
Columns contain one or more elements, or can be left empty if the design calls for it. Columns allow content elements like text and images to reside next to each other in a single row.
The Post and Page Builder makes it easy to build your website by adding extra controls that appear on hover, called Drag Handles or Popovers. Once you click into the column you want to work with, these popovers will appear.
Sections > Rows > Columns > Elements
Columns are inside of rows.
Each row on the page is comprised of one or more columns. To open the available options for the column, click the Blue popover that appears at the top of the column.
The Directional Arrow on the left allows you to drag and drop the column left or right in the current row, or into another row.
The Hamburger Menu icon on the right brings up a menu with controls for that specific column, as discussed below.
|Creates a duplicate of the existing column.
|Removes the entire column and all its content.
|Removes the content but does not remove the column.
|Opens the Media Library to select or upload an image
|Sets the alignment of the column to either top, center, or bottom of the row. This alignment is relative to the content in the rest of the columns in the row.
|Brings up the background panel to use a color, image, or pattern. This background will only be applied to this specific column.
|Style this column with a shape, examples are shown below.
|Adjust padding, margin, border, animation, and more.
The Post and Page Builder includes over 30 Column Shapes to choose from, or click the Customize Design button at the bottom of the panel to modify any starting design into your own. Created designs are saved in the top My Designs section for easy reuse.
To open this panel you can use the column menu discussed above, or click the Layout icon in the DropTab at the top of the editor.
How many columns does each row need?
In the Bootstrap system, each row needs to have 12 columns. This can be divided into one or more columns as illustrated here:
How each row is divided up can change on different screen sizes using the responsive controls in the Post and Page Builder, which are found in the WordPress toolbar above the DropTab. Drag each column’s width as needed for each device.
For example, if you have a row with 3 / 3 / 3 / 3 on desktop you may want to use 6 / 6 / 6 / 6 on tablet. A new row will automatically be created anytime the total columns are more than 12, so what is one row on desktop will become two rows on tablet. On mobile, we recommend each columns uses all 12, as there isn’t much screen size available.
How do I put space between column backgrounds?
There are two basic types of column backgrounds. You can have the background of each column fill the entire column, so consecutive column backgrounds touch each other, as shown here:
If you want the columns to have space between them, you will need to adjust the margin in the advanced settings. Don’t worry, this isn’t as hard as it sounds! Start by clicking into the column you want to change. From here you can click the Layout icon in the DropTab, then the Customize Design button at the bottom of the panel to open the advanced settings.
Click into the 2nd option – Margin. If your design has negative values for Right and Left like shown here, update them to 0.
Then you will see a space between the columns:
200+ Design Templates + 1 Kick-ass SuperTheme
6 WordPress Plugins + 2 Essential Services
Everything you need to build and manage WordPress websites in one Central place.