How to Use the Post and Page Builder | BoldGrid
Last updated on

This article is a comprehensive guide to the Post and Page Builder, a free WordPress Page Builder plugin. You will learn how to use every aspect of our WordPress Page Builder to make the most of your posts and pages in your BoldGrid and WordPress website.

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 builder 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.

Content Organization in the WordPress Page Builder by BoldGrid

Sections > Rows > Columns > Elements

Sections 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 toolbar that has two buttons on the very bottom that are black. The left button takes you to a screen that allows you to drag the sections up and down your page, rearranging them any way you want. The right button brings up a menu that allows you to perform tasks related specifically to that section.

CloneCreates a duplicate of the existing section.
DeleteRemoves the entire section and all its content.
Section WidthToggles the width of the section by adding or removing a buffer column.
Move UpSwaps the section with the one above it.
Move DownSwaps the section with the one below it.
Add empty SectionCreates a new empty section just below current one.
Change BackgroundBrings up the menu to change the background.

Sections > Rows > Columns > Elements

Rows 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. Clicking on it and holding your mouse left mouse button allows you to position the row within the section. The lower button has a menu with several configuration options for that row.

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 BlockAdds a new Block section above the current one.
Add ColumnAdds a column to the right side of the row.
Add Empty RowAdds a new empty row at the top of the section.
Drag as ContentDrag the row and allow it to be dropped inside another row or column.

Sections > Rows > Columns > Elements

Columns are inside of rows.

Columns are the next level of content that reside inside a row. A row can have one or more column. 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.

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 MediaAllows the insertion of images, videos, etc.
Vertical AlignmentSets the alignment of the column to either top, center, or bottom of the row.
BackgroundBrings up the background menu for the column only.
Insert FormAllows the insertion of a form from the form editor.

Sections > Rows > Columns > Elements

Elements 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, images, etc. Elements can be moved up and down within the columns. Columns are controlled by the orange drag handles. The top button is a directional button that allows you to click and drag the element vertically. The bottom button has a menu with configuration options specific to the element. Some of the pre-designed Block elements contain a smaller third option that lets you edit the element as a row, so there can actually be columns and elements nested inside. This button will appear at the bottom of the normal drag handle.

Content Organization Summary

The Post and Page Builder uses the grid system Bootstrap for content organization. This is the big picture:

  • 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.

  • The Black is for a section
  • The Yellow is for a row
  • Directional Arrows change the row height
  • The Blue is for a column
  • The Orange is for a specific element that exists within a column

DropTab

The DropTab is the black bar above the Visual Editor. The available options in the DropTab will change based on where your cursor is. Below is a short explanation of each icon.

  • The + sign is Add Block Component
    • Layout and Formatting
      • Block opens the Add Block screen
      • Layout opens starter Grid Layouts
      • Section adds to the top of the screen
    • Design
      • Blockquote adds a stylized text section
      • Button opens the Button Design Popup
      • Divider opens the Horizontal Line Popup
      • Icon opens the Change Icon Popup
      • List creates an unordered list
      • Content and Section Sliders are Premium elements
    • Media – Click the + sign to add the element to the top of the page. Click the Four-way Arrow to drag and drop the element into place.
      • Audio opens Create Audio Playlist Popup
      • Embed opens the Insert from URL Popup
      • Gallery opens the Create Gallery Popup
      • Image opens the Add Media Popup
      • Map opens the Google Map Popup
      • Video opens the Create Video Playlist Popup
  • Widgets – Click the + sign to add the element to the top of the page. Click the Four-way Arrow to drag and drop the element into place.
    • 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 WPForms and WooCommerce
  • The Globe is Global Options. The options you see here will depend on your theme
    • Delete Post Content deletes everything on the page
  • The Color Palettes are used to create new Blocks and in design popups to keep your design consistent
    • The palette can be updated at any time and the page content will update to the new palette
    • Note: If you have a BoldGrid theme the Color Palette is set in the Customizer
  • The Question Mark is Help

Other Elements

  • The Image is Background. Each option (Section, Row, Column) opens the Background Popup
  • The Layout opens the Column Shape Popup
  • The T opens the Text Setting Popup
  • The Gear opens a design popup based on the element clicked
  • The Camera opens the Media Library
  • The Magic Wand opens the Image Filters Popup
  • The Line opens the Horizontal Line Popup
  • The Pencil opens the Google Map Popup

 

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.

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

    • 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 Tannis Cancel Reply

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