Last updated on

This article is a comprehensive guide on how to use the Post and Page Builder, a free WordPress Page Builder plugin. By the end of this article you will know how each control works, making it easy to modify starter content or Blocks, or make entirely unique page layouts from scratch.

Adding engaging content is the most important aspect of building a WordPress website. This content usually takes the shape of either text or images. There is also the task of ensuring all your content is laid out properly. You want to be sure it flows correctly and works well together so your users have a good experience when on your website.

Working with a good WordPress page editor can help tremendously, and the Post and Page Builder by BoldGrid gives you a fast, easy way to create professional pages for all your content.

How to Use the Post and Page Builder

The Post and Page Builder uses the grid system Bootstrap for content organization. While reading this guide we recommend you follow along with your own content – you can add a BoldGrid Block to your page if needed. This will help ensure you see all the controls we are discussing.

This is a high level overview of the content organization structure, and in the next section of this article we will go into more detail on what each of these mean.

  • A Section is the largest container and can contain one or more rows
  • A Row is the next largest container and can contain one or more columns
  • Each Column can contain an element, or be empty
  • Examples of Elements are text, images, and buttons

BoldGrid makes it easy to use this grid system by adding extra controls that appear on hover, called Drag Handles or Popovers. Once you click into the section you want to work with, these popovers will appear.

  •  Black  is for a section, it is found at the bottom
  •  Yellow  is for a row, it appears in the upper right
  •  Blue  is for a column, it appears at the top of the column its currently controlling
  •  Orange  is for a specific element that exists within a column, in this example its selecting the text paragraph
  • On the upper and lower right sides there are Directional Arrows change the row height

Post and Page Builder popovers

Content Organization

Sections > Rows > Columns > Elements

Section controls in the Post and Page BuilderSections are the outermost area.

Sections are the largest containers and are referred to as Blocks in the Post and Page Builder. Within a container, there may be one or more rows, columns, and elements.

Sections have a black popover at the bottom with two buttons. The left Magnifying Glass icon takes you to a screen that allows you to drag the sections up and down your page, rearranging the page any way you want in seconds. The right button brings up a menu that allows you to perform tasks related specifically to that section. Learn more about working with sections.

CloneCreates a duplicate of the existing section.
DeleteRemoves the entire section and all its content.
Section WidthChoose between a fixed container or full-width so the content touches the sides of the screen.
Move UpSwaps the section with the one above it.
Move DownSwaps the section with the one below it.
Add NewHovering here will give you two options – add a new row to the current section, or add an entirely new section.
Save BlockSaves the section as a Block in your Block Library.
Change BackgroundBrings up the background panel to use a color, image, or pattern.
Advanced ControlAdjust padding, margin, border, animation, and more.

Sections > Rows > Columns > Elements

Row controls in the Post and Page BuilderRows are inside of sections.

Rows are the first layer of content inside a section. There can be one or more rows within a section, and each row can contain one or more columns. Rows can be moved vertically up and down within the section they are located.

Rows are controlled by yellow drag handles. The drag handle contains two buttons. The top one is a movement handle. Click and hold your mouse left mouse button to drag the row where you want within the section. The lower button has a menu with several configuration options for that row. Learn more about working with rows.

CloneCreates a duplicate of the existing row.
DeleteRemoves the entire row and all its content.
Clear ContentsRemoves all content but does not remove the row itself.
Insert BlockOpens the Add Block screen
Add ColumnAdds an additional column inside the row. Be sure to adjust on all screen sizes.
Add Empty RowAdds a new empty row above the current row, in the same section.
Change BackgroundBrings up the background panel to use a color, image, or pattern. This background will only be applied to this specific row.
Advanced ControlAdjust padding, margin, border, animation, and more.
Drag as ContentDrag and drop the row inside a column, making what’s called a Nested Row.

Sections > Rows > Columns > Elements

Edit columns in the Post and Page BuilderColumns are inside of rows.

Columns are the next level of content that reside inside a row. A row can have one or more columns. Columns contain one or more elements, or can be left empty if the design calls for it. Columns can be moved horizontally within its row.

Columns are controlled by the blue drag handles. The left button is the directional button – clicking your left mouse button and holding it will allow you to drag the column left or right, swapping it out with the ones next to it. The other button has a menu with other options for you to configure the column. Learn more about working with columns.

CloneCreates a duplicate of the existing column.
DeleteRemoves the entire column and all its content.
Clear ContentsRemoves the content but does not remove the column.
Insert MediaOpens the Media Library to select or upload an image
Vertical AlignmentSets 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.
Change BackgroundBrings up the background panel to use a color, image, or pattern. This background will only be applied to this specific column.
ShapeStyle this column with a shape, examples are shown below.
Advanced ControlAdjust padding, margin, border, animation, and more.

Sample Column Designs

The Post and Page Builder comes with over 30 Column Shapes for you to select from, or click the orange Customize Design button to modify any starting design to be uniquely yours.

Some shapes will span the entire width of the column, so backgrounds of two columns touch, and some have space on either side so the background is contained. Since the WordPress editor will update in real time, it’s easy to try different design settings to see what works.

Column shapes in the Post and Page Builder

Sections > Rows > Columns > Elements

Edit element in the Post and Page BuilderElements are inside of columns.

Elements are the innermost level of content and live inside a column, and each column can have as many elements as you need. Example elements are text, buttons, icons, and images.

Columns are controlled by the orange drag handles. The top button is a directional button that allows you to click and drag the element where you want it. The bottom button has a menu with configuration options specific to the element.

If the element is a nested row, a third option is shown – a down arrow. Clicking this down arrow will focus the editor on the nested row to enable you to work with the inside columns.

How to Add Page Elements

Now that you understand how the content is organized, the next step in learning how to use the Post and Page Builder is working with actual content. When adding or editing page elements you will use the black toolbar above the Visual Editor, what we call the DropTab.

The available options in the DropTab will change based on where your cursor is. If you are in an empty section you will see 4 icons – a + sign, globe (global options – will depend on your theme), question mark (ways to get help), and a picture (sets the section background).

To add a new page element, click the + sign to open the Add Block Component panel. Below the image is a short explanation of each Block Component.

Post and Page Builder Block Components

Layout and Formatting

  • Block opens the Add Block screen where you will find an endless supply of professionally designed BoldGrid Blocks
  • Layout opens starter Grid Layouts, as shown below
  • Section adds a new empty section to the top of the screen

Post and Page Builder row layouts

Design

  • Blockquote adds a text section, stylized by the theme
  • Button opens the Button Design panel
  • Divider opens the Horizontal Line panel
  • Icon opens the Change Icon panel
  • List creates an unordered list
  • Content and Section Sliders are Premium elements and will only be visible if the Post and Page Builder Premium plugin is activated

Media

When you select the type of Media you want to use, click the + sign to add it to the top of the page or click and hold the Four-way Arrow to drag and drop into a specific location

  • Audio opens Create Audio Playlist screen
  • Embed opens the Insert from URL screen
  • Gallery opens the Create Gallery screen
  • Image opens the Add Media screen
  • Map opens the Google Map screen
  • Video opens the Create Video Playlist screen

Widgets

When you select your desired Widget, click and hold the Four-way Arrow to drag and drop into a specific location or

  • click the + sign to add it to the top of the page.
  • The standard WordPress widgets, including Post List, Single Post, Recent Comments, and Categories are now available from the Editor
  • Additional plugins will add new widgets, such as weForms and WooCommerce

How to Update Page Content

To modify an existing element on your page or post, first click your mouse on the item to wish to change. The available options in the DropTab will change based on what was clicked. All icons are listed below, but it’s impossible to have them all show in the DropTab at once.

Post and Page Builder Controls

  • The Image icon sets the Background for the current area – on an element, column, row, or section
  • The Layout icon opens the Column Shape panel
  • The T icon opens the Text Setting panel
  • The Gear icon opens a design popup based on the element clicked (icons or buttons for example)
  • The Camera icon opens the Media Library
  • The Magic Wand icon opens the Image Filters panel
  • The Line icon opens the Horizontal Line panel
  • The Pencil icon opens the Google Map screen

Congratulations!
You have completed the intro guide on how to use the Post and Page Builder by BoldGrid. Next, you may want to learn the difference between padding and margin to learn about these advanced controls.

 

SIGNUP FOR

BOLDGRID CENTRAL  

   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.

12 thoughts on “How to Use the Post and Page Builder

  1. Can I make reusable blocks in Post and Page Builder? I don’t mean just saved blocks, but blocks that, e.g., appear on each page and can all be updated simultaneously.

    • Hi Fadil-

      It is possible to add new rows into a column using HTML, but for most layouts it shouldn’t be necessary. Can you describe what kind of layout you’re trying to achieve?

      • Hi Jesse, I’m interested in this question.
        I have a row with 2 columns, and in one of the columns I want to have 2 buttons side-by-side. Maybe there’s some simple way of doing this, but my first thought was to put a little row with 2 columns *inside* that big column. (The article mentions “nested rows”, but I can’t find those in the “Add elements” toolbox.)

        • Hi Mark, So what you could do is create 4 columns inside of the row with similar width. Place your buttons inside two of the columns and leave the other two as empty space. Then you can adjust each column until you feel the placement is correct. You can add elements like padding, margin, and spacing to your columns by selecting the column and choosing Advanced Controls from the drop-down.

          Another thing you could do is try locating one of our pre-made blocks, (by clicking the blue “Add Block” button towards the top of the page builder), with a similar button placement and use that as a base for your own design.

          • Thanks Brandon, I appreciate the response! Here’s a picture of the particular layout I’m looking for:
            https://imgur.com/a/QaPyxaf

            If this was a 4-column layout, the tricky part is that I have a picture spanning the left 2 columns, and a paragraph spanning the right 2 columns above the buttons.
            If this isn’t easy within the bootstrap grid system, I’ll probably just stack the buttons vertically.

    • Hello Aquilla,
      You can insert a single post onto a page using the Single Post Widget block component. To find it, click the Add Block Component “+” plus sign, then scroll down to the “Single Post” option. Here’s a screenshot to help:
      Single Post Widget Block Component

Leave a Reply to Aquilla Cancel Reply

Your email address will not be published. Required fields are marked *