How to Use the Post and Page Builder | BoldGrid


 
This article is a comprehensive guide to the Post and Page Builder. We will discuss the additional customization options BoldGrid adds to the Editor.

Drop Tab

The Drop Tab is the black bar above the Visual Editor. The available options in the Drop Tab 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

    Popovers

    The Post and Page Builder by BoldGrid was built to use a grid system called Bootstrap. The order of this system is explained below.

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

     

    Get more for free by signing up with BoldGrid Central Create Account