Working With Different Content Blocks In Your Post and Page Builder
This guide will help you learn how to create new posts and pages for your WPNfinite theme. We’ve tested numerous page builder plugins and decided to go with the BoldGrid Post and Page Builder as our primary content creation tool. This page builder tool makes it super easy to create reusable content blocks that you can save and modify for future use.
Beautiful and well placed content is the backbone of any successful website. It’s important to learn the fundamentals of WordPress development and how to properly structure your site’s content. In this article we’ll teach you how to create an entire webpage from scratch using the page builder alone.
It may seem difficult or confusing at first but once you get the hang of it you’ll be creating eye-catching web pages in 10 minutes or less!
The Post and Page Builder was created using the Bootstrap framework. This is a famous Front-end framework originally designed for the web application “Twitter”. The Bootstrap Framework provides a “grid based” layout system that makes for easy element placement for your content blocks.
What are Content Blocks?
The Post and Page builder uses four different types of content blocks. Each block is represented in your content using a color based toggle system. How it works is, when you hover over content in your Post and Page Builder editor you’ll see different color toggles appear on your screen.
Each toggle color represents a specific content type. At the highest level you have the “Section” which is represented by a “Black” toggle handle that is found at the bottom of a Block when you hover over the content.
A “Section” (also Known as a “Content Block”) can contain all of the other content types inside of it (Row, Column, Element). You want to use “Sections” to group content of a certain type. For example you might have a “Gallery” section on your page that uses a gray background, and let’s say you want to change gears and add a testimonial section below that with a blue background:
You would hover over the current “Gallery” section and click the black section toggle icon that appears to bring up the “Section Options”. Scroll down a bit and you’ll see the option to “Add New” section. When you click that it’ll add a new section below the current one where you can start on your new content.
Rows are the second highest content level and they are represented by a “Yellow” toggle icon that appears in the upper right corner of a content block when hovered over. Use the drag handle to move your rows up and down within your content and the toggle below is used to bring up the “options” setting for that row. Rows live inside of “Sections”, and a section can contain multiple rows.
Very similarly a “Row” can contain multiple “Columns”, or “Element” blocks inside of it. Use Rows to organize your content within a Section, this is helpful when separating content within a section.
The next content level is the “Column. Columns are represented by the “Blue” toggle and drag handle that appears the column is hovered over. A row can have one or more columns and a column can be moved either up, down, or horizontally within a row.
Columns can contain one or more “Elements” or be left empty for design purposes. They are all about adding structure to your content. Place them anywhere you see fit, they can make for some pretty cool design combinations.
Elements are the innermost layer of content and they are nested inside of columns. Elements can be any sort of content such but not limited to: text, images, icons, buttons, etc. You can have as many elements as you need inside of any given column, row, or section.
Elements are controlled by the orange drag handle that appears when the element is hovered over. Just like the other content types it comes with a directional icon to drag the element along and the page as well as an “options” toggle to bring up more options.
If the element is a nested “Row” you’ll notice a third option, a down arrow. Clicking the down arrow in this scenario focuses the editor so you can work with the specific inside columns.