Custom Sections – A Powerful way to add Custom Content to Your Website

With Custom Sections, you can display custom content on your website based on flexible display conditions with absolutely no coding required.

Page Builder Framework has always focused on providing an intuitive user experience for agencies & end-users. Through the use of the WordPress Customizer, Page Builder Framework has allowed you to create stunning websites and has given you the ability to customize a number of elements.

Today, however, we’re going to take things one step further by releasing a new feature as part of our Premium Add-on.

Custom Sections

Custom Sections is a new feature that allows you to inject a piece of content in your website based on specific display rules with no coding required.

In addition to that, you can replace certain theme-specific elements like the Header, Footer or 404 Page with your own Custom Section.

Using Beaver Builder or Elementor Pro, you can design these sections as you would any other aspect of your website. This will allow you to create an ever more customized website for your clients or yourself.

Custom Sections can be created under Appearance -> Custom Sections

There are two main elements for Custom Sections: Locations & Display Rules.

Locations

We have created 4 Locations that you can use to display the content you’ve created:

  1. Header
  2. Footer
  3. 404 Page
  4. Hooks

By selecting these locations, you can replace your Header, Footer & 404 Page with your Custom Section – or add your Sections to specific areas (Hooks) on your website.

Display Rules

This is where it gets super powerful! Using these display conditions, you can target specifically where your content should be displayed.

Here’s an example:

Are you running a discount on your website? Display a custom banner throughout your Entire Site before the header.

Want people to sign up for your Newsletter? Add a newsletter sign-up form to the bottom of All Posts.

Want a different Header for the member area on your website? Create the header with Elementor Pro or Beaver Builder and make it apply to only specific Pages on your website.

With the powerful inclusion/exclusion rules, the possibilities are just endless! Gone are the days where you had to mess with custom code in your child-theme’s functions.php.

Display Theme Hooks

To get a visual representation of the available locations (Hooks) in Page Builder Framework, logged in users with admin capabilities can now Display Theme Hooks from the WordPress admin bar. This is handy to see where the custom sections can be applied on the front-end.

Custom Breakpoint for Mobile Devices

After releasing the Adjustable Responsive Breakpoints feature, we received a lot of requests to add the ability to change the themes breakpoint for mobile devices. So we’ve added this feature to the Premium Add-On in version 1.10.

The mobile breakpoint can now be changed under Appearance ->Theme Settings (see below).

Wrapping Up

Custom Sections makes it a lot easier to create flexible websites with absolutely no coding skills required. Are you ready to get started with Custom Sections?

Stay in the Loop!

Sign up for our Newsletter & be the first to get notified about new updates & features!

4 Comments

    • Hi Daniele,

      we’re currently in touch with Divi & Brizy to see if we can add support both page builders.

      Stay tuned! 🙂

      Best,
      David

  • I use Elementor Pro to make my headers and footers, turning off headers and footers on each page and thought this could add an “info bar” to the top of pages. So, as instructed, I’ve created a new header (Appearance > Custom Sections) – just a single line of text, for testing – and saved it and it doesn’t show up anywhere! Additionally, the ‘Edit with Elementor’ button does not display (as shown in the instructions), seemingly leaving me to design this bar solely within the standard editor.
    I think a video tutorial or two should be made to show how and why this feature – which seems to have great promise – is to work, ’cause I’m just not getting it!

    Reply
    • Hi Ian! 🙂

      We’re going to create a video tutorial for Custom Sections and update the documentation.

      To make Elementor work with Custom Sections, please activate “Custom Sections” in the Elementor Settings under “Post Types”. After that, please navigate to Settings -> Permalinks in the wp-admin if you get a 404 error trying to edit/view the Elementor-created Custom Sections.

      What hook do you have the info-bar assigned to? If you replace the themes default header with your custom header, the hooks (for instance wpbf_before_header) are no longer available. That may be the reason why it doesn’t show up for you.

      Hope that helps! 🙂

      Best,
      David

Leave a Comment

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

We take your privacy seriously! See our Privacy Policy.

Page Builder Framework

A Page Builder’s best friend.

Sign up for the Newsletter

Get notified about the latest features and updates.

Join the Community