page builder framework one of the best themes available

Page Builder Framework – One of the Best Themes Available

Video Version

Introduction

The year was 1991. I was finishing school and working nights and weekends at the public library. One Saturday afternoon I was shelving books. Always on the lookout for a something good to read, I would often flip through them as I put them away. I came across a book that looked promising and took it home. I ended up staying up late to finish it and really enjoyed it. The book was The Firm by John Grisham. About a month later The Firm hit the best seller list. I wasn’t surprised. It was a sleeper. Because it was from an unknown author it took a while to be recognized and catch on.

I feel that way about the Page Builder Framework theme. For a long time, when someone asked what theme they should use there would be the standard replies of Astra, OceanWP, or Generate Press. More often now, someone will speak up and say that they are using the Page Builder Framework. It is starting to catch on.

There are two things that make a theme “page builder friendly.” First, it provides the types of layout and styling that a content page builder, focusing on the content area only, typically doesn’t handle. These are things like overall layout, fonts, and global styles. Second, a page builder friendly theme allows page builders to handle the header, footer, and sidebar when the site builder wants to get into “theming.” Pro versions of page builders provide a great deal of control over the overall global layout and even support creating templates for content types and archive displays. However, many site builders are happy having the theme take care of those areas. Consequently, there is a range from “content only” to full theme building, and a good page builder friendly theme needs to gracefully accommodate the site builder however they want to work.

The Page Builder Framework isn’t for everyone. At one end of the spectrum you have themes like OceanWP, Generate Press and Astra. They are “page builder friendly” themes that have tons of layout and style options. At the other end you have the Hello Theme, a stripped down theme with no styling or layout options. The idea with the Hello Theme is that you do all of the layout and styling with your page builder — that’s not optional, it is required. Page Builder Framework is somewhere in between. It is minimalist and feels a lot more like the Hello Theme than OceanWP, but surprisingly it has a fair number of options. It seems minimalist because the options it has have been carefully chosen and crafted to provide just the functionality that its creator thinks a theme needs. You might disagree. You might want tons of Customizer options or you might want none, but I’ve found that most site builders are looking for a happy medium where the theme and page builder complement each other.

Free Version of the Theme

The Page Builder Framework has a free version in the WordPress theme directory and a premium version that’s available from the theme website. Note that the theme has exclusive 5 star reviews. As we step through the side-by-side comparisons we’ll see that the free theme has a nice set of options for layout, typography, styling, and theme features.

page builder framework on the wordpress theme directory

Premium Version of the Theme

The premium version of the Page Builder Framework is available from the theme’s website. There is an annual subscription option and a lifetime option. Both plans are for an unlimited number of sites. The website has pretty good documentation and a place where you can create and download a custom child theme.

The premium version adds two pages sections under the Appearance menu, Theme Options and Custom Sections, and a number of advanced options in the Customizer. These will be shown below.

page builder framework home page

Testing Setup

To test the theme, I setup a test site and imported the Theme Unit Test data. This is demo content created by the WordPress Theme Review Team to test that a theme is displaying content as it should. Here is the blog page on the test site. This is how the theme looks and handles the test data out of the box.

blog posts on the test site.

Default Styling

First, let’s take a look at the display of the test content: styling of HTML, the display of Gutenberg blocks, and general layout. Here are screenshots of a few of the demo pages:

Image Alignment Test

image alignment test

HTML Markup and Formatting Test

markup and formatting test

Button Block Test

button block test

Cover Block Test

cover block test

Layout

Page Width and Breakpoints

The free version of the theme has places in the Customizer where you can set the page width. This is found in the general layout options for an overall default, but there is also the option to change this for single and archive layouts. There are also options for full width and boxed layout. When you select boxed layout there are margin, padding, and background color options for the box.

page builder framework page width

The breakpoints by default are set at 480px for mobile, 768px for tablet, and 1024px for desktop. With the free theme you would need to add media queries to your style sheet or in the Customizer. The premium version provides an interface to set this on the Theme Options page.

page builder framework custom breakpoints

Header Options

There are the typical header options for logo, favicon, menu, fonts, and colors. You can size the logo separately for mobile, tablet, and desktop.

Top Bar

There is an option for a top bar that comes with the free theme. You can have one or two columns and include text, HTML, a menu or shortcode.

Logo and Navigation Placement

The free theme has options for menus right of logo, menus left of logo, split menu with logo in the middle, and stacked with the logo centered on top of the menus.

page builder framework menu right
page builder framework menu left
page builder framework menu centered
page builder framework menu stacked

The premium version adds the options for Stacked (advanced), Off Canvas Right, Off Canvas Left, Full Screen, Custom Menu and Mega Menu.

Stacked advanced gives you options for content beside the logo area.

page builder framework menu stacked advanced

Off canvas options put the hamburger menu to the right or left and the menu slides in from that side.

page builder framework off canvas menu right
page builder framework off canvas menu left

The full screen menu has a hamburger menu on the right and then a popover menu.

page builder framework full screen menu

The Custom Menu option removes the regular header and gives you the option to paste in a shortcode for either an Elementor template or a Beaver Builder layout. This means that you can create the header and navigation menu using the page builder.

page builder framework custom menu

To create a Mega Menu you need to add the pages to a regular menu and set special classes. You can use HTML to add images. Best see the documentation!

Other Premium Header Options

The premium version of the theme gives you the option for

  • Transparent headers (defaults can be overridden on a page by page basis)
  • Sticky navigation
  • Navigation hover effect
  • A call to action button on the menu

Mobile Menu Options

The free theme comes with controls for you mobile menu so you can set styles for the hamburger menu, font, padding, background colors, etc.

page builder framework mobile menu options

The premium version of the mobile menu adds the option for an off canvas mobile menu or a custom menu using a page builder shortcode.

The footer options include one column, two columns, or no footer. You can add text, HTML, menus, or shotcodes to the footer areas.

page builder framework footer options

The premium version of the theme adds the option for a sticky footer. With this option active, if your page content doesn’t take up the height of the screen, instead of the footer showing in the middle of the screen, it will be pushed to the bottom, which looks better.

page builder framework no sticky footer
page with no sticky footer – see the white space at the bottom
page builder framework with sticky footer
page with sticky footer – footer pushed to the bottom

With the premium version you also get the option for a custom footer. Just like the custom header, you can replace the regular footer with one created using your page builder.

page builder framework custom footer option

Sidebar Options

The free theme gives you some basic sidebar options. You can set right, left or no sidebar. You can use the slider to set the width percentage, add padding by device size, and set the background color for the widget areas.

page builder framework sidebar options

You can set the gap between content and sidebar to Divider, xLarge, Large, Medium, Small, and Collapse. Collapse removes the padding between content and sidebar. Here are screenshots with the Divider and Collapse options.

page builder framework sidebar - divider option
sidebar with divider option
page builder framework sidebar - collapse option
sidebar with collapse option

Content Layout Options

General

There are some general defaults for content layout options that apply to single or archive. Here you can set a default ordering of the meta, a separator, and labels for “read more” and the category tag prefix. The “read more” can be shows as a text link, a button, or as a primary button. The theme allows you two button styles (shown below). There is also the option to show the author’s avatar image next to the meta.

page builder framework general content layout options
general content options
page builder framework with avatar image showing
example of meta with the author image showing

Archive Pagination Options

The archive pagination displays as buttons. There are styling options for the pagination.

page builder framework pagination options
page builder framework pagination buttons
pagination buttons

Single (Posts) Layout Options

You can override the defaults for content width, sidebar, and meta ordering. You can also set the bottom of page post navigation options to previous/next, post title, or hide it. You can set the content style to be the plain or boxed.

page builder framework single layout options

Here is an example with boxed content and the avatar image:

page builder framework single with boxed content

Archive (Blog) Layout Options

As with the single, you can override the default content width, sidebar, and meta settings.

page builder framework archive layout options

Two interesting things of note:

1 – The theme gives you the option to change the archive headline. By default WordPress shows the archive type as a prefix, which is jarring. You can remove that, or remove the archive title altogether.

page builder framework archive title options
by default WordPress shows a prefix with the archive type
page builder framework archive title options
archive title with prefix removed

2 – The free theme has two archive layout options. The default has the featured image horizontal above the content. There is also the option for the featured image next to the content. This makes it easier to accommodate images of different sizes. Here are two screenshots from archives to illustrate.

page builder framework archive with image on top
archive with image on top
page builder framework archive with image on side
archive with image on side

The premium version of the theme adds a third archive layout option for a grid layout. With the grid layout there is the option for Masonry effect also. Here is the demo data in a grid with boxed layout and the sidebar removed.

page builder framework archive with grid layout
archive with grid layout
page builder framework archive with grid layout and masonry
archive with grid layout and masonry

Separate Archive (Blog) Layout Options for Each Content Type!

A really cool feature of the premium version is that you get the option of having a separate archive option for each content type. To enable this, go to the Theme Options page and select the ones you want. So for example, here I have a Custom Post Type called Books selected.

page builder framework separate archive options

And now in the Customizer the archive options are duplicated and I have a set just for Books. This is nice where, for example, I’m using portrait orientation images (book covers) for the featured image. Also, you may not want to show the same meta for each content type.

page builder framework separate archive option for books

Typography Options

The Page Builder Framework comes with the full range of typography options that you can set.

page builder framework typography options

The “Text” settings are used as the default for text content and the “H1” settings are used as the default for headings … though the font size for headings automatically steps down as the heading changes. You can use these default shortcuts or set the options for each one.

page builder framework typography options for text

The font lists include a long list of Google fonts. One cool feature of the theme is that it automatically downloads the Google fonts as a performance tweak. Doing so also means that you don’t need to have that dependency.

The premium version of the theme adds the option to use Adobe Typekit fonts or to upload your own custom font.

page builder framework premium font options

Additional Customizer Options – Free Version

Button Styles

The Customizer has options for setting two button styles.

page builder framework button options.

Pro tip, you can use the button classes when using Gutenberg in the Advanced accordion ( wpbf-button and wpbf-button-primary ) to apply the theme button styles.

page builder framework where you add the button class in Gutenberg

Breadcrumbs

There is the option to show breadcrumbs. You can select what content types you want to show breadcrumbs on, the location, and style them.

page builder framework breadcrumb options

Here is an example of breadcrumbs:

page builder framework breadcrumbs example

Scroll to Top

A scroll to top option is found in the General / Layout area. It seems very trivial, but it is something I have come to expect and I find sites without it lacking.

page builder framework scroll to top options

Additional Customizer Options – Premium Version

Social Media Icons

The premium version of the theme comes with an area to set your social media icons. Personally, I’ve always created my own menu and used font-awesome, but this is a convenience function. You can place them in the top bar, footer or in a template using a shortcode .

page builder framework social media icons

WooCommerce Options

Page Builder Framework has a number of Customizer options for WooCommerce for the Product Page, Shop Page, and Cart Menu.

Add Scripts Options

In the Customizer there is an area for adding JavaScript or CSS snippets. This is a convenience function so you don’t have to install another plugin to add things like the Google Analytics code.

404 Page Options

When people are setting up a site they sometimes don’t think about the 404, content not found, page. You might find the WordPress default lacking, so the Page Builder Framework (premium version) gives you some Customizer options here as well. Note the option to inject an Elementor or Beaver Builder saved template / layout. This lets you create some custom content to guide site visitors who are lost.

page builder framework 404 page options

Theme Options Page

We have already looked at the extra archive layout and custom breakpoints settings (shown above). The Theme Options page also has some global template settings. These are for convenience and can be overridden / set on a page by page basis also.

page builder framework global template settings

There is a section for performance settings. The first one compiles all of the Customizer inline CSS which helps the pages to load a tad faster. This is something that page speed testers check for. The rest of the options here are to disable old and seldom used WordPress features that may not be used on your site.

page builder framework performance settings

There are also White Label options for those building custom websites for others.

page builder framework white label options

Custom Sections / Hook Areas

Custom sections are a powerful feature that you can use for banners and other content (such as a site-wide notice). You can place the custom section in the header, footer, or 404 page. Alternatively, you can can place it using one of the hook locations. There are include and exclude display rules, or you can restrict it only logged in users. In the screenshot below I used the Gutenberg editor and the HTML block to create a notice. I selected a hook location to show it above the header.

page builder framework create custom section

This is what it looks like on the front end. So, you can see how easy it would be to add a quick bit of content. Notice the banner at the top.

page builder framework custom section example

There are a lot of hook locations and there is a guide for picking the one you need. When you click on the “Display Theme Hooks” button you get to see them.

page builder framework - show hook locations

What Does It All Mean?

When you use the Page Builder Framework theme it feels very light weight. Small details like downloading the Google fonts and serving them locally, compiling the Customizer inline styles, and the list of optimization options helps to make the theme feel snappy. There is a great attention to detail. I appreciate the control the theme offers and the option to use a page builder if I want something truly custom.

There are a lot of unique or rarely seen options. For example, the ability to have a different archive layout for each content type, a sticky footer option, setting the responsive breakpoints, and the custom sections. The theme didn’t copy features from other themes, everything is thought through on its own merits.

The Page Builder Framework has been a sleeper theme, but now it is gaining traction and more people are using it. I’m using the Page Builder Framework theme on this website. There isn’t a higher endorsement than using it yourself.

Visit the Page Builder Framework Website

Affiliate Disclosure: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. You will still pay the same amount so there is no extra cost to you. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

>
Scroll to Top
elementor360

Newsletter

Sign up for the Elementor360 Newsletter and stay current with all the Elementor news!