How to use the BoldGrid Post and Page Builder

Adding engaging content is the most important aspect of building a 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. Working with a good editor can help tremendously. The BoldGrid Post and Page Builder expands upon the default WordPress editor to give you a fast, easy way to create professional pages for all your content.

This article is a comprehensive guide to the BoldGrid Post and Page Builder – a key part of the BoldGrid suite of plugins. You will learn how to use every aspect of the Builder to make the most of your posts and pages in your BoldGrid website.

Once in the Builder, you will see that the content is organized into a hierarchy. First is the section object. A section can contain one or more rows. Rows contain one or more columns, and columns contain one or more elements. Elements consist of either text, images, buttons, etc.

Content Organization

Sections

SectionSections are the largest containers in the BoldGrid Post and Page Builder system. Within a container, there may be one or more rows, columns, and elements. Sections have a toolbar that has two buttons. 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 to that section.
Blocks are section templates that contain pre-generated content.

4583-02-section-menu

Clone Creates a duplicate of the existing section.
Delete Removes the entire section and all its content.
Section Width Toggles the width of the section by adding or removing a buffer column.
Move Up Swaps the section with the one above it.
Move Down Swaps the section with the one below it.
Add empty Section Creates a new empty section just below current one.
Change Background Brings up the menu to change the background.

Rows

4583-03-rowRows are the first layer of content inside a section. There can be one or more rows within a section. 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.

4583-04-row-menu

Clone Creates a duplicate of the existing row.
Delete Removes the entire row and all its content.
Clear Contents removes all content but does not remove the row itself.
Insert Block Adds a new Block section above the current one.
Add Column Adds a column to the right side of the row.
Add Empty Row Adds a new empty row at the top of the section.
Drag as Content Drag the row and allow it to be dropped inside another row or column.

Columns

4583-05-columnColumns are the next level of content that reside inside a row. A row can have one or more column. Columns contain one or more smaller content objects called elements. Columns can be moved horizontally within its row. Columns are controlled by the blue drag handles. It also has two buttons. 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.

Clone Creates a duplicate of the existing column.
Delete Removes the entire column and all its content.
Clear Contents Removes the content but does not remove the column.
Insert Media Allows the insertion of images, videos, etc.
Vertical Alignment Sets the alignment of the column to either top, center, or bottom of the row.
Background Brings up the background menu for the column only.
Insert Form Allows the insertion of a form from the form editor.

Elements

Elements are the innermost level of content and live inside a column. There can be one or more elements inside a column. Elements are where the content itself is located. Inside an element, you may add text, buttons, icons, images, etc. Elements are controlled by red drag handles. Elements can be moved up and down within its columns. 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-generated 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.

Clone Creates a duplicate of the existing element.
Delete Removes the entire element and all its content.
Font Allows the adjustment of font type and size.

Using the BoldGrid Post and Page Builder:  Content

Toolbars

A section can contain several different components such as rows, columns, and elements. These components can contain other items such as images. Each component and has a specific toolbar to allow for particular settings. These settings allow you to customize the component to customize your site.

How to Move Sections

You can move entire sections of your page from one location to another. Within the BoldGrid Post and Page Builder there are a couple of different ways to do this.

Use the Section Toolbar Drag Button

  1. 4583-07-click-section-drag-buttonClick the left button on the section toolbar.
  2. 4583-08-section-drag-startThis opens up a view of your entire page. Grab the section you want to move by clicking and holding the left mouse button.
  3. 4583-09-section-drag-endNow drag the section to its new location on the page.
  4. 4583-10-click-exit-section-dragOnce you have the sections placed where you want, click the “Exit Section Dragging” button at the top.

Use the Section Edit Menu

  1. 4583-11-click-section-menuClick on the right button on the section toolbar.
  2. 4583-12-section-menuClick on either the “Move Up” or “Move Down” option to move the section in that direction. Your section will switch places with the next section in the chosen direction.

Adding Images to your Page

Images are a large component of the content on a website. WordPress allows you to add images to your site by uploading them to your media library from your local computer. BoldGrid expands upon this by adding the ability to search for images for purchase from stock photography providers. You can then purchase them and add them to your library. Adding images to your site can be done in different ways, depending on which component you are working with.

Adding Images to a Column

  1. 4583-13-click-column-mod-menuLocate the column you want to add an image to and click on the modification menu button.
  2. 4583-14-click-insert-mediaClick on the Insert Media option.
  3. 4583-15-select-imageSelect your image by uploading, selecting from existing library, or purchasing via the BoldGrid Connect Search.
  4. 4583-16-click-insertClick the Insert into page button.
  5. 4583-17-image-insertedAfter the image is inserted, make any adjustments you need.

Adding Images in an Element

  1. Locate the element you want to add an image to and set your cursor where you want to add it.
  2. Click on the Insert Media button at the top of the page editor toolbar.
  3. Select your image by uploading, selecting from existing library, or purchasing via the BoldGrid Connect Search.
  4. After the image is inserted, make any adjustments you need.

Leave a Reply