When you activate the BoldGrid Post and Page Builder plugin, it expands the default WordPress editor into our bigger, better version. This feature makes adding content like images and text to your website faster and easier than ever before. It organizes your pages and posts into sections, provides simple on-screen cues for adding and editing content, and allows for drag-and-drop manipulation of various elements in your layout.

Getting Started

Once installed, the Post and Page Builder automatically appears when you begin editing a portion of content within a page or post.

Depending on the section you edit, the Post and Page Builder adjusts to display a few commonly used actions appropriate for that type of content. If you need even more options, click on a section with an image and you will see the full Post and Page Builder menu.

For this article, we want to focus on using the “Add Item” option of the Post and Page Builder menu. When you click on the plus sign or “Add Item,” it allows you to add a new piece of media (i.e., a photo or video), a button, an icon, a Block, or a section.

Adding and Working with Sections

Say you want to add a new section. A section encompasses all of the various content that could be added to your page or post, such as rows, columns, and elements (like text, images, buttons, and more). When you add a new section, you will see arrows at the top and bottom that allow you to expand or collapse it to the desired size. A second tool bar will show at the bottom or right side, providing the following options:

Cloning creates a duplicate of the existing section, while deleting removes the entire section (including its contents). You also have the option to expand or shorten the width of the section utilizing “Section Width.” If you want to move this section higher or lower on the page, choose “Move Up” or “Move Down.” You can also add a new, empty section from this menu.

This menu also provides a means to change the background. To add a background, choose whether you want to use an image, color, or pattern. You can use your own, or choose from our bank of images, suggested color palettes, or pre-designed patterns.

Scroll Effects

Take your section customization even further with our new addition: scroll effects. These will add effects to your background images that occur only when a page visitor scrolls up and down on the page. Scroll effects can bring a page to life and dramatically improve viewer interest and engagement.

To use scroll effects, first select a background. Then, click on “Settings.” You will see the options: “None,” “Parallax” or “Fixed.” If you skip this step, BoldGrid will automatically select “None” for you, and the background will act in the customary fashion. A “Fixed” background will cause the image, color, or pattern to remain in place while the content of the page or post moves over it as the user scrolls. A “Parallax” background, on the other hand, allows both the image and the text to move as the user scrolls, but at different rates, creating a three-dimensional effect.

Adding Buttons

Jumping back to the Post and Page Builder’s “Add New” menu, you can add elements that nest within page sections. Among these are buttons. Buttons encourage your website visitors to take a specific action, such as signing up for your newsletter or downloading a form. With BoldGrid, you can choose from options we provide based on themes, your own buttons, or sample designs based on shape or depth. You can also customize the color appropriately or build your own buttons from scratch.

If you click on the button itself in your Post and Page Builder design layout, a pencil and link symbol appear. These give you the opportunity to further edit the design or text on the button, and to remove or change the link to which the button connects.

Pro tip: Be sure to use labels on your buttons that clearly identify what they do and why a viewer should click them. For example, use “Learn More” when linking to another article or “Sign Up” when asking website visitors to join your mailing list.

Adding Icons

The Post and Page Builder “Add New” menu also allows you to add icons. BoldGrid provides a selection of different icons that you can use to create a visual representation of a talking point. These icons have a wealth of customization options, as well. Change the design of the icon and customize the color to suit the appearance of your page. Update the margin around the icon and neighboring page elements by increasing or decreasing pixels (px) between the left or right sides (horizontally) or above or below (vertically).

Adding Blocks

Finally, the “Add New” menu allows you to add Blocks. Our Blocks have come a long way, with much more to explore (way more than we can include in this article). To learn more about adding this particular item, check out our article: How to Add New and Custom Blocks.

Learn More

If you haven’t already, dive into BoldGrid to expand your website and skillsets today.