How to make a specific section in Genesis editable via Beaver Builder

Updated on September 16, 2016

In Genesis Facebook group a user asked:

I have an Executive Pro/Beaver Builder/client question for you, to see if this is possible. I haven’t used Beaver Builder. I just hand-code my CSS. The client wants to be able to do this themselves.

This is in the home-top widget of Executive Pro.

“In a perfect world (I know, it’s not a perfect world in responsive design ) XXX is looking for a homepage widget that has maximum flexibility. We could move columns, add a column, remove a column, add picture boxes where we want them…”

A significant amount of text, and photos, is going into the home-top text widget.

Is this possible with Beaver Builder and to be fully responsive?

Here’s the summary of steps:

1. Set a static Page as front page
2. Executive Pro‘s front page has Slider, Top, CTA and Middle sections appearing inside a function hooked to genesis_loop. Inside this function place the code to display content in the desired location, in this case that would be below the home slider.
3. Edit the front page with Beaver Builder

Screenshot:

Screencast (w/o voice) [Screencast with voice for doing similar in Showcase Pro is at the end]

Step 1

Create two static empty Pages named say, Home and Blog. At Settings > Reading set Front page to display a static page.

Set Home for Front page and Blog for Posts page.

Step 2

Edit Executive Pro’s front-page.php.

Below

genesis_widget_area( 'home-slider', array(
    'before' => '<div class="home-slider widget-area">',
    'after'  => '</div>',
) );

add

the_post(); // sets the 'in the loop' property to true.
the_content(); // display content

Step 3

Install and activate Beaver Builder. Note that the free lite version does not have the Callout module which I used in my screencast for easily re-creating the default Home Top 3-column widgets. If you are a Genesis user and like to use page builder either for your own use or for clients, I recommend the Standard version.

Step 4

Edit Home page via Beaver Builder and build it with your desired rows, modules and widgets.

Example 2: How to set up editable content between Front Page 2 and Front Page 3 in Showcase Pro

Reference: https://sridharkatakam.com/full-width-page-template-in-genesis-for-beaver-builder/