Last updated on

The BoldGrid Post and Page builder uses the Bootstrap grid system to create Sections, Rows, and Columns for you to control your website content. This article will discuss the controls specific to Sections. For more information on how the Post and Page Builder works overall, you can read about how to use the Post and Page Builder.

How to Use Sections in the Post and Page Builder

The largest containers in the Bootstrap hierarchy are Sections, and each section can contain one or more rows. 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.

Sections > Rows > Columns > Elements

Section controls in the Post and Page Builder

Sections are the outermost area.

To access options that affect the entire section, click the  Black  popover found at the bottom of the section.

The Magnifying Glass icon on the left takes you to the Add Block screen where you can rearrange the sections on the page by dragging and dropping. You can also add new Blocks to your page from here.

The right Hamburger Menu icon brings up a menu that allows you to perform tasks related specifically to that section, as discussed below.

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.

Congratulations!
Now that you have a better understanding of how to work with Sections on your WordPress website, you may want to learn how to work with Rows.

 

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.

2 thoughts on “Working with Sections

    • Hi TC!

      You can create transparent Section backgrounds in the body content of your pages by using the Change Background option. Once you have the Background controls for your Section opened, click the Custom Color option and move the transparency slider all the way to the bottom.

      The Page Background configured in your Customizer settings does not display while working in the Visual Editor, but when you view the page on the front end of your website you should see it show up as expected.

      I hope that this helps you create the design you are looking for on your Sections and please let us know if there is anything else that we can do to help!

Leave a Reply

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