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:
- Set a static Page as front page
- 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.
- Edit the front page with Beaver Builder
Screencast (w/o voice) [Screencast with voice for doing similar in Showcase Pro is at the end]
Create two static empty Pages named say,
Blog. At Settings > Reading set Front page to display a static page.
Set Home for Front page and Blog for Posts page.
Edit Executive Pro’s front-page.php.
genesis_widget_area( 'home-slider', array( 'before' => '<div class="home-slider widget-area">', 'after' => '</div>', ) );
the_post(); // sets the 'in the loop' property to true. the_content(); // display content
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.
Edit Home page via Beaver Builder and build it with your desired rows, modules and widgets.